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

for me it happened on nodejs project.

i restarted server and open in new tab my app and tada!..

Answer 2

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 3

Alternatively, to fix this problem you can open developer tool in a seprate window by clicking the icon. Now reload your script, and it will shown in script tab as expected. I know this is not a solution but a work arround.

Answer 4

You can use //@ sourceURL. Chrome doesn't seem to be supporting //@ sourceURL for inline scripts. However, it does work on eval expressions. This article gives more details about naming eval blocks and naming of any anonymous functions in your code.

Instead of using eval, you can try embedding a script tag or JSONP may be.

Varunkumar Nagarajan

Answer 5

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.