可以通过WebKit,FireBug或IE8 Developer Tool等调试器来调试动态加载JavaScript吗？

Question

可以通过WebKit,FireBug或IE8 Developer Tool等调试器来调试动态加载JavaScript吗？

从我最近的问题,我已经创建了一些用于动态加载局部视图的JavaScript函数.所以,我无法调试任何动态加载JavaScript.因为所有加载的JavaScript都将通过"eval"函数进行评估.

但是,我找到了一些方法来创建新的JavaScript,使用以下脚本动态创建脚本到当前文档的标题.所有加载的脚本都将显示在HTML DOM中(您可以使用任何调试器来查找它).

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

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

Run Code Online (Sandbox Code Playgroud)

顺便说一下,大多数调试器(IE8 Developer Toolbar,Firebug和Google Chrome)都无法在任何动态脚本中设置断点.因为必须在加载页面后第一次加载可调试脚本.

您是否有动态脚本内容或文件调试的想法？

更新1 - 添加测试源代码

您可以使用以下xhtml文件来尝试调试someVariable值.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

Run Code Online (Sandbox Code Playgroud)

从答案来看,我只是在FireBug中测试它.结果应显示如下图像.

alt text http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJDvTql0m0ugSGXPaY-/undebugable-firebug-html.PNG

请查看页面加载后添加的"dynamicLoadingScript"脚本.

alt text http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5yCUDqm41Wc3h0yk/undebugable-firebug-script.PNG

但是在FireBug的脚本选项卡中找不到它

更新2 - 在动态加载脚本中创建调试断点

alt text http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1q0JWAETo4Qoiw/Debugger-VS2010.png

alt text http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNVQc1Acl-UXXbHFE/Debugger-GoogleChrome.png

上面两张图都显示插入"调试器"; 某些脚本行中的语句可以在动态加载脚本中触发断点.但是,两个调试器都不会在断点处显示任何代码.因此,这样做是没用的.

谢谢,

Answer 1

ice*_*bed 116

也可以使用铬.Chrome有一项功能,您可以在其中指定解析器属性,并使动态JS显示为一个文件,然后可以浏览并设置断点.

需要设置的属性是

//# sourceURL=dynamicScript.js

Run Code Online (Sandbox Code Playgroud)

其中dynamicScript.js是应该在脚本文件浏览器中显示的文件的名称.

更多信息在这里

Paul Irish还在他关于Tooling和Webapp Development Stack的精彩演讲中简要介绍了它

如果有人遇到MVC3/Razor的问题,请记住逃避@符号,所以像// @@ sourceURL = dynamicscript.js这样的东西,只有fyi,上面的内容也适用于firebug. (5认同)
请注意,新语法是"//#sourceURL = dynamicScript.js"从@更改为# (4认同)
源地图上Chrome开发者工具部分的更新链接是 - https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript (3认同)
对我来说,js文件显示在名为"(无域名)"的组中的源列表中.可能值得一提,因为我一开始就错过了它! (3认同)