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

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

有没有一种方法可以保存这些断点，使其即使在刷新页面后仍会中断（我使用过的其他调试器会这样做）？

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

你可以放一个

debugger;

在大多数JavaScript环境中都无法使用。他们肯定会坚持下去。如果您使用的是最小化器，那么它可以消除生产环境的调试器和console.log调用。

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

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

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

或JavaScript的方式是使用

debugger;

另外，您是否将带有附加查询参数的JavaScript文件从服务器发送到客户端，并将查询参数附加到具有当前时间的URL？这用于防止缓存JavaScript文件。

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

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

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

//＃sourceURL = filename.js

现在，您手动设置的断点将在页面加载之间保持不变！该约定实际上起源于sourcemap规范，但Chrome至少将其视为一项独立技术。这是参考。

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

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

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

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

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