在 Chrome DevTools 中打断点调试需点击行号左侧设断点，或用 debugger 语句；异步代码须在回调内设点；通过 Scope 面板查 this 和闭包；Network 面板分析请求状态与数据；启用 Disable cache 和 Workspaces 实现热更新；开启 Async 开关追踪异步调用栈。
怎么在 Chrome DevTools 里打断点调试 console.log 不够用时
当 console.log 只能告诉你“值变了”，却说不清“谁改的、什么时候改的、改之前是什么”，就得用断点。最直接的方式是点击源码行号左侧空白处，DevTools 会加一个蓝色圆点——这就是断点。刷新页面后，执行到这一行就会暂停。
- 右键断点可编辑条件：比如只在
user.id === 123时触发 -
debugger;语句等价于手动打点，但需确保没被代码压缩移除（UglifyJS/Terser 默认会删） - 异步代码（如
setTimeout、fetch回调）里打点，要确认断点在回调函数体内，而不是外层同步代码里
为什么 console.log(this) 总是 window 或 undefined？用 “Scope” 面板看真实上下文
箭头函数不绑定 this，事件回调里未显式绑定时 this 也常失焦。这时候光靠 console.log 打印没用，得看 DevTools 的 “Scope” 面板——它实时显示当前暂停位置的所有作用域变量，包括 this 指向的对象、闭包捕获的变量、全局变量。
- 暂停后，在右侧 “Scope” 面板展开
This，点三角就能看到属性和原型链 - 如果
This显示undefined，说明当前函数是严格模式下的普通函数调用（非对象方法、非call/apply） - 想验证是否闭包生效？在 Scope 里找 “Closure” 分组，里面列出的就是被当前函数捕获的外部变量
网络请求卡住或返回异常，怎么快速定位是前端发错还是后端崩了？用 “Network” 面板查 fetch 和 XMLHttpRequest
不要先翻后端日志，先打开 Network 面板，过滤出 XHR 或 Fetch 类型请求，点开具体条目看四件事：状态码、响应头、请求体、响应体。很多问题一眼就能判责。
- 状态码是
400且响应体含"message": "Invalid token"→ 前端传了错误 token，不是后端挂了 - 请求体里
body是空的，但代码写了JSON.stringify(data)→ 可能data是undefined，序列化后变成"undefined"字符串，后端解析失败 - 状态码是
0或一直 pending → 检查是否跨域被拦截（看 Console 是否有 CORS 错误）、或请求 URL 写成http://而当前页是https://
修改 CSS 或
本地开发时改了 JS 文件但浏览器没加载新版本，大概率不是缓存问题，而是 DevTools 没启用实时重载能力。
- Network 面板右上角勾选
Disable cache（仅在 DevTools 打开时生效），避免本地测试被强缓存干扰 - 如果用 VS Code 编辑文件，可在 Sources 面板右键 →
Add folder to workspace，把项目目录映射进去，之后在 Sources 里直接编辑、保存，浏览器会自动注入新代码（无需刷新） - 注意：Workspaces 不支持
eval生成的脚本、内联、或通过document.write插入的代码
function handleClick() {
console.log('before');
debugger; // 这里暂停后，可直接在 Console 输入 this.userId 查值
fetch('/api/user', {
method: 'POST',
body: JSON.stringify({ id: this.userId })
});
}
实际调试中最容易忽略的是异步堆栈追踪——比如在 Promise.catch 里打断点，看不到前面哪一步 reject 的。这时要点开右上角“Async”开关，让调用栈显示完整异步链路。
