如何设置断点：前端开发中的实用技巧

什么是断点

在前端开发中，断点（Breakpoint）是调试代码时常用的功能。它能让程序运行到指定位置时暂停，方便查看当前的变量值、调用栈和执行流程。比如你在写一个购物车结算功能，发现计算总价总是不对，这时候就可以在关键计算行设置断点，一步步看数据是怎么变的。

在浏览器中设置断点

最常用的工具是 Chrome 浏览器的开发者工具。按 F12 打开控制台，切换到 Sources 选项卡，找到你的 JavaScript 文件，点击行号就能设置断点。刷新页面后，代码运行到这一行就会停下来。

也可以在代码里直接写 debugger 命令，效果类似：

function calculateTotal(price, tax) {
    debugger;
    return price + tax;
}

当这行函数被执行时，浏览器会自动暂停，适合临时调试。

条件断点怎么设

有时候你只想在特定条件下暂停。比如循环跑了 100 次，你只关心第 50 次的情况。右键点击行号，选择“Add conditional breakpoint”，输入条件如 i === 50，就只会在这次触发。

响应式设计中的 CSS 断点

除了代码调试，断点也常用于网页布局。比如手机屏幕用一套样式，电脑用另一套。这就是媒体查询里的断点设置：

<style>
@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}
@media (min-width: 769px) {
    .container {
        width: 1200px;
    }
}
</style>

这里的 768px 就是一个典型断点，表示小于等于这个宽度时应用移动端样式。

实际开发中，可以根据设计稿来定断点。常见的是 320px、768px、1024px 和 1200px，覆盖手机、平板和桌面设备。

小技巧：别让断点影响上线代码

记得删掉代码里的 debugger，不然用户打开页面可能会看到浏览器暂停。可以用构建工具在打包时自动清除，或者干脆只在开发环境加。

调试完及时关闭断点，长期开着容易误以为代码卡住，其实只是被自己拦下了。