如何调试动态加载的 JavaScript 文件？答案

【问题标题】：How to debug JavaScript files which are loaded dynmically?如何调试动态加载的 JavaScript 文件？
【发布时间】：2011-04-15 16:05:54
【问题描述】：

当前，当文档 DOM 准备好时，我正在使用 jQuery.Load() 加载许多脚本文件的 Web 应用程序。但是，如果这些脚本文件有语法错误，那么 Firebug 或 IE Developer Tool 都不能可靠地显示有错误的行或给出一些非常大的行号。

如何调试此类脚本？或者我应该通过脚本标签加载它们，直到我验证它们没有错误？

【问题讨论】：

标签： javascript debugging javascript-debugger

【解决方案1】：

Mozilla 的firebug 插件有一个内置的javascript 调试工具。可以用于上述目的

【讨论】：

这就是我使用的，你只需要设置脚本选项'显示静态、评估和事件脚本'
只是想澄清一下，我在哪里设置该选项？

【解决方案2】：

我在使用 YUI3 时遇到了完全相同的问题。我恢复到包含所需文件的公认不那么酷但更稳定的方法 - YUI3 有一个简洁的工具可以为您提供所有这些脚本标签 - 我不知道它是否与 JQuery 相同。抱歉，这可能没那么有用！

【讨论】：

【解决方案3】：

通过为它们动态添加脚本标签（使用 DOM）来加载它们，这应该可以解决问题：

var newScript;
var loadFunc = function ()
{
    alert("External Javascript File has been loaded");
};
newScript = document.createElement('script');
newScript.setAttribute('type','text/javascript');
newScript.setAttribute('src');
newScript.onreadystatechange = function() //IE triggers this event when the file is loaded
{
    if (newScript.readyState == 'complete' || newScript.readyState == 'loaded')
        loadFunc();
};
newScript.onload = loadFunc;              //Other browsers trigger this one
document.getElementsByTagName('head')[0].appendChild(newScript);

【讨论】：