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. Tell

Answer 1

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.