什么是断点
写代码时，程序跑起来结果不对，光靠眼睛看很难发现问题在哪。这时候，断点就派上用场了。断点就像你在跑步时设了个暂停点，程序运行到那里会自动停下来，让你看看此时变量是什么值、流程有没有走偏。
比如你写了个计算商品总价的函数，结果算出来总是多出10块，你就可以在关键计算步骤前设个断点，看看数据是不是传错了。
在浏览器里设置断点
前端开发最常用的工具就是浏览器的开发者工具。以 Chrome 为例，按 F12 打开控制台，切换到 Sources（源代码）标签，找到你正在调试的 JS 文件。
点击行号就可以设置断点。比如你的代码有这么一行：
let total = price * quantity;你怀疑 quantity 的值有问题，那就点一下这行的行号，出现一个蓝色图标，断点就设好了。刷新页面，当代码执行到这一行时，就会暂停。
这时你可以把鼠标移到变量名上，查看当前的值，也可以在控制台直接输入变量名回车，看到更详细的信息。
条件断点：只在特定情况下暂停
有时候你不想每次循环都停，只想在某个条件下才中断。比如遍历一个用户列表，只在用户名是“admin”时暂停。
右键点击行号，选择“Add conditional breakpoint”，然后输入条件：
username === 'admin'这样程序只有满足条件才会停下来，省得你一次次手动继续。
在 VS Code 中调试并设置断点
如果你用 VS Code 写 Node.js 或前端项目，也可以直接在里面设断点。打开代码文件，点击行号左侧的空白区域，出现红点就表示断点已设置。
接着配置 launch.json，告诉编辑器怎么启动程序。比如调试一个 app.js 文件：
{
"type": "node",
"request": "launch",
"name": "Launch App",
"program": "${workspaceFolder}/app.js"
}按 F5 启动调试，程序会在断点处暂停，你可以查看调用栈、作用域里的变量，一步步跟踪执行流程。
常见问题和小技巧
有时候点了行号没反应，可能是源码没加载出来。试试刷新页面，或者确认你打开的是实际运行的那份代码，而不是压缩后的 bundle.js。
另一个问题是断点错位，尤其用了 Webpack 这类打包工具。确保你生成了 source map，这样浏览器才能把压缩代码正确映射回原始代码。
还有一个实用操作：临时禁用某个断点。右键点击断点，选择 Disable breakpoint，需要时再启用，比删掉重设方便多了。
调试不是高手专属，每个写代码的人都会用到。学会设置断点，等于给自己的程序装了个摄像头，哪里出了问题一眼就能发现。