作为前端开发人员，我们经常需要调试JavaScript代码以解决问题。Chrome浏览器提供了强大的开发工具来帮助我们进行调试。其中一个功能是断点调试，它允许我们在特定行上中断代码执行并检查变量的值。但是，当我们刷新页面或通过代码中断时，所有在断点上设置的信息都会丢失。这篇文章将介绍如何在刷新页面或通过代码中断之间保存断点。
在代码中添加断点
首先，我们可以在我们的代码中手动添加断点。在Chrome浏览器的开发工具中，找到Sources选项卡，然后在左侧面板中找到要调试的JavaScript文件。单击右侧面板中的行号，我们可以在该行上添加或删除断点。当代码执行到断点时，它将在该行停止，并且您可以检查变量和调用堆栈等信息。但是，当我们刷新页面或通过代码中断时，这些手动设置的断点也会消失。
保存断点
为了在刷新页面或通过代码中断之间保留断点，我们可以使用Chrome浏览器的断点管理器。打开“断点管理器”面板，我们可以看到我们在代码中手动添加的所有断点。在此面板上，我们可以右键单击一个断点并选择“编辑断点”，然后选中“在页面刷新时保留断点”复选框。这将确保当我们刷新页面时，该断点仍然存在。
在代码中断点
另一种情况下，我们可能需要在代码执行期间动态添加和删除断点。为此，我们可以使用debugger关键字来中断代码执行并打开Chrome浏览器的开发工具。我们可以在任何我们想要检查变量或调用堆栈的地方添加debugger关键字，并且代码执行将在那里中断。
function calculate(a, b) { debugger; // 中断代码执行 return a + b; } console.log(calculate(2, 3)); // 运行代码，调试器将自动打开
但是，当我们刷新页面时，所有通过debugger设置的断点信息都会消失。为了解决这个问题，我们可以使用“局部作用域”选项。在Chrome浏览器的开发工具中，找到“设置”选项卡，然后选择“首选项”>“黑盒脚本”（Blackboxing）。在此处添加我们不希望进入调试模式的脚本，例如第三方库。然后，我们可以在代码中使用debugger关键字来中断执行，而不会丢失这些设置。
结论
Chrome浏览器的开发工具为JavaScript调试提供了强大的支持。通过手动添加断点、保存断点以及使用debugger关键字，我们可以方便地调试代码并解决问题。定期使用这些技术可以帮助我们更快地解决问题，并提高开发效率。
完整示例代码：
function calculate(a, b) { debugger; // 中断代码执行 return a + b; } console.log(calculate(2, 3)); // 运行代码，调试器将自动打开
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13011
