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 有时显示“o
riginal 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 更耗时间。
