Can't see dynamically loaded code in Chrome Developer Tools 22

Question

When I dynamically load a snippet of html containing javascript via AJAX, I cannot see that content in the source tab in the developer tools window in Chrome 22.0.1229.94. Tellingly, I went here

https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#js_dynamic

This page shows an example developer tools window which is out of date. There is a button on the page to load a dynamic script and it does not show up in the source tab when you do.

As a work-around, I have found that adding

debugger; 

to the script and reloading it will cause it to pause in the dynamically loaded code, but unfortunately, all the line numbers are greyed out and you can't set any breakpoints within the debugger.

Am I missing something here or what?

Thanks, Rob

Answer 1

When you use a library or javascript code that you have loaded it dynamically, you can use the phrase

//@ sourceURL=foo.js 

at the beginning of your javascript code that foo.js is the name that will be assigned it. debugger will show it with that name. This is true in chrome, and I think in firebug too. In this case you can place a breakpoint in the dynamically loaded javascript code.

Answer 2

Possible duplicate of: Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?

Don't know if this works or not in chrome (This definitely doesn't work for me now, may be in the past).

//@ sourceURL=foo.js 

Working Solution

For your dynamically loaded script via ajax to appear in your chrome source tool, you need to add the following line at the start or end (I prefer) location of your script file:

//# sourceURL=foo.js 

And your script with name foo.js will appear at the left pane of source tab under (no domain) dropdown

->localhost -- source/src

->(no domain) -- foo.js

Alternatively you can add the below line in your script anywhere between the scripts.

debugger; 

In chrome, you can use " debugger; " statement to break at a statement when debugger panel is open. Chrome will simply ignore this if the debugger panel is closed.

This will help stop your script in debugging mode and you will see your script in source (debugging) panel with name like VM****.

Hope this helps.