Skip to content

How to debug dynamic Javascript’s in Chrome

If your app is loading HTML with Javascript in there using AJAX these dynamic scripts will not show up in Chrome script-debugger (nor Firefox). They show up in IE 11 and Edge but without name.

To be able to debug them you can name these scripts using a comment on the end of the script block:

//# sourceURL=PersonMassUpdateTab.js

Place this //# sourceURL=....js code just before the closing script tag.

After loading this content you’ll see the dynamic script in Chrome’s debugger like this:

dynamic_scripts_in_chrome

Edge will show it too with name but IE doesn’t:

dynamic_scripts_in_edge

2 thoughts on “How to debug dynamic Javascript’s in Chrome Leave a comment

  1. I’m using chrome version 74.0.3729.131 but where you show a (no domain) tab all I have is (top). I can see the script explicitly placed in the page with the script tag but none or the dynamically loaded script. It is running the script but I can’t debug.
    Thanks for your help
    jbranson22042@gmail.com

    Like

  2. Thank you for you contribution, more beyond about this, I have another question, maybe you have had the same doubt:

    When I do a ajax call to get content from the server and put in the user page and this content as well as has html also has javascript. When I call another ajax call and this new call replace the last one content with out problem, but what happens whit the javascript source loaded before?, why it was not deleted? or how to delete it?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s