如何调试外部评估脚本

Question

具体的例子：haystack.js从剧本你有多大的草堆？

我已经搜索了答案，一切似乎都指向使用//# sourceURL=name.js评论。然而，如何实现这一点的机制让我望而却步（也许我只是很密集）。

每个人总是指向Debugging JavaScript，但演示坏了（同源错误）。其他常见示例不提供使用此类外部脚本的洞察力。

我已经尝试使用 Live Edit 插入 sourceURL 注释，但到目前为止 eval 脚本从未出现在 Sources 选项卡中。

有人可以指导我完成此任务的步骤吗？

更新：这已被证明是一项有趣而烦人的努力。这个特定的站点使任务变得不必要地困难，并具有以下复杂性：

• haystack.js 脚本包括document.write()语句（加载使用的其他脚本）。这些必须在重新加载脚本之前删除，否则 DOM 将被清除。

• 作者在代码上使用了一种奇怪的反引号密码形式。因此，代码修改（包括sourceURL）必须在消除混淆之后，但在 eval 发生之前进行。

我提出了一个部分解决方案。将 jQuery 加载到页面后，我运行此脚本：

$.ajax({
  url: '/js/haystack.js',
  dataType: 'text'
}).done(function(data) {
    // Remove document.write() statements and append sourceURL comment after obfuscation is removed
    var refactored = data.replace(/return d/, "return d.replace(/document\.write[^;]+;/g, '') + '\\n//# sourceURL=haystack.js\\n';");
    $('head').append('<script type="text/javascript">' + refactored + '</script>');
});

现在 haystack.js 出现在 Sources 选项卡的（无域）树中。可以设置断点，但有一些奇怪的行为。似乎 DOM 事件处理程序仍然绑定到原始脚本（永远不会到达重新加载的脚本处理程序中的断点）。再次执行 pageInit() 会将处理程序重新绑定到修改后的脚本，但页面更新仍然不稳定。不知道为什么这种行为仍然存在。我可以单步执行代码，那里一切正常，但页面更新似乎滞后于代码。代码几乎违反了所有 javascript 最佳实践这一事实无疑是一个因素。

Answer 1

这个问题真的让我很感兴趣。希望我的回答有帮助。我从设置断点和调试 eval'd JavaScript 开始，然后稍微扩展一下

这里是plunker

比使用 eval 更好的是，您可以将脚本元素插入到文档中。

var js = "console.log('this is line 1');"
addCode(js); // Right now! Debuggable!

// Dynamically evaluate JavaScript-as-string in the browser
function addCode(js){
  var e = document.createElement('script');
  e.type = 'text/javascript';
  e.src  = 'data:text/javascript;charset=utf-8,'+escape(js);
  document.head.appendChild(e);
}

然后它将显示在源选项卡中：

使用eval还通过增加线上工作//# sourceURL=dynamicScript.js在年底

看到这个plunker

var js = "console.log('this is line 1');\n" +
"//# sourceURL=dynamicScript.js;"
addCode(js); // Right now! Debuggable!

// Dynamically evaluate JavaScript-as-string in the browser
function addCode(js){
  eval(js);
}

请注意，脚本列在（无域）源文件夹下。