是否可以通过某些调试器（例如WebKit，FireBug或IE8开发人员工具）来调试动态加载的JavaScript？

90

根据我最近的问题，我已经创建了一些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);

顺便说一下，大多数调试器（IE8开发人员工具栏，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>

通过回答，我只是在FireBug中对其进行了测试。结果应显示如下图所示。

替代文字http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJDvTql0m0und-XXPyable/fire-xgw-und-XPG

请查看页面加载后添加的“ dynamicLoadingScript”脚本。

替代文字http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb__d1e96Q-14raSDMJOBsdcV9jsi4B5yCUDqm41Wc3hbug。

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

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

替代文字http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1q0JpngE4To4Qoiw/Debugger-VS2010。

替代文字http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfs​​lSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNVQc1Acl-UXXbHFE/Debugger-GoogleChrome

上面的两个图片都显示了插入“调试器”；脚本的某些行中的语句可能会触发动态加载脚本中的断点。但是，两个调试器都不会在断点处显示任何代码。因此，这样做是没有用的。

谢谢，

javascript  ajax 
— 灵魂大师
source
您是否偶然找到了解决方案？我在这里遇到同样的问题。
— adamJLev 2010年
尝试动态加载一个单独的文件，即在此处查看实现queryj.com/2011/03/11/a-lightweight-script-loader-我发现调试器处理起来要容易得多。
— 詹姆斯·韦斯特盖特
@infinity，签出我的解决方案
— Molecular Man
3
2014年，您的图片仍然无效-您可以重新制作它们吗？
— TheGeekZn 2014年
我有一个类似的问题，但由于图像损坏而无法分辨。你能更新他们吗？
— 埃里克

Answers:

117

同样也可以使用铬。Chrome具有一项功能，您可以指定解析器属性并使动态JS片段显示为文件，然后可以浏览至该文件并设置断点。

需要设置的属性是 

//# sourceURL=dynamicScript.js

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

更多信息在这里

保罗·爱尔兰（Paul Irish）在关于工具和Webapp开发堆栈的精彩演讲中也简短地谈到了这一点。

— 冰cu的
source
5
如果有人遇到MVC3 / Razor的问题，请记住不要使用@符号，所以类似// @@ sourceURL = dynamicscript.js之类的东西。
— parsh 2013年
1
您也可以将此功能用于动态内联JavaScript。但是，如果该脚本中有一些例外，您将不会在源列表中看到它。
— 罗曼·斯尼科
4
请注意，新语法是“ //＃sourceURL = dynamicScript.js”，从@更改为＃
— Cekk
3
更新链接到Chrome开发者工具部分的源地图是- developer.chrome.com/devtools/docs/...
— chrismarx
3
对我而言，该js文件显示在名为“（无域）”的组中的源列表中。可能值得一提，因为我一开始就很想念它！
— JMac
21

尝试添加“调试器”；您要动态添加的javascript中的语句。无论断点设置如何，这都将导致它在该行停止。

— 乔里·塞布雷希茨（Joeri Sebrechts）
source
我所能找到的就是：code.google.com/p/fbug/issues/detail?id=1259。顺便说一句，我使用添加到头部的脚本标签来动态加载脚本（但使用src属性），并且这种方式添加的代码对于所有浏览器都是可调试的，即使它没有与初始页面一起加载也是如此。
— Joeri Sebrechts，2009年
您用来添加脚本标签的确切代码是什么？我遇到了与OP相同的问题，这使得无法在Chrome中调试动态加载的JS文件。谢谢！
— adamJLev 2010年
var loaderNode = document.createElement（“ script”）; loaderNode.setAttribute（“ type”，“ text / javascript”）; loaderNode.setAttribute（“ src”，url）; document.getElementsByTagName（“ head”）[0] .appendChild（loaderNode）;
— Joeri Sebrechts
18

是的，（现在）可以使用Google Chrome调试动态加载的JavaScript！

无需debugger;为动态加载的JS文件添加额外或任何其他属性。只需按照以下步骤进行调试：

方法1：

我的技术主管刚刚展示了一种调试动态加载的Javascript方法的超级简便方法。

  1. 打开chrome控制台，输入方法名称，然后按Enter。
    就我而言，GetAdvancedSearchConditonRowNew
    如果已加载JS方法，则它将显示该方法的定义。

在此处输入图片说明

  1. 单击方法的定义，将打开整个JS文件进行调试:)

在此处输入图片说明

方法2：

例如，当我使用ajaxcall 单击按钮时，我正在加载JS文件 。

  1. network谷歌浏览器开发工具中的打开标签
  2. 单击控件（例如按钮），该控件会加载一些javascript文件并调用某些javascript函数。
  3. 观察网络标签并查找该JS函数（以我为例RetrieveAllTags?_=1451974716935）
  4. 将鼠标悬停在其上initiater，您会找到动态加载的JS文件（带有前缀VM*）。

调试chrome -1中的动态加载JavaScript

  1. 单击该VM*文件以打开。
  2. 将调试器放在该文件中的任何位置：D

调试chrome -1中的动态加载JavaScript

— 古拉夫
source
令Google感到羞耻，使它变得如此晦涩。1 /耻辱=荣誉（耻辱的
— 反面
16

我正在为此目的使用谷歌浏览器。

在chrome at scripts标签中，您可以启用“在所有例外情况下暂停”

在此处输入图片说明

然后放在代码行中的某个位置try{throw ''} catch(e){}。Chrome到达此行时将停止执行。

