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

这个答案 对于这个问题，调试动态脚本非常重要

我面临的问题是，我有一个页面，上面有一个脚本，在它加载一个ajax请求后，该请求将触发，并返回一些HTML和一个脚本，这些脚本将放入页面中。通过添加

/#sourceURL=myDynamicDocumentFragment.html

位，我可以很好地调试动态脚本

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

看起来，dev tools窗口显示的是原始脚本，而调试器本身运行的是其他东西——一些更新版本的代码，其中包括外部页面的脚本和后来添加的动态脚本。或者，它只是在显示行号以及这些行号在实际运行的代码中的映射方面打嗝

我希望我有一个好的简单代码片段来演示这个问题，但我没有。有人看到过这一点吗？有人知道一种方法可以让Chrome“刷新”开发工具脚本/调试器而不刷新页面吗？（它必须是w/o刷新页面，因为加载页面时一切正常-只有在删除动态脚本后，控制盘才会关闭）

---

注意：我已经用Chrome做了标记，因为我正在使用Chrome（V38）。我不知道其他浏览器的表现如何。

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

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

此处，mozila在utube页面上打印调试/断点超过评估脚本：

更新

对不起，我知道chrome超出了范围，我的英语：）

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

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

瞧，控制台：

---

检查此方法比我的解释更好检查脚本是否使用源映射（如果您使用的是TypeScript，则VS项目的默认设置通常为启用）。

---

我发现Chrome对源代码映射非常糟糕，经常拒绝更新它们，或者在源代码映射行从代码中删除后停止显示它们。

是否尝试设置断点，而不是从devtools源代码面板，而是插入

调试器语句直接插入到代码中？@GlenSwift hm-这可能有效。但这是一个非常不方便的工作流程。我很想知道它背后的根本原因是什么-治疗的原因，而不是创伤性援助的症状或解决问题，而不是围绕它工作：S可能确实比只是不能做任何事情，虽然-谢谢这个建议。使用<代码>控制台。log < /代码>在您的脚本。是的，我经常使用
console.log
。我想知道的是如何让Chrome调试器不丢失它的弹珠：）我知道这个问题，看起来这是Chrome调试器的问题。不久前，我曾使用Firefox和Firebug，但我想不起来这是否适用于Firefox和Firebug。如果可能的话，最简单的解决方案是将脚本移动到单独的文件中。我一直很忙，还没有在Firefox中尝试过这个项目。请注意，这个问题是关于在所描述的情况下Chrome的调试器的。是的，我使用的正是源代码映射。我意识到我遗漏了部分示例代码，并对问题进行了编辑以将其添加进来。我真正想要的是如何让他们工作：）知道其他人也有同样的问题确实让我觉得这可能只是一个Chrome bug。如果是这样的话，希望他们能尽快解决。几年前我遇到这个问题时，并没有找到解决方案，而是决定关闭源代码映射，所以我没有一个可行的解决方案，但如果您愿意尝试，我可以向您提出一些想法。第一个是使用
--nolazy
命令行标志运行chrome（您必须选择所有打开的chrome窗口才能生效）。它会阻止v8编译您的代码，问题可能是编译代码输出的行号不会被源代码映射转换。说明如下（查找v8标志）：下面是一些相关的chrome错误：