chrome DevTools 是最主流的javaScript调试工具，支持debugger断点、console高级日志、Network接口排查、Sources异步链路分析等功能，高效定位问题根因。
chrome devtools 是目前最主流、最实用的 javascript 调试环境，绝大多数问题用它就能定位到根因，不需要额外装插件或换工具。
如何在代码里主动打断点
最直接的方式是写 debugger 语句，浏览器执行到这一行会自动暂停。它比手动点行号打点更可控，尤其适合动态生成的函数或异步回调里——比如你不确定某个 promise.then() 是否被调用，就在里面加一行 debugger。
注意：debugger 在生产环境必须删掉，否则用户打开控制台就会卡住；如果用了构建工具（如 webpack/vite），可通过 process.env.node_ENV === 'development' 包一层来避免误入线上。
- 断点位置要靠近可疑逻辑，别堆在函数开头就完事
- 多个
debugger可以配合条件判断使用，比如if (id === 123) debugger - 在压缩后的代码里
debugger依然有效，但变量名可能被混淆，得看Sources面板右上角的“Pretty print”按钮（{}图标）格式化后再调试
Console 面板不只是输出 log
console.log() 太基础，容易漏关键信息；console.table() 查对象/数组结构、console.group() 做日志分组、console.time() 测执行耗时，这些才是日常提效的关键。
立即学习“Java免费学习笔记（深入）”；
一个典型场景：你想确认某个函数被调用了几次、每次参数是什么。与其反复改 console.log，不如用 console.trace() ——它会打出完整调用栈，一眼看出是谁触发的。
-
console.log('%o', obj)可以输出可交互的对象（点击展开），比直接console.log(obj)更准，因为后者在异步环境下可能输出的是“实时值”而非当时快照 - 在 Console 里直接输入变量名回车，能查看当前作用域变量（前提是没退出断点上下文）
- 右键某条日志 → “Store as global variable”，会生成一个临时变量（如
temp1），方便后续在 Console 里反复操作
Network 面板查接口问题比 console 更可靠
很多“数据没出来”的问题，其实不是 js 逻辑错，而是请求根本没发出去、被拦截了、返回了 4xx/5xx、或者响应体结构和前端预期不一致。这时候盯着 console.log(res) 看不如直接切到 Network 面板。
重点关注三件事：状态码、Response 标签页里的原始响应体、Headers 里的 Content-Type 和 access-Control-Allow-Origin。如果看到 Failed to load response data，大概率是服务端没返回合法 json 或 CORS 配置漏了。
- 勾选 “Preserve log”，防止页面跳转后请求记录被清空
- 右键某条请求 → “copy” → “Copy as fetch”，能一键生成可复现的 fetch 调用，方便隔离测试
- Filter 输入
XHR或fetch可过滤出 JS 发起的请求，避免被静态资源干扰
Sources 面板里怎么查异步链路
Promise、async/await、setTimeout 的执行顺序容易让人迷糊，光看代码很难理清实际执行流。DevTools 的 Async call stack（在 Call Stack 面板底部勾选）能显示“谁触发了这个异步任务”，比自己脑补靠谱得多。
比如你在 setTimeout 回调里加了断点，Call Stack 显示的可能是 setTimeout → task → 你的函数，这就说明它确实是宏任务；而 Promise.then 断点下看到的是 Promise.then → microtask，验证了微任务优先级更高。
- 断点打在
catch块里时，勾选 “Pause on caught exceptions”（右上角三个点 → Settings → Debugger）能让它在抛出瞬间停住，而不是等 catch 执行才停 - 想跳过某个库的代码（比如 node_modules），可以在右键对应文件 → “Blackbox script”，之后 stepping 时就不会钻进去
- 修改 Sources 面板里的 JS 文件并保存（Ctrl+S），会实时生效（仅限当前 tab，刷新即失效），适合快速验证修复思路
真正卡住人的往往不是不会用功能，而是忘了切换面板上下文——比如接口返回空数据，第一反应不该是翻 JS 代码，而是先去 Network 确认响应体；又比如变量值不对，别急着改逻辑，先在 Scope 面板里看看它此刻到底被赋成了什么。