17370845950

Chrome DevTools中需用条件断点、XHR/fetch断点、事件监听器断点捕获异步逻辑；用console.table/console.group结构化输出；确保sourceMap启用且正确加载以定位源码。

Chrome DevTools 里怎么加断点才不漏掉异步逻辑

直接点行号加断点只对同步代码有效，Promise.then、setTimeout、事件回调这些异步路径容易跳过。得用条件断点或“XHR/fetch 断点”配合“Event Listener Breakpoints”。

• 右键行号 → “Add conditional breakpoint”，填入 typeof data !== 'undefined' 这类判断，避免在未初始化时中断
• 在 Sources → XHR/fetch Breakpoints 里添加 URL 关键字（比如 /api/user），发请求时自动停住，能直接看到发起位置和参数
• 打开 Event Listener Breakpoints → Mouse → click，点击任意元素就会在绑定的 addEventListener 处暂停，比手动找 onclick 快得多

console.log 太原始？用 console.table 和 console.group 替代

console.log 打印对象时层层展开太慢，尤其嵌套深或字段多的对象；重复调用还污染控制台。用结构化输出能一眼定位问题。

const users = [
  { id: 1, name: 'Alice', role: 'admin' },
  { id: 2, name: 'Bob', role: 'user' }
];
console.table(users); // 表格化展示，支持点击列头排序
console.group('API response');
console.log('status:', 200);
console.log('data:', response.data);
console.groupEnd(); // 折叠日志块，避免干扰其他输出

• console.table() 对数组或键值对明确的对象最有效，不适用于 Map 或带方法的对象
• console.group() 嵌套层级别超过 3 层就难折叠，建议用 console.groupCollapsed() 默认收起
• 调试完成前别删 console，但上线前务必搜索 console. 全局清除，否则可能暴露敏感数据

debugger 语句被忽略？检查是否被 sourcemap 或构建工具吞掉

写好 debugger 却没中断，大概率是构建流程移除了它，或者浏览器禁用了断点（比如开启了 “Ignore list”）。不是代码问题，是环境链路断了。

• Webpack/Vite 默认生产模式会删除 debugger，开发时确认 mode: 'development' 且 optimization.removeAvailableModules: false
• Chrome 中右键 Sources 面板 → “Settings → Ignore list”，检查是否有匹配当前文件路径的正则，误配会导致整个文件跳过断点
• 如果用 TypeScript，确保 sourceMap: true 且 .js.map 文件正确加载（Network 面板搜 .map 看状态码）

报错堆栈指向 bundle.js 第 1 行？必须看 mapped location

错误信息里写的 bundle.js:1:12345 没法直接定位源码，得靠 sourcemap 映射回原始文件。但 Chrome 有时显示“original location”灰色不可点，其实是 sourcemap 加载失败。

• 打开 DevTools → Settings → “Enable JavaScript source maps” 和 “Enable CSS source maps” 必须勾选
• 在 Network 面板过滤 .map，看对应 JS 文件的 sourcemap 是否返回 200；若 404，检查服务器是否漏配 Content-Type: application/json
• 堆栈中出现 webpack:///./src/… 是正常映射前缀，点它就能跳转到原始 .ts 或 .jsx 文件，别盯着 bundle.js 硬读

真正卡住的往往不是语法错误，而是 sourcemap 路径错位、构建产物未更新、或浏览器缓存了旧 map 文件——这些比逻辑 bug 更耗时间。