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

Question

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

有没有办法保存这些断点,所以即使在页面刷新后它也会中断(我用过的其他调试器都这样做)？

或者,在我的JavaScript代码中是否有一种干净的方式我可以输入一些内容来告诉chrome开始跟踪(暂停一行)？

Answer 1

你可以放一个

debugger;

在大多数JavaScript环境中打破.他们肯定会坚持下去.如果您正在使用这些,那么有一个minifier可以解决生产环境的调试器和console.log调用问题.

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

更新:我在github上找到了一个名为chimney的工具,它接受一个文件并删除所有的console.log调用.它提供了如何删除调试器调用的好主意.

Answer 2

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

或者JavaScript的方式是使用

debugger;

Answer 3

此外,您是否将您的JavaScript文件从服务器发送到客户端,并使用附加的查询参数将URL与当前的大纪元时间一起发送给客户端？这用于防止缓存JavaScript文件.

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

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

Answer 4

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

//#sourceURL = filename.js

现在,手动放置的断点将在页面加载之间保持不变!该惯例实际上源于源图规范,但Chrome至少将其视为独立技术.这是一个参考.