浏览器开发者工具核心是快速定位问题、验证假设、绕过阻塞；调试以观察为主（80%），断点次之（15%），console.log最少（5%）；debugger语句可精准中断、兼容无source map场景；console.log对象存在延迟求值问题，可用%o或JSON序列化捕获快照；Network面板需注意fetch归类与Initiator追踪；Sources面板应善用Ctrl+P搜索及webpack://等协议路径；异步调试务必开启Async Call Stack。
浏览器开发者工具不是“教你怎么点菜单”，而是帮你快速定位问题、验证假设、绕过阻塞。真正有效的调试，80%靠观察，15%靠断点，5%靠 console.log。
如何在代码执行中途暂停：用 debugger 语句比手动打断点更可控
当你不确定某段逻辑是否被调用，或想在动态生成的函数里设断点时，debugger 是最直接的方式。它会在运行到该行时强制触发断点，且不受源码映射（source map）缺失影响。
- 放在条件分支里可避免无意义中断：
if (user.id === 123) debugger; - 配合
console.table()使用，能一边看结构一边暂停：console.table(data); debugger; - 上线前务必删除或注释掉，否则用户打开 DevTools 就会卡住
为什么 console.log() 有时输出的是“引用值”而不是当时快照
Chrome 和 Firefox 对对象、数组的 console.log() 默认延迟求值——你展开看时，它才读取当前值。这意味着如果对象后续被修改，你看到的可能是“被污染后”的状态。
- 用
console.log(JSON.parse(JSON.stringify(obj)))强制深拷贝快照（仅限可序列化数据） - 对 DOM 元素用
console.log(obj.outerHTML)比console.log(obj)更可靠 - 用
console.log('%o', obj)触发立即快照（Chrome 支持，Firefox 部分支持）
Network 面板里看不到 fetch 请求？检查 Initiator 和 Filter 设置
fetch 请求默认归类为 XHR 类型，但有时会被过滤掉，尤其当它来自 Service Worker 或跨域重定向后。
立即学习“Java免费学习笔记（深入）”；
- 在 Network 面板顶部勾选
XHR和Fetch（新版 Chrome 已合并为一项，但旧版需手动开） - 点击请求 → 查看
Initiator列，确认是否被service-worker.js拦截或由Promise.then触发 - 右键请求 →
Block request URL可临时屏蔽某个接口，用于验证降级逻辑
Sources 面板里找不到自己的 JS 文件？别只盯着 Page 标签
现代前端工程打包后，原始文件名和路径基本消失。直接在 Sources 面板顶部搜索框输入文件名没用，得靠更精准的入口。
- 优先点开
Content scripts（插件脚本）、Snippets（手写临时脚本）、webpack://或app://（Vue/React 开发服务器映射） - 按
Ctrl+P（Win）或Cmd+P（Mac），输入!xxx可搜索未加载的 source map 文件 - 如果用了 Vite，确保启动时加了
--host参数，否则 Chrome 可能无法正确加载 sourcemap
最常被忽略的一点：调试异步链路时，不要只盯着 call stack，要打开 Async Call Stack（右键调用栈空白处开启）。否则你永远不知道那个 setTimeout 是从哪个 useEffect 里漏出来的。
