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

Question

这个答案https://stackoverflow.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)。我不知道其他浏览器的表现如何。

Answer 1

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

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

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

更新

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

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

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

瞧，控制台：

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

Answer 2

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