Dynamically loaded javascript doesn't show in sources panel?

Question

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.

Coruscate

guess I found a workaround #9092625 – Coruscate

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. – Intact

Answer 1

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.

Sterilize

It may also show up in the (no domain) listing under the Sources tab. – Passifloraceous

Answer 2

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").

Jaimiejain

That doesn't really work, if the script in question doesn't even appear in the sources tab. – Eremite

I guess it doesn't get loaded then? Can you see it in the Network panel? – Jaimiejain

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. 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. – Eremite

I'm having the same issue on Chrome 30.0.1599.66. – D

Broken link. SO prefers that answers can stand on their own rather than refer to outside sources for this reason. – Passifloraceous

@kevinpo's answer covers most of this now. I think the current link would be developer.chrome.com/devtools/docs/… – Passifloraceous

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. – Flood

Answer 3

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.

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

Midbrain