断点调试监控变量：代码排错的实用技巧

写代码时，程序跑不起来或者结果不对，最头疼的不是报错，而是不知道哪出了问题。这时候，断点调试就成了开发者手里的“放大镜”，尤其是监控变量的变化过程，能快速定位异常。

什么是断点调试

断点调试就是在代码的某一行设置一个“暂停点”。程序运行到这一行时会停下来，你可以看看此时各个变量的值是不是预期的。比如你写了个循环，发现最后算出来的总数总是差一点，就可以在循环内部设个断点，一步步看变量是怎么变的。

如何监控变量

大多数现代开发工具都支持变量监控。以 Chrome 浏览器的开发者工具为例，在 Sources 面板里找到你的 JS 文件，点击行号就能设断点。刷新页面后，代码执行到断点处会暂停，右侧的 Scope 面板会列出当前所有变量的值。

如果你想盯住某个特定变量，比如 userCount，还可以右键它，选择“Add to Watch”（加入监控）。这样不管它在哪一层作用域，都会单独显示在 Watch 面板里，一目了然。

实际场景示例

假设你在处理一个用户登录状态的逻辑：

let isLoggedIn = false;
let userRole = 'guest';

function login(username) {
    if (username !== '') {
        isLoggedIn = true;
        userRole = getUsernameRole(username); // 假设这个函数返回角色
    }
}

测试时发现明明登录了，权限还是没变。你在 isLoggedIn = true 这一行打上断点，运行 login('admin')，程序停住后一看，userRole 还是 'guest'，但 isLoggedIn 已经变成 true 了。接着单步执行下一步，发现 getUsernameRole 返回了 undefined —— 问题就在这儿，函数拼错了或者没定义。

小技巧：条件断点

有时候变量要循环上千次才出问题，你不可能一步步点下去。这时候可以用条件断点。右键断点，设置条件，比如 i === 999，只有当循环到第 999 次时才会暂停，省下大量时间。

调试不是玄学，关键是在合适的时机看到变量的真实状态。断点加监控，就像给代码装了摄像头，哪里异常，一眼就能发现。