这5款实时调试工具，写代码时救过我好几次命

上周改一个前端接口报错，卡在控制台里反复刷新、加 console.log，折腾半小时没定位到问题。后来切到 Chrome 的 Sources 面板打了个断点，两分钟就揪出是后端返回的 timestamp 字段被转成了字符串——这种“边跑边看、边改边试”的体验，就是实时调试最爽的地方。

Chrome DevTools：不用装，开箱即用

绝大多数前端同学的第一选择。按 F12 打开，切到 Sources 标签页，点左侧文件树就能定位 JS 文件，点击行号左边空白处设断点。执行到那里会自动暂停，鼠标悬停变量看值，右键可以“Add to watch”持续监控。遇到异步请求，还能在 Network 里点开某个请求，直接跳转到触发它的 JS 行。

VS Code + Debugger for Chrome：本地开发更顺手

如果你习惯在 VS Code 写代码，装个官方插件 Debugger for Chrome，配个 launch.json 就能一键启动调试：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

保存后按 Ctrl+Shift+D 切到调试面板，F5 启动，断点和变量监视全在编辑器里完成，不用来回切窗口。

Postman 的实时脚本调试：API 调试别只盯着响应体

很多人不知道 Postman 的 Tests 标签页能写 JS 脚本，而且支持 console.log（输出在 Console 面板）。比如你调一个登录接口，想确认 token 是不是带了 Bearer 前缀，直接写：

console.log(pm.response.json().token);
const token = pm.response.json().token;
pm.test("Token starts with Bearer", function () {
    pm.expect(token).to.include("Bearer");
});

运行时点右上角 Console 按钮，就能看到实时输出和断言结果，比翻 raw response 快得多。

Python 的 pdb 和 ipdb：命令行里也能精准下刀

写爬虫或数据脚本时，print 太原始，pdb 就像给代码装了个显微镜。在你想停的地方插入：

import pdb; pdb.set_trace()

运行后会卡住，输入 n 下一行，p var_name 打印变量，c 继续执行。嫌命令太长？换成 ipdb（pip install ipdb），支持语法高亮和 Tab 补全，体验接近 IDE。

Firefox Developer Edition：别忽略这个“备胎”

Chrome 有时对某些 WebAssembly 或 Service Worker 场景支持不太稳，这时候换 Firefox Dev Edition 试试。它的 Debugger 面板有个隐藏技巧：右键某行 → “Black box this source”，把第三方库（比如 node_modules 里的包）设为黑盒，调试时自动跳过，专注自己的逻辑。

工具没有最好，只有最趁手。你手边正开着哪个调试器？下次卡住时，不妨换个视角，点个断点，而不是再刷十遍页面。