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

【问题标题】：Chrome JavaScript Debugging - how to save break points between page refresh or break via code?Chrome JavaScript 调试 - 如何在页面刷新或通过代码中断之间保存断点？
【发布时间】：2012-01-04 20:04:52
【问题描述】：

当使用 Chrome 和它的 JavaScript 调试器时，每次我重新加载我的页面/脚本时，我的断点都会丢失，我必须在弹出窗口中找到脚本文件，找到我的断点的代码行，点击添加它等等。

有没有办法保存这些断点，即使在页面刷新后它也会中断（我使用的其他调试器会这样做）？

或者，在我的 JavaScript 代码中是否有一种简洁的方法，我可以输入一些内容来告诉 chrome 开始跟踪（在一行上暂停）？

【问题讨论】：

Chrome 开发者工具应该在刷新之间保留 JS 断点。您是否使用<script> 标签或XMLHttpRequest+eval 来包含您的JS？使用 XHR+eval，您会丢失断点。
+1 在 OSX 上的 Chrome 上每天都会发生几次这种情况。大多数断点运行良好，但有时，当我刷新时断点不会粘住！
如果脚本的 ?querystring 中的某些内容发生更改（例如，cachebuster），您也将丢失断点不确定#hash

标签： javascript debugging google-chrome breakpoints

【解决方案1】：

你可以放一个

debugger;

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

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

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

【讨论】：

在导航时检查保留日志似乎是让 chrome 像以前一样工作的真正门票
对于网络工作者来说，这是一个不错的选择：stackoverflow.com/a/4985794/300011
我忘记了debugger;lol 花了大约半个小时试图弄清楚。
保留日志不起作用。
@Kuronashi 如果您可以找到该选项但它仍然无法正常工作，这意味着该页面每次都会获得不同（和/或不同命名）的文件、js 文件或捆绑包。如果您使用的是框架或 CMS，请确保没有启用缓存破坏开发插件。一些开发配置也可能导致这种情况。

【解决方案2】：

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

或者JavaScript方式是使用

debugger;

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

谢谢！ ExtJS 4 包含一个“_dc”参数以防止文件被缓存并且每次都会清除断点。将Ext.Loader.setConfig({ disableCaching: false, enabled: true }); 添加到应用配置会禁用它。
@BrianTopping 感谢该提示。为什么他们会做这样愚蠢的事情，比如附加动态查询参数来防止缓存。应该控制它的是浏览器（开发工具）/服务器......
@sjogren_me，您是如何在 Chrome 开发工具中删除查询参数的？
你是个英雄。一些弱开发者发送了date('His') 查询字符串，这让我想起了！

【解决方案4】：

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

//# sourceURL=filename.js

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

【讨论】：

这是我需要的。其他答案需要更改库行为（“删除查询参数”）或接受所有现有断点的丢失（“只需添加 debugger;”），这两者都不是我认为 OP 想要的.绝对不是我想要的。我的原因是 js 文件都有时间戳，这让 Chrome 中的 DevTools 感到困惑。感谢@jtrick，因为我相信这是 OP 主要问题的主要答案，“有没有办法保存这些断点？”
帖子上的参考链接已损坏。这是更新的：developer.chrome.com/docs/devtools/javascript/source-maps/…

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

在您的应用程序中查看 bootstrap.js（配置参数 disableCaching）。

【讨论】：

似乎还有其他正式的方式，通过在 app.json 中为 loader.cache 设置值：true, sencha.com/forum/…

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

【讨论】：

这个答案重复了 7 年前的几个。

【解决方案9】：

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

//# sourceURL=filename.js

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

这是更新后的reference 链接：

虽然不是 Source Map 规范的一部分，但 @sourceURL 允许您使用 eval 使开发更容易。这个帮手看起来与 //# sourceMappingURL 属性非常相似，并且是实际上在 Source Map V3 规范中提到过。

通过在您的代码中包含以下特殊注释，这将是 evaled，您可以命名 eval 和内联脚本和样式，以便它们在您的 DevTools 中显示为更具逻辑性的名称。

//# sourceURL=source.coffee

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

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

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

【讨论】：