Soul_Master Soul_Master - 2 months ago 6x
Ajax Question

Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?

From my recent question, I already created some JavaScript function for dynamic loading partial view. So, I can't debug any dynamic loading JavaScript. Because all of loaded JavaScript will be evaluated by "eval" function.

However, I found some way to create new JavaScript by using the following script to dynamically create script into header of current document. All loaded scripts will be displayed in HTML DOM (that you can use any debugger to find it).

var script = document.createElement('script')
script.text = "alert('Test!');";


By the way, most debugger (IE8 Developer Toolbar, Firebug and Google Chrome) can’t set breakpoint in any dynamic script. Because debuggable script must be loaded at the first time after page is loaded.

Do you have idea for debugging in dynamic script content or file?

Update 1 - Add sourcecode for testing

You can use the following xhtml file for trying to debug someVariable value.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<title>Dynamic Loading Script Testing</title>
<script type="text/javascript">
function page_load()
var script = document.createElement('script')
script.setAttribute("id", "dynamicLoadingScript");
script.text = "var someVariable = 0;\n" +
"someVariable = window.outerWidth;\n" +

<body onload="page_load();">

From answer, I just test it in FireBug. The result should be displayed like below images.

alt text

Please look at "dynamicLoadingScript" script that is added after page load.

alt text

But it does not found in script tab of FireBug

Update 2 - Create Debug Breakpoint in dynamic loading script

alt text

alt text

Both of the above images show inserting "debugger;" statement in some line of script can fire breakpoint in dynamic loading script. However, both debuggers do not show any code at breakpoint. Therefore, it is useless for doing this.



It would also be possible to use chrome for the same. Chrome has a feature where you can specify a parser attribute and make the piece of dynamic JS appear as a file which can then be browsed to and break points set.

the attribute that needs to be set is

//# sourceURL=dynamicScript.js

where dynamicScript.js is the name of the file that should show up in the script file browser.

More information here

Paul Irish also talks about it briefly in his excellent talk on Tooling & The Webapp Development Stack