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

你可以在

debugger;

在大多数JavaScript环境中被破坏。它们肯定会持续下去。如果您正在使用生产环境中的调试器和console.log调用，那么最好有一个能够清除这些调用的小程序。

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

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

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

或者JavaScript的方法是使用

debugger;

另外，您是否将JavaScript文件从服务器发送到客户端，并附带一个查询参数到当前纪元时间的URL ?这是用来防止缓存JavaScript文件。

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

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

这可能发生在您动态加载或从其他脚本评估的脚本?在我发现sourceURL属性之前，我可以说这个场景真的让我很恼火。将以下特殊格式的注释放在你想要调试的脚本的最后一行，将在Chrome中"锚定"它，因此它有一个参考框架:

//# sourceURL = filename.js

您手动放置的断点现在将在页面加载之间持续存在!这种惯例实际上起源于sourcemap规范，但Chrome至少将其视为一种独立的技术。这里有一个参考。

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

对于使用ExtJs 6的人。x:
你可以在Ext.Loader中添加一个"cache"或"disableCacheBuster"查询参数到页面的URL。这将从文件中删除"_dc"参数，并使chrome调试器能够持久保存断点。

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

Chrome Developer Tools应该按照您期望的方式运行，但是您可以将debugger;语句放在您的(开发!)代码中以暂停执行。

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

正如@jtrick所说，使用注释:

//# sourceURL=filename.js

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

这是更新后的参考链接:

虽然不是源映射规范的一部分，但@sourceURL允许您这样做在处理eval时使开发更容易。这个助手与//# sourceMappingURL属性非常相似

通过在代码中包含以下特殊注释，它将是eval，您可以命名eval和内联脚本和样式，以便它们

//# sourceURL = source.coffee

如果您为提供给浏览器的版本化文件设置了服务器端缓存，则可以在生成缓存时在源代码中追加注释，而不必修改原始源文件。

注:上的评论，你也可以指定一个虚拟路径的文件，这样你可以组织你的动态加载或版本化的内容在树显示在chrome devtools>navigator panel祝辞sources祝辞page treeview。例如:

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