Chrome JavaScript 调试 - 如何在页面刷新之间保存断点或通过代码中断？
当使用 Chrome 及其 JavaScript 调试器时，每次重新加载页面/脚本时，我的断点都会丢失，我必须在弹出窗口中查找脚本文件，找到断点的代码行，单击添加它等等。
有没有办法保存这些断点，以便即使在页面刷新后它也会中断（我使用过的其他调试器也这样做）？
或者，在我的 JavaScript 代码中是否有一种干净的方法可以输入一些内容来告诉 chrome 开始跟踪（在一行上暂停）？
When using Chrome and it's JavaScript debugger, every time I reload my page / scripts, my breakpoints are lost and I have to go find the script file in the pop-up, find the line of code for my break point, click to add it, etc.
Is there a way to save these breakpoints so it breaks even after a page refresh (other debuggers I have used do this)?
Alternatively, is there a clean way in my JavaScript code I can type something to tell chrome to start tracing (to pause on a line)?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
您可以
在大多数 JavaScript 环境中进行中断。他们肯定会坚持下去。如果您正在使用这些，最好有一个压缩器来消除生产环境的调试器和 console.log 调用。
在最新版本的 Chrome 浏览器中，控制台面板顶部的过滤器旁边有一个“保留日志”选项。在旧版本中，右键单击空控制台窗口将显示该选项（“导航时保留日志”）。当您没有 console.log 语句或硬编码的调试器调用时，它很方便。
更新：我在github上找到了一个工具，名为chimney，它获取一个文件并删除所有console.log来电。它提供了有关如何删除调试器调用的好主意。
You can put a
to break in most of the JavaScript environments. They will persist for sure. It's good to have a minifier that rids the debugger and console.log calls for the production environment, if you are using these.
In the recent versions of Chrome browser, there is a "Preserve Log" option on the top of the console panel, next to the filters. In the older versions, right clicking on the empty console window will bring that option ("Preserve log upon navigation"). It's handy when you don't have console.log statements or hard-coded debugger calls.
update: I found a tool on github, called chimney, which takes a file and removes all the console.log calls. it gives a good idea about how to remove debugger calls.
设置断点，切换到“网络”选项卡，然后选择导航时保留日志切换按钮。现在刷新时断点应该就在那里。
或者 JavaScript 的方式是使用
Set your breakpoints, switch to the Network tab and select the Preserve Log Upon Navigation toggle button. Now the breakpoints should be there when you refresh.
Or the JavaScript way is to use
另外，您是否使用 带有当前纪元时间的附加查询参数？这用于防止缓存 JavaScript 文件。
在这种情况下，Chrome 开发者工具似乎在刷新后将文件解释为不同的文件，这将（正确地）删除断点。
对我来说，删除查询参数使 CDT 在刷新后保留断点。
Also, do you send your JavaScript file(s) from the server to the client with an attached query parameter to the URL with the current Epoch time? This is used to prevent caching of the JavaScript file(s).
When this is the case, it seems like the Chrome Developer Tools interprets the file to be a different one after the refresh, which will (correctly) remove the breakpoints.
For me, removing the query parameter made the CDT keep the breakpoints after refresh.
对于您动态加载或从其他脚本评估的脚本，可能会发生这种情况？我可以对自己说，这种情况确实让我很恼火，直到我发现了 sourceURL 属性。将以下特殊格式的注释放在要调试的脚本的最后一行，会将其“锚定”在 Chrome 中，以便它有一个参考框架：
//# sourceURL=filename.js
您手动放置的断点现在将持续存在页面加载之间！该约定实际上源自源映射规范，但 Chrome 至少将其视为一项独立技术。这是参考。
This is probably happening for scripts that you're dynamically loading or evaluating from other scripts? I can say for myself that this scenario really irritated me until I discovered the sourceURL property. Placing the following specially formatted comment on the last line of the script you want to debug will 'anchor' it within Chrome so it has a frame of reference for it:
//# sourceURL=filename.js
Your manually-placed breakpoints will now persist between page loads! The convention actually originated from the sourcemap specification, but Chrome at least honors it as a standalone technique. Here's a reference.
您可以在源代码中使用
debugger;语句使调试器在此处中断。You can use the
debugger;statement in your source to make the debugger break there.对于使用 ExtJs 6.x 的人：
您可以将“cache”或“disableCacheBuster”查询参数添加到页面的URL，而不是在Ext.Loader中使用disableCaching。这将从文件中删除“_dc”参数，并使 Chrome 调试器能够保留断点。
请参阅应用程序中的 bootstrap.js （配置参数disableCaching）。
For people using ExtJs 6.x:
instead of disableCaching in the Ext.Loader you could add a "cache" or "disableCacheBuster" query parameter to the page's URL. This will remove the "_dc" parameter from the file and enable chrome debugger to persist the breakpoint.
See bootstrap.js in your application (config parameter disableCaching).
Chrome 开发者工具的行为应符合您的预期，但您可以在（开发！）代码中放置
debugger;语句来暂停执行。Chrome Developer Tools should behave the way you expect but you can put
debugger;statements in your (development!) code to pause the execution.您可以放置调试器；在要开始调试的代码之前。一旦页面开始加载，它将停在调试器处；陈述。然后您可以根据您的要求轻松应用调试点。
You can put debugger; before the code where you want to start debugging. Once the page starts loading,it would stop at the debugger; statement. Then you can easily apply the debugging point as per your requirement.
正如 @jtrick 所说，使用注释：
//# sourceURL=filename.js这是在页面刷新之间以及关闭和重新打开 chorme 之间获得断点持久性的最佳方法，即使在版本化（以控制浏览器缓存）或动态包含的 javascript/css 文件。
这是更新后的参考链接：
如果您对提供给浏览器的版本化文件有服务器端缓存，则可以在生成缓存时在源代码中附加注释，而无需修改原始源文件。
注意：在评论中，您还可以指定文件的虚拟路径，这样您就可以在
chrome 中显示的树上组织动态加载或版本控制的内容开发工具>导航面板>来源>页面树视图。即：//# sourceURL=https://yourdomain.com/libs/ui/widget.jsAs said by @jtrick, use the comment:
//# sourceURL=filename.jsit is the best way to obtain the persistence of breakpoints between page refreshes and also between closing and reopening of chorme, even in versioned (to have control over browser cache) or dynamically included javascript/css files.
This is the updated reference link:
If you have a server-side cache for the versioned files served to the browser, you can append the comment in the source code at the time of the cache generation, without having to modify the original source files.
NOTE: on the comment you can also specify a virtual path to the file, this way you can organize your dynamically loaded or versioned content on a tree displayed in
chrome devtools>navigator panel>sources>pagetreeview. I.e.://# sourceURL=https://yourdomain.com/libs/ui/widget.js