Chrome JavaScript 调试 - 如何在页面刷新或通过代码中断之间保存断点？

你可以放一个

debugger;

打破大多数 JavaScript 环境。他们肯定会坚持下去。如果您使用的是生产环境中的调试器和 console.log 调用，那么最好有一个缩小器。

在最新版本的 Chrome 浏览器中，控制台面板顶部的过滤器旁边有一个“保留日志”选项。在旧版本中，右键单击空白控制台窗口将显示该选项（“在导航时保留日志”）。当您没有 console.log 语句或硬编码的调试器调用时，它很方便。

更新：我在 github 上找到了一个名为 chimney 的工具，它获取一个文件并删除所有 console.log 调用。它提供了一个关于如何删除调试器调用的好主意。

---

设置断点，切换到“网络”选项卡并选择“导航时保留日志”切换按钮。现在，刷新时断点应该在那里。

或者 JavaScript 的方式是使用

debugger;

---

此外，您是否使用 an attached query parameter to the URL with the current Epoch time 将 JavaScript 文件从服务器发送到客户端？这用于防止缓存 JavaScript 文件。

在这种情况下，Chrome 开发人员工具似乎在刷新后将文件解释为不同的文件，这将（正确地）删除断点。

对我来说，删除查询参数使 CDT 在刷新后保留断点。

---

这可能发生在您从其他脚本动态加载或评估的脚本上？我可以为自己说，这种情况真的让我很恼火，直到我发现了 sourceURL 属性。在您要调试的脚本的最后一行放置以下特殊格式的注释会将其“锚定”在 Chrome 中，因此它有一个参考框架：

//# sourceURL=文件名.js

您手动放置的断点现在将在页面加载之间持续存在！该约定实际上起源于 sourcemap 规范，但 Chrome 至少将其视为一种独立的技术。这是一个reference。

---

您可以在源代码中使用 debugger; 语句使调试器在此处中断。

---

对于使用 ExtJs 6.x 的人：您可以在页面的 URL 中添加“cache”或“disableCacheBuster”查询参数，而不是 Ext.Loader 中的 disableCaching。这将从文件中删除“_dc”参数并启用 chrome 调试器以保留断点。

请参阅应用程序中的 bootstrap.js（配置参数 disableCaching）。

---

Chrome 开发者工具的行为应该符合您的预期，但您可以将 debugger; 语句放入您的（开发！）代码中以暂停执行。

---

可以放调试器；在要开始调试的代码之前。一旦页面开始加载，它将在调试器处停止；陈述。然后您可以根据您的要求轻松应用调试点。

---

正如@jtrick 所说，使用评论：

//# sourceURL=filename.js

这是在页面刷新之间以及在 chorme 关闭和重新打开之间获得断点持久性的最佳方法，即使在版本化（控制浏览器缓存）或动态包含的 javascript/css 文件中也是如此。

这是更新的 reference 链接：

虽然不是 Source Map 规范的一部分，但 @sourceURL 允许您在使用 eval 时更轻松地进行开发。这个帮助器看起来非常类似于 //# sourceMappingURL 属性，实际上在 Source Map V3 规范中提到。通过在您的代码中包含以下将被评估的特殊注释，您可以命名 eval 和内联脚本和样式，以便它们在您的 DevTools 中显示为更合乎逻辑的名称。 //# sourceURL=source.coffee

如果您为浏览器提供的版本化文件有服务器端缓存，则可以在生成缓存时在源代码中附加注释，而无需修改原始源文件。

注意：您还可以在评论中指定文件的虚拟路径，这样您就可以在 chrome devtools 中显示的树上组织动态加载或版本化的内容 > ; navigator panel > sources > page 树视图。 IE：

//# sourceURL=https://yourdomain.com/libs/ui/widget.js

---