Chrome DevTools 通过断点、调用栈、Watch/Scope 和 Network/Performance 面板，实现对“谁在什么时候干了什么”的可观测与可回溯：在函数入口、事件监听器、异步回调处设断点；利用 Call Stack 查异步源头与同步链；用 Watch 监控表达式、Scope 查变量上下文；结合 Network 看请求异常、Performance 查执行阻塞。

定位影响执行的逻辑，核心是让“谁在什么时候干了什么”变得可观察、可回溯。Chrome DevTools 不是靠猜，而是通过打断点、看调用链、抓执行上下文，把隐含的控制流显性化。

用断点精准卡住关键节点

不要等错误发生才找原因，要在逻辑可能出问题的位置主动暂停：

• 在可疑函数入口处右键 → “Add breakpoint” 或直接点击行号左侧空白处打普通断点
• 对事件响应逻辑，打开 Sources → Event Listener Breakpoints → 展开 Mouse/Keyboard 等分类，勾选 click、input、submit 等，点击即停
• 对异步回调（如 Promise.then、setTimeout 回调），可在回调函数第一行打断点；配合 Async 堆栈追踪（右键调用栈 → 勾选 “Async”）能直接跳回原始发起位置

看调用栈反推执行源头

断点命中后，Call Stack 面板显示当前执行路径。重点看两层：

• 顶部灰色 async 标签：说明这是异步回调，点击可跳转到 Promise.then、fetch().then 等原始定义处
• 底部同步调用链：比如 button.addEventListener → handleClick → api.request → …，一层层往上点，就能确认是哪个用户操作或状态变化触发了后续逻辑
• 鼠标悬停任一栈帧，会显示该函数被谁调用、参数是什么，避免只看函数名却不知上下文

用 Watch 和 Scope 实时盯变量变化

很多逻辑问题源于变量值意外改变。Sources 面板右侧的 Watch 和 Scope 区域就是你的“变量监控室”：

• 在 Watch 中输入表达式（如 user.token、items.length），它会在每次断点暂停时自动求值并更新
• Scope 面板展示当前作用域所有变量，包括闭包变量、this 指向、参数值，比 console.log 更直观、更及时
• 如果发现某个值在某次循环后突变，可回溯到前一个断点，对比 Scope 差异，快速锁定赋值语句

结合 Network 和 Performance 锁定外部干扰

有时逻辑“被影响”不是代码写错，而是外部因素打乱了预期节奏：

• Network 面板中勾选 “Preserve log”，刷新页面后查看请求顺序和耗时——某个接口超时或返回空数据，可能让后续 if 分支走错路
• Performance 面板录制交互过程，展开 Main 轨道，看是否有长任务阻塞主线程（红色长条），导致定时器延迟、事件队列堆积，让逻辑执行时机偏移
• XHR/Fetch 断点可捕获请求发起瞬间的完整上下文（调用栈 + 变量 + 请求体），适合排查参数拼错、条件未满足就发请求等问题