27

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

Rob
  • 379
  • 1
  • 6
  • 12
  • Possible duplicate of [Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?](http://stackoverflow.com/questions/1705952/is-possible-to-debug-dynamic-loading-javascript-by-some-debugger-like-webkit-fi) – GorvGoyl Jan 12 '16 at 07:26

5 Answers5

29

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.

Farshid Saberi
  • 917
  • 13
  • 15
  • Ufortunately I run into the same problem. However I'm loading these files form Yahoo CDN (they are module dependencies). In Firefox (23.0.1) in Firebug (1.12.0) these files are visible in Script tab. In Chrome (29.0.1547.62 m) they are only accessible in Resources and Network tab. I need to set breakpoints there and I can't ... – op1ekun Sep 02 '13 at 14:18
  • I propose that you load it using a library that is implemented for this purpose. for example using require.js. Or you can load them by a method like the one that has been used in require.js. – Farshid Saberi Nov 03 '13 at 18:51
  • YUI (which I'm using) has it's own way of loading modules. It's similar to require.js. At the end you end up with dynamically created – op1ekun Nov 03 '13 at 19:08
  • It is a little stranger. How does it appear when you inspect it with an inspector like firebug, in its net tab. Is it categorized a XHR or JS. YUI should load it as a javascript file using – Farshid Saberi Nov 03 '13 at 20:21
  • IT WORKS IN FIREFOX and it's JS as it should be ... However it doesn't appear in Sources tab in Chrome. Of course I'm using HTML5, but it has nothing to do with that... It's a script tag which is being loaded asynchronously. Nothing special about it. Nevertheless thank you for your input :) It might be a YUI problem (which wouldn't be suprising :P). Don't bother... – op1ekun Nov 03 '13 at 20:44
  • Excellent, this is gold – mike nelson May 05 '15 at 10:49
  • Don't know about `//@ sourceURL=foo.js` but `//# sourceURL=foo.js` works in Chrome – Daryl Jul 22 '15 at 19:55
  • //@ sourceURL=foo.js doesnot work for me in chrome. //# sourceURL=foo.js works for me. Alternatively you can add this line debugger; in your script and it will halt while you run your script making it appear in the script tab in vm***.js file. – Sanjay Sep 01 '15 at 09:12
  • Neither //@ sourceURL=foo.js nor //# sourceURL=foo.js is working for me in Chrome dev tools. – emirhosseini Nov 08 '17 at 15:37
12

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

enter image description here

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.

Community
  • 1
  • 1
Sanjay
  • 1,595
  • 1
  • 17
  • 29
  • Both options are working for me in CR-45 & OSX-Y ---> `//@ sourceURL=foo.js` and `//# sourceURL=foo.js` with the same expected result. Thank's (maybe will be better to use the `#` as is documented.) – gmo Sep 16 '15 at 16:27
  • Great help! Putting //# sourceURL=foo.js before end of the tag did the work! – Pramod Sharma Apr 04 '16 at 10:29
5

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

Varunkumar Nagarajan
  • 1,807
  • 1
  • 24
  • 43
0

for me it happened on nodejs project.

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

moshiah_now
  • 109
  • 1
  • 7
-5

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. enter image description here

Sudarshan Tanwar
  • 3,537
  • 3
  • 24
  • 39
  • 1
    I downvote your answer because as much as I read OP question and your answer, I can't find how this could solve the problem. – gmo Sep 18 '15 at 08:16