I tried to use the ‘inspect element’ of the firebug addon for Firefox but it doesn’t give me any link to the javascript.
For example I got this from the firebug add-on:
<a href="javascript:">
text of the link
</a>
But there is no link to the actual javascript or anything that I can use to directly go to the said link.
How do I accomplish this? I need this as part of a personal data mining project that I am doing.
I would recommend using Chrome for this. The inspect and debugging tools allow you to view the js source files along with the html and css.
Steps:
Right click on the element in question in Google Chrome. Click inspect element which is the last item in the menu. The developer menu will popup in the bottom of the screen. The html for the selected element that you right clicked on will be highlighted. From here you can click the “Event Listeners” tab located in the far right panel of the developers menu. Choose your selected listener and it will show you the associated javascript file. Hope this helps!
4
Using chrome/chromium, adding breakpoints on an event is a piece of cake:
- Right click the element, select “inspect element”
- The console pops open, on the right side, there’s a tabbed window, select the “Event Listeners” tab
- Select the desired event, in this case click
- You should see a list of event listeners, and a link to the js code that binds those listeners.
- click on the bound listeners, to learn more about them
- Use the links to navigate to the listener you’re interested in
- Right click on the line number where you want to set your breakpoint
- Select “Add Breakpoint” or “Add Conditional Breakpoint…”
- For conditional breakpoints: type an expression that best suits your needs
Screenshots and more details can all be found here, though. The documentation is also interactive: for each feature, there’s a link or button you can use to set a breakpoint on. Try a couple of them out, and get a feel for it. It’s really a great tool for debugging client-side JS code.