Chrome JavaScript 调试 - 如何在页面刷新或通过代码中断之间保存断点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8243742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome JavaScript Debugging - how to save break points between page refresh or break via code?
提问by Scott Szretter
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.
当使用 Chrome 和它的 JavaScript 调试器时，每次我重新加载我的页面/脚本时，我的断点都会丢失，我必须在弹出窗口中找到脚本文件，找到我的断点的代码行，点击添加它， 等等。
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)?
或者，在我的 JavaScript 代码中是否有一种干净的方式我可以输入一些东西来告诉 chrome 开始跟踪（在一行上暂停）？
采纳答案by Ege ?zcan
You can put a
你可以放一个
debugger;
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.
打破大多数 JavaScript 环境。他们肯定会坚持下去。如果您正在使用这些，最好有一个缩小器来消除生产环境的调试器和 console.log 调用。
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.
在最新版本的 Chrome 浏览器中，控制台面板顶部的过滤器旁边有一个“保留日志”选项。在旧版本中，右键单击空控制台窗口将显示该选项（“导航时保留日志”）。当您没有 console.log 语句或硬编码的调试器调用时，这很方便。
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.
更新：我在 github 上找到了一个名为chimney的工具，它接收一个文件并删除所有的 console.log 调用。它提供了有关如何删除调试器调用的好主意。
回答by pradeek
Set your breakpoints, switch to the Network tab and select the Preserve Log Upon Navigationtoggle button. Now the breakpoints should be there when you refresh.
设置断点，切换到“网络”选项卡并选择“导航时保留日志”切换按钮。现在刷新时断点应该在那里。
Or the JavaScript way is to use
或者 JavaScript 的方式是使用
debugger;
回答by sjogren_me
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).
此外，您是否将您的 JavaScript 文件从服务器发送到客户端，并将附加的查询参数发送到具有当前纪元时间的 URL？这用于防止缓存 JavaScript 文件。
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.
在这种情况下，Chrome 开发人员工具似乎在刷新后将文件解释为不同的文件，这将（正确）删除断点。
For me, removing the query parameter made the CDT keep the breakpoints after refresh.
对我来说，删除查询参数使 CDT 在刷新后保留断点。
回答by jtrick
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 属性之前，这种情况真的让我很恼火。在您要调试的脚本的最后一行放置以下特殊格式的注释将把它“锚定”在 Chrome 中，因此它有一个参考框架：
//# sourceURL=filename.js
//# 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.
您手动放置的断点现在将在页面加载之间持续存在！该约定实际上源自 sourcemap 规范，但 Chrome 至少将其视为一种独立技术。这是一个参考。
回答by kaah
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.
对于使用 ExtJs 6.x 的人：
您可以在页面的 URL 中添加“缓存”或“disableCacheBuster”查询参数，而不是在 Ext.Loader 中使用disableCaching。这将从文件中删除“_dc”参数并启用 Chrome 调试器以保留断点。
See bootstrap.js in your application (config parameter disableCaching).
请参阅应用程序中的 bootstrap.js（配置参数 disableCaching）。
回答by sandeepConnected
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.
你可以把调试器; 在要开始调试的代码之前。一旦页面开始加载，它将在调试器处停止；陈述。然后您可以根据您的要求轻松应用调试点。
回答by SLaks
You can use the debugger;statement in your source to make the debugger break there.
您可以使用debugger;源代码中的语句使调试器中断。
回答by J. K.
Chrome Developer Tools should behave the way you expect but you can put debugger;statements in your (development!) code to pause the execution.
Chrome 开发者工具应该按照您期望的方式运行，但您可以debugger;在（开发！）代码中放置语句以暂停执行。
