昨天帮邻居小妹改一个网页表单，她刚敲完 JavaScript，点提交就报错，但控制台一闪而过，根本抓不住哪行出的问题。我顺手开了 Chrome 的实时调试面板，两分钟定位到是 document.getElementById 拼错了 ID 名——这种“边写边查、错了立马停”的感觉，比翻日志强太多了。
啥叫实时调试？
简单说，就是代码一运行，你就能看见变量值、函数调用栈、DOM 变化，甚至能暂停在某一行，手动改个变量再继续跑。不是等报错完再去猜，而是全程盯着它怎么走。
日常够用的 5 个工具
1. Chrome DevTools（自带不用装）
按 F12 或右键 → “检查”，切到 Sources 标签页。在 JS 文件里点行号左边加个断点，刷新页面就自动停住。支持鼠标悬停看变量、右侧 Watch 手动输表达式，比如 user.name 或 arr.length，实时显示结果。
2. VS Code + Debugger for Chrome 插件
写代码不离编辑器？装个插件就行。配置好 launch.json，点顶部绿色三角形，VS Code 就能自动打开 Chrome 并同步断点。改完代码还能热重载，不用反复切窗口。
3. Firefox Developer Edition
自带更强的 CSS 实时编辑能力。改完样式，页面立刻响应，连动画过渡都保留。调试 JS 时，它的“堆栈帧”展开特别清晰，适合嵌套深的回调函数。
4. CodePen / JSFiddle 的实时预览区
写小 demo 或给同事发示例时，直接贴代码，右边区域秒变运行效果。点“Debug”按钮还能进简易调试器，看 console 输出和简单断点，适合快速验证逻辑。
5. React DevTools（专治 React 组件）
装上浏览器插件后，在 Elements 面板旁多出 React 标签。点组件就能看到 props、state 当前值，还能手动修改 state 触发重新渲染——比如把 loading: true 改成 false，立刻看加载态消失效果。
一个小技巧：别光打断点
遇到异步代码（比如 fetch 请求），光在请求前打断点没用。试试在回调里加 debugger;，比如：
fetch('/api/user')
.then(res => res.json())
.then(data => {
debugger; // 运行到这里会自动暂停
console.log(data);
});这样比手动找断点位置快多了。手机调试也一样，Chrome 连上安卓机，DevTools 里选“Remote devices”，就能实时看 H5 页面的 JS 执行过程。
工具不在多，在顺手。挑一个你最常写的环境配熟，下次代码卡住，别急着删代码重来——按 F12，点一下，答案可能就在下一行。