11

For example, I have an ajax request and it returns <script src='buggy.js'></script>.

Problem is, it doesn't show up in sources or resources panel. That means I can't do all the cool stuffs like adding breakpoint and inspecting the elements as they run.

I could only see the source of the js file under the Network panel.

Is there anyway to make chrome add them to the sources panel?
Or how do you guys go about debugging dynamically added scripts?

Using Canary.

resting
  • 16,287
  • 16
  • 59
  • 90
  • guess I found a workaround http://stackoverflow.com/questions/9092125/how-to-debug-dynamically-loaded-javascriptwith-jquery-in-the-browsers-debugge – resting Dec 21 '12 at 07:10
  • So how exactly is your script loaded? If you manually insert a script tag with src attribute into DOM then it should appear in the sources panel. If the script is added by means of eval or even if you insert it into DOM using some javascript framework (e.g. jQuery) then you might need to provide sourceURL to make it work. – vsevik Jul 31 '13 at 09:31

3 Answers3

3

I was having the same problem, and I found a workaround that is better than the deliberate exception. It does still require changing the code as opposed to just setting a breakpoint inside the chrome dev tools.

I tried using the "//# sourceURL=dynamicScript.js" that was suggested as a workaround by the OP, but it still wasn't showing up for me unless it already existed in my tabs from a previous time when it produced an exception.

Coding a "debugger;" line forced it to break at that location. Then once it was in my tabs in the Sources panel, I could set breakpoints like normal and remove the "debugger;" line.

kevinpo
  • 1,853
  • 19
  • 20
1

Please refer to https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript

(Original link is broken-- archived link below)

http://web.archive.org/web/20141016164821/https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript ("Breakpoints in Dynamic JavaScript").

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
Alexander Pavlov
  • 31,598
  • 5
  • 67
  • 93
  • That doesn't really work, if the script in question doesn't even appear in the sources tab. – Jeff Evans Jul 24 '13 at 02:29
  • I guess it doesn't get loaded then? Can you see it in the Network panel? – Alexander Pavlov Jul 24 '13 at 07:20
  • Yeah, in my particular case it does show up in the network panel. Also, if I "Break on exceptions" and one is thrown by some of the dynamic code, the debugger does break and the snippet shows up in a new tab that looks like something from the screenshot [here](http://stackoverflow.com/questions/17367560/chrome-development-tool-vm-file-from-javascript). In that tab, full debugging seems available (variables, stepping, etc.). So I can sort of hack around it by introducing a deliberate exception and breaking on it, which is suboptimal for a number of reasons. This is on Chrome 28.0.1500.71. – Jeff Evans Jul 24 '13 at 13:21
  • I'm having the same issue on Chrome 30.0.1599.66. –  Oct 02 '13 at 03:24
  • 1
    Broken link. SO prefers that answers can stand on their own rather than refer to outside sources for this reason. – Splaktar Aug 19 '14 at 19:41
  • @kevinpo's answer covers most of this now. I think the current link would be https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript – Splaktar Aug 19 '14 at 19:54
  • Yup, this actually works. However, it looks like you have to place the //# sourceURL line at the end of the file, as indicated at the link. I tried placing it at the top, it didn't work properly. – pax162 Oct 11 '14 at 06:52
0

This techniques works for me, what about you?

A) Add this line to the end of your JS file that you load it dynamically. Then you can find it in the Navigator side panel of Source Tab in DevTools in Chrome inside a directory named with your loaded page:

//# sourceURL=dynamicScript.js

Note: you can change dynamicScript.js name with your real file name. enter image description here

B) Add debugger; to the line which you need a breakpoint there:

enter image description here

Ramin Bateni
  • 16,499
  • 9
  • 69
  • 98