编辑：修改的图像，以便它会更清楚我在说什么。

— 分子人
source
为了在Google Chrome中进行开发，当我向jQuery团队报告过的jQuery或其他任何加载脚本向DOM追加脚本时，您应该插入一些文本来指示当前动态脚本的名称。但是我没有时间去做。 bugs.jquery.com/ticket/8292
— Soul_Master
@Soul_Master，但是使用我的方法，您无需插入文本。您在动态脚本行中插入，try{throw ''} catch(e){}然后启用“在所有例外情况下暂停”模式，当抛出异常时，chrome将停止执行。我已经检查了很多次。我加载了另一张图片。清楚的是我在说什么。
— Molecular Man
在chrome中，可以在打开调试器面板时使用“ debugger;”语句在一条语句处中断。如果关闭调试器面板，Chrome只会忽略此设置。
— dinesh ygv 2014年
@dineshygv，您可以...现在。但是您不能在3年前。debugger当时无法在动态创建的脚本中使用。
— Molecular Man
10

我认为您可能需要为评估代码指定一个“名称”，如下所示：

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

如果您这样做，我认为debugger“更新2”中的方法很可能会起作用。

— 凯尔·辛普森（Kyle Simpson）
source
是。我看到了。我已经将这个错误报告给jQuery团队很长时间了。bugs.jquery.com/ticket/8292
— Soul_Master
1
警告！所描述的技术会在IE7中导致错误，因此请不要将其//@ sourceURL=blah投入生产。
— Jethro Larson
这可能debugger是导致问题的部分，而不是源注释（肯定会被JS忽略）
— Kyle Simpson
这可能会导致条件编译问题。例如：javascriptkit.com/javatutors/conditionalcompile.shtml
— Jethro Larson，
5

UPDATE：sourceUrl的语法已更改（@替换为＃），以避免在不受支持的浏览器（读取：IE）上出错。细节

— DJ_HOEK
source
2

将Chrome（12.0.742.112）与您提供的代码一起使用，以及类似的调试器语句

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

chrome_debugger

为我工作。

在执行它之前，我需要修改一些JavaScript（将所有jQuery选择器的范围限制为当前的局部> view div）。

如果将选择器更改绑定到局部视图上的事件，而不是在html主体中创建脚本元素（感觉并不正确），则它可能更明显。

你可以做这样的事情

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then go on with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

鉴于HTML不会弄乱，此代码将始终在鼠标位于某个元素中时向所有jQuery选择操作添加一个限制选择器。

（仍然看起来有点骇人听闻，可能是有人有更好的解决方案）

干杯

— 里查德
source
1

在Firebug中，您应该能够在加载页面和注入脚本之后看到该脚本。完成后，可以在适当的位置设置断点，刷新页面时将保留该断点。

— 莫西·莱特文
source
你是对的。那不行 我使用eval（）进行了尝试，Firebug允许您在使用断点时设置断点。您是否有理由不能使用eval（）并需要设置脚本标签？甚至更一般地说，您是否有理由不能在服务器上将此动态javascript作为单独的.js文件提供？您想解决什么问题？
— Moishe Lettvin
在执行它之前，我需要修改一些JavaScript（将所有jQuery选择器的范围限制为当前的局部视图div）。或者您有解决我最近问题的任何想法。有关更多信息，请查看我最近的问题。
— Soul_Master
1

动态加载的Javascript仍必须由浏览器来解析，这是WebKit或FireBug调试器所在的位置，因此无论如何它都受调试器的约束，我认为这对于IE8中的开发人员工具是相同的，

因此，您的代码受调试器的约束，因此如果没有错误，则在该文件或文本中不会出现问题的位置

另一件事是script.text = "alert('Test!');";无效的，因此它不能在所有浏览器中正常工作script.innerHTML = "alert('Test!');";

即使它的innerHTML意味着HTML标记中的代码，而不是大多数人使用的HTML标记中的HTML，因此它被解释为错误

编辑两次更新

在使用Chrome进行第二次更新时，我这样做了

转到关于：空白打开控制台并进入 

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

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

然后它将断开并打开脚本选项卡，并显示about：blank（什么都看不到）

然后在右侧显示呼叫堆栈列表，然后单击第二个（匿名函数），它将显示您。

因此，在文件上，您将具有一个（匿名函数）正在运行的代码，并且您会在其中看到断点。所以你知道你是对的。

— Barkermn01
source
0

使用Google Chrome（或Safari）开发人员工具，您可以逐行运行JavaScript。

开发人员工具>脚本>选择要>在右侧调试暂停符号的脚本，或通过单击行号设置断点

— 德里克·朕会功夫
source
0

我喜欢使用一个选项，在我的代码中添加console.log（''）语句。一旦该语句出现在控制台中，就会与它关联一个行号。您可以单击该数字以转到源中的位置并设置断点。这种方法的缺点是断点不会在页面重新加载之间保留，并且您必须先遍历代码，然后才能添加调试器。

— 冰丹特
source
0

对于当前的Google Chrome浏览器或其他现代浏览器，您可以使用开发者工具轻松搜索任何经过评估的代码，如下图所示。

  1. 模拟一些动态加载文件。

在此处输入图片说明

  1. 在源选项卡中按Ctrl + Shift + F并搜索以上功能。

在此处输入图片说明

创建一些断点并执行功能对其进行测试。

在此处输入图片说明

— 灵魂大师
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.