17370845950

在 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 后页面没反应？别急着清缓存，先确认 “Disable cache” 和 “Workspaces” 设置

本地开发时改了 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”开关，让调用栈显示完整异步链路。