浏览器开发者工具是JavaScript调试核心现场，含断点调试、Console执行环境、Network请求分析、Performance性能定位四大功能，需依问题类型选择对应面板验证。
浏览器开发者工具不是“教程式玩具”，而是你写 JavaScript 时最直接的诊断现场。它不替你思考逻辑，但能立刻告诉你代码到底在哪儿卡住、变量何时变歪、异步链如何断裂。
打断点调试：比 console.log 更准的「暂停观察」
用 debugger 语句或在 Sources 面板点击行号设断点，执行到此处会暂停。此时可查看作用域内所有变量值、调用栈、当前 this 指向，甚至修改变量后继续运行。
- 别只依赖
console.log：它只能输出快照，且可能因异步/节流被吞掉或顺序错乱 -
debugger在生产环境必须删掉，或用条件包裹（如if (location.hostname === 'localhost') debugger;） - 函数内设断点后，若该函数被多次调用（比如事件回调），每次都会停；右键断点可设「条件断点」或「仅命中一次」
Console 面板不只是打印：执行上下文与快速验证
Console 不是日志窗口，而是当前页面上下文中的实时 JS 执行环境。你在页面任意时刻打开它，输入的代码都运行在当前页面全局作用域（或暂停时的局部作用域）下。
- 可直接调用页面已定义的函数，比如
getData()或user.profile.name - 支持多行输入：按
Shift + Enter换行，Enter才执行 -
$_是上一次表达式的结果，$0–$4是最近选中的 5 个 DOM 元素（Elements 面板中右键「Reveal in Console」也会赋值给$0） - 误输未定义变量会报
ReferenceError，但不影响页面运行——这是安全的沙盒
Network 面板抓异步请求：看清 fetch / XMLHttpRequest 真实行为
很多 JS 问题本质是数据没来、格式不对、状态码被忽略。fetch 成功不代表 HTTP 成功，XMLHttpRequest 的 onload 也不区分 200 和 500。
立即学习“Java免费学习笔记（深入）”；
- 勾选「Preserve log」防止页面跳转后清空记录
- 点击某个请求，在「Headers」看真实请求头/响应头；「Preview」和「Response」看结构化或原始响应体
- 右键请求 → 「Copy」→ 「Copy as cURL」可复现请求，排除前端代码干扰
- 注意「Initiator」列：能直接定位是哪个 JS 文件第几行触发了这个请求（比如
axios.js:123）
Performance 面板查卡顿：不是看 FPS，而是找 JS 执行热点
用户说「页面卡」，90% 不是渲染慢，而是某段 JS 占用主线程太久。Performance 面板录制后，重点看「Main」线程的火焰图（Flame Chart）。
- 录制前先清空控制台和缓存，避免干扰
- 展开高亮的长任务（红色块），往下钻到具体函数名，看哪一行耗时最多（例如
JSON.parse解析大字符串、未加防抖的resize回调） - 注意「Idle」区域是否被挤占：如果主线程几乎没有空闲，说明 JS 运行太密集
- 不要只信「Summary」里的总耗时——单次 20ms 的函数被调用 50 次，照样让动画掉帧
真正难的不是找到工具在哪，而是判断「此刻该看哪个面板」。比如接口返回空数组，先去 Network 确认响应体是不是真为空；再看 Console 有没有 TypeError: data.map is not a function；最后才考虑是不是断点没打对位置。工具不会自动归因，但能确保你质疑的每个环节都有证据支撑。
