How can I set breakpoints in an external JS script in Firebug

Question

I can easily set breakpoints in embedded JS functions, but I don't see any way of accessing external JS scripts via Firebug unless I happen to enter them during a debug session. Is there a way to do this without having to 'explore' my way into the script?

@Jason: This is a good point, but in my case I do not have easy access to the script. I am specifically talking about the client scripts which are invoked by the ASP.Net Validators that I would like to debug. I can access them during a debug session through entering the function calls, but I could not find a way to access them directly.

Solution 1

To view and access external JavaScript files (*.js) from within Firebug:

1. Click on the 'Script' tab.
2. Click on the 'all' drop down in the upper left hand corner above the script code content window.
3. Select 'Show Static Scripts'.
4. Click on the dropdown button just to the right of what now says 'static' (By default, it should show the name of your current web page). You should now see a list of files associated with the current web page including any external JS files.
5. Select the JavaScript file you are interested in and it's code will display in the content window. From there, you should be able to set breakpoints as normal.

Solution 2

Place debugger; in your external script file on the line you want to break on.

Solution 3

Putting the "debugger;" line also does the trick for the Chrome debugger.

Solution 4

Clicking on the line number in the left hand margin should create a break point for you (a red circle should appear).

All loaded scripts should be available from the firebug menu - click where it says the name of the current file should show a drop down with all files listed.

View more solutions