在日常开发和各种教程中，最常见的debug方式就是在代码中插入console.log语句，然后在Chrome控制台中查看日志。显而易见，插入console.log的效率不高，那是否有更高效的debug方式呢？
断点调试允许开发者在代码的特定行暂停执行，实时查看和修改变量的值。最简单方式就是我们可以直接在Chrome控制台中使用断点调试。但是整个使用过程，我们必须在Chrome中打点调试，然后回到IDE中对代码进行修改。这个过程相对繁琐，那么我们是否可以直接在本地IDE中去打断点呢？答案是肯定的，因为我本人是Jetbrains的忠实粉丝，因此本文将主要介绍如何使用Webstorm来进行断点调试。
调试效果展示：
Webstorm端：
Chrome端：
操作步骤：
这里先给两个具体的官方文档，但是本教程并不打算按照官方教程的步骤来操作，因为官方文档涉及到较多的配置，因此不建议大家直接按照官方文档进行操作。
1. 在package.json中找到项目的启动脚本
-
打开项目文件夹：使用 WebStorm 打开您的项目文件夹。
-
找到
package.json文件：package.json文件通常位于项目根目录中。您可以在项目目录中找到并打开它。 -
查找
scripts部分：在package.json文件中，找到scripts部分。这部分包含了项目的各种命令脚本，包括启动脚本。 -
识别启动脚本：启动脚本通常命名为
"start"或"dev"。
"start": "react-scripts start"表示使用react-scripts start命令启动开发服务器。"dev": "vite"表示使用vite命令启动开发服务器。
- 启动脚本：点击启动脚本前的绿色箭头，然后点击
Run 'start'启动开发服务器。
2. 开启断点调试
- 找到应用的本地地址：运行启动脚本之后会看到应用的本地地址（这里使用的
react-scripts start，用vite的同学这里会有一点点差别，但是整体大同小异），然后使用Ctrl+Shift+鼠标左键点击该链接。
- Node.js项目在这里会有略微的差别，因为Node.js项目在控制台中不会显示本地地址，因此直接点击
Debug 'start'即可。并且可以跳过下面的第二步。
- 进入Debug模式：点击之后Webstorm会自动打开一个新的Chrome浏览器，这个就是我们之后debug需要使用的窗口。
需要注意的是新打开的浏览器窗口中没有我们的Google账号信息以及各种个人备份和插件，这是因为WebStorm在调试模式下会使用一个干净的浏览器实例。如果我们需要使用插件的话，可以在这个浏览器中单独重新安装，它会一直保留在调试浏览器中。当然如果你就是想使用你的各种个人备份和插件也可以参照这个官方教程： 在debug中使用默认Chrome用户数据。
- 设置断点：现在我们就可以随意在Webstorm的代码中添加断点啦！如果加入断点之后没有生效可以尝试刷新页面，当程序运行到断点处的时候程序就会自动暂停，并实时同步数据。
下面给大家再补充一下这几个按钮的作用：
- Rerun: 重新运行当前的调试会话。这对调试循环很有用，允许你在不关闭调试器的情况下重新启动调试会话。
- Stop: 停止当前的调试会话。
- Resume Program: 继续运行程序，直到遇到下一个断点或程序结束。
- Pause Program: 暂停程序的执行。这在你想要查看当前程序执行状态时非常有用。
- Step Over: 单步跳过函数调用，而不进入函数内部。这对快速浏览代码中的高层逻辑很有帮助。
- Step Into: 单步进入函数内部，允许你详细查看函数的内部执行情况。
- Step Out: 单步跳出当前函数，返回调用该函数的地方。
- View Breakpoints : 查看和管理所有断点。
- Mute Breakpoints : 静音所有断点。程序将继续运行，不会在任何断点处暂停
- 设置条件断点（进阶）：条件断点是一种高级调试工具，它允许你在满足特定条件时才暂停程序的执行。这在调试复杂的逻辑或循环时特别有用，可以帮助你避免在每次迭代或调用时都暂停程序，从而节省调试时间。
右键单击已经设置的断点，在弹出的窗口中，你会看到“条件”字段。你可以在这里输入一个JavaScript表达式，只有当这个表达式的结果为true时，断点才会生效。 例如，如果你只希望在index变量等于某个值时暂停程序，可以输入index === 5。
如果大家在实践过程中出现问题的，或者还有什么想了解的欢迎在评论区评论哦！
