动态脚本加载到同一页面后如何调试非动态脚本

Posted 2023-02-19

【中文标题】动态脚本加载到同一页面后如何调试非动态脚本

【英文标题】：How to debug non-dynamic script after dynamic script loads on the same page

【发布时间】：2015-01-17 07:06:43

【问题描述】：

这个答案https://***.com/a/10929430/749227 对于这个问题Is possible to debug dynamic loading javascript by some debugger like WebKit, FireBug or IE8 Developer Tool? 是用于调试动态脚本的。

我面临的问题是我有一个页面，上面有一个脚本，并且在它加载一个 ajax 请求后，它会返回一些 html 和一个放入页面的脚本。添加//# sourceURL=myDynamicDocumentFragment.html 位后，我可以很好地调试动态脚本了。

但是一旦它被加载，最初加载的外部页面的一部分的另一个脚本就会脱轨。我可以在空行上设置断点，但不能在合法行上设置断点。调试器将停止它们，但它不会出现在我期望的代码中。

似乎是开发工具窗口正在显示原始脚本，而调试器本身正在运行其他东西 - 一些更新版本的代码，其中包括外部页面的脚本和稍后添加的动态脚本.或者它只是在显示的行号以及实际运行的代码中映射到什么方面出现问题。

我希望我有一个很好的简单代码 sn-p 来演示这个问题，但我没有。有没有人看过这个，有没有人知道一种让 Chrome '刷新' 开发工具脚本/调试器而不刷新页面的方法？ （它必须不刷新页面，因为页面加载时一切正常 - 只有在动态脚本被放入后***才会脱落）

注意：我使用 Chrome 进行了标记，因为这就是我正在使用的 (v 38)。我不知道其他浏览器的表现如何。

【问题讨论】：

您是否尝试不从 devtools 源代码面板设置断点，而是将 debugger; 语句直接插入您的代码中？

@GlenSwift hm - 这可能有效。这是一个非常不方便的工作流程。我很想看看它脱轨的根本原因是什么 - 治疗原因而不是创可贴症状或解决问题而不是解决它：S 这可能确实比不存在更好不过可以做任何事情 - 感谢您的建议。

在你的脚本中使用console.log。

是的，我经常使用console.log。我想知道的是如何让 Chrome 调试器不丢失它的弹珠:)

我知道这个问题，看起来这是 Chrome 调试器的问题。前段时间我曾经使用 Firefox 和 Firebug，但我不记得那里是否有效。如果可能的话，最简单的解决方案是将脚本移动到单独的文件中。

【参考方案1】：

您可以找到注入到 head 或评估的脚本，这是在 youtube 评估（另一个 js 文件）上添加的断点。

你也可以在 chrome 中找到它，添加 console.log（点击显示的消息），瞧你有源代码，你可以添加断点。

这里 mozila 在 utube 页面上打印调试/断点评估脚本：

更新

抱歉，我知道 chrome 超出了范围，我的英语 :)

我是如何通过注入脚本在 chrome 上进行调试的，但在某些情况下，如果脚本处于活动状态（页面加载加上几毫秒），您无法附加到执行，您需要寻找解决方法。 在注入脚本的开头添加了这个：

//@ sourceURL=jseinjectedsource.js
console.log("evaluated");

瞧，控制台：

这样检查比我的解释更好chrome developer

【讨论】：

我一直很忙，还没有在 Firefox 中尝试过这个项目，还没有看到它是怎么做的。请注意，该问题专门针对上述情况下的 Chrome 调试器。

【参考方案2】：

检查您的脚本是否使用了源映射（如果您使用的是 TypeScript，这通常是 VS 项目的默认设置）。 我发现 Chrome 对源映射非常糟糕，经常拒绝更新它们，或者在从代码中删除源映射行后停止显示它们。

【讨论】：

是的 - 源地图正是我正在使用的。我意识到我已经遗漏了部分示例代码并编辑了问题以添加它。我真正想要的是如何让它们工作:) 知道其他人有同样的问题确实让我思考它可能只是一个 Chrome 错误。如果是这样，希望他们尽快修复它。

几年前我遇到这个问题时没有找到解决方案，而是决定关闭源地图，所以我没有可行的解决方案，但如果你是很高兴尝试我可以向你提出想法。

第一个是运行带有--nolazy命令行标志的chrome（您必须选择所有打开的chrome窗口才能生效）。它会阻止 v8 编译您的代码，问题可能是编译代码吐出的行号没有被源映射转换。

此处的说明（查找 v8 标志）：chromium.org/developers/how-tos/run-chromium-with-flags

而且，这里有一些相关的 chrome 错误：code.google.com/p/chromium/issues/detail?id=451015code.google.com/p/v8/issues/detail?id=2838