views:

487

answers:

2

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.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {  
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

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.

Thanks,

A: 

In Firebug, you should be able to see that script after the page is loaded and the script is injected. When you do, you can set a breakpoint in the appropriate place, and it'll be preserved when you refresh the page.

Moishe
Please look at my updated question.
Soul_Master
You're right. That doesn't work.I tried it with eval() and Firebug will let you set a breakpoint when you use that. Is there a reason you can't use eval() and need to set a script tag?Even more generally, is there a reason you can't serve this dynamic javascript as a separate .js file on your server? What problem are you trying to solve?
Moishe
I need to modify some JavaScript (limiting scope of all jQuery selector to current partial view div) before execute it. Or you have any idea for solving my recent question. For more information please look at my recent question.
Soul_Master
A: 

Try adding a "debugger;" statement in the javascript you're adding dynamically. This should cause it to halt at that line regardless of breakpoint settings.

Joeri Sebrechts
Please look at my update No.2 on my question.
Soul_Master
All I can find is this: http://code.google.com/p/fbug/issues/detail?id=1259 . By the way, I use script tag appending to the head to dynamically load scripts (but using a src attribute), and the code added this way is debuggable for me on all browsers, even if it's not loaded together with the initial page.
Joeri Sebrechts
What's the exact code you're using to add the script tag? I'm having the same issue as the OP, which is making it impossible to debug dynamically loaded JS files in Chrome. Thx!
Infinity
var loaderNode = document.createElement("script");loaderNode.setAttribute("type", "text/javascript");loaderNode.setAttribute("src", url);document.getElementsByTagName("head")[0].appendChild(loaderNode);
Joeri Sebrechts