Chrome浏览器JavaScriptdebugging – 如何保存页面刷新或通过代码中断之间的断点？

当使用Chrome浏览器和它的JavaScriptdebugging器时，每当我重新加载我的页面/脚本时，我的断点都会丢失，我必须在popup窗口中find脚本文件，find我的断点的代码行，单击以添加它等等

有没有一种方法来保存这些断点，以便在刷新页面（我使用过的其他debugging器）之后保持断开状态？

另外，在我的JavaScript代码中是否有一个干净的方法我可以键入一些东西来告诉铬开始跟踪（暂停一行）？

你可以把一个

 debugger;

打破了大部分的JavaScript环境。他们会坚持下去的。如果您正在使用这些工具，那么最好使用一个微缩工具来清除生产环境的debugging器和console.log调用。

在最新版本的Chrome浏览器中，控制台面板顶部的“保留日志”选项位于filter旁边。在旧版本中，右键单击空的控制台窗口将带来该选项（“保留导航日志”）。当你没有console.log语句或硬编码的debugging器调用时，这很方便。

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

设置断点，切换到“networking”选项卡并select“ 保留导航日志”切换button。现在刷新时，断点应该在那里。

或者JavaScript的方式是使用

 debugger;

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

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

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

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

//＃sourceURL = filename.js

您手动放置的断点现在将在页面加载之间保持不变！该惯例实际上源于源图规范，但Chrome至less将其视为独立技术。这里有一个参考。

你可以使用debugger; 在您的源代码中的语句，使debugging器打破那里。

Chrome开发人员工具应该按照您期望的方式行事，但您可以将debugger; 您的（开发！）代码中的语句暂停执行。

对于使用ExtJs 6.x的人：
而不是在Ext.Loader中的disableCaching，你可以添加一个“caching”或“disableCacheBuster”查询参数到页面的URL。这将从文件中删除“_dc”参数，并启用chromedebugging器来保存断点。

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