在编写 JavaScript 代码时，我们经常需要检查特定条件是否满足才能进一步调试和测试代码。这时候，条件断点就是一个非常有用的调试工具。本文将介绍如何使用 Chrome 调试器工具中的条件断点来提高代码调试效率。
前置知识
在开始学习本文内容之前，你需要了解以下基础知识：
- 基本的 JavaScript 语法和调试技巧
- Chrome 浏览器的开发者工具（DevTools）的基本用法
如果你还不熟悉以上内容，建议先学习相关知识，并熟练掌握使用方式再来学习条件断点的用法。
什么是条件断点？
条件断点是一种断点类型，它可以让程序在满足特定条件时暂停执行。当程序运行到设定的条件断点处，如果条件满足，则会自动停止执行，进入调试状态，等待我们进一步调试；如果条件不满足，则程序会继续执行，不会被打断。
条件断点通常用于下面的情况：
- 检查特定变量的值是否符合预期，例如检查循环中某个变量的值是否为 0；
- 检查特定条件是否满足，例如检查用户输入是否合法；
- 检查代码的执行次数，例如检查循环体内某个函数的调用次数。
如何设置条件断点？
在 Chrome 开发者工具中，我们可以通过以下步骤来设置条件断点：
- 打开 Chrome 浏览器，在需要调试的网页上右键单击，选择“检查”或者按下快捷键
Ctrl + Shift + I，打开开发者工具。 - 在开发者工具中选择“Sources”（源代码）选项卡，并找到需要调试的 JavaScript 文件。
- 在 JavaScript 文件中找到需要设置条件断点的行，然后在行号左侧单击即可添加断点。也可以通过在命令面板中输入“Add conditional breakpoint”来打开设置条件断点的对话框。
- 在弹出的对话框中输入断点条件，例如变量名、表达式或者函数调用，并点击“确定”按钮保存设置。
除了手动在代码中添加条件断点外，我们还可以通过在开发者工具中使用条件断点工具来设置条件断点。操作如下：
- 在开发者工具中选择“Sources”（源代码）选项卡，并找到需要调试的 JavaScript 文件。
- 在 JavaScript 文件中找到需要设置条件断点的行，然后在行号左侧单击右键，选择“Add conditional breakpoint”（添加条件断点）选项。
- 在弹出的对话框中输入断点条件，例如变量名、表达式或者函数调用，并点击“确定”按钮保存设置。
示例代码
下面是一个简单的示例代码，演示如何在 Chrome 开发者工具中设置条件断点。
-------- ------------ -
--- ------ - --
--- ---- - - -- - -- -- ---- -
------ -- --
-------------------- -------------------
-
------ -------
-
-------------我们想要在上面的代码中添加一个条件断点，使得程序在执行到 i=3 的时候暂停。我们可以按照以下步骤来设置条件断点：
- 打开 Chrome 浏览器，在需要调试的网页上右键单击，选择“检查”，打开开发者工具。
- 在开发者工具中选择“Sources”（源
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13110