[!info] related notes

• 相关 MOC: 浏览器, 前端基础 MOC, 前端工程化 MOC, 前端性能优化 MOC, HTTP 与前端网络请求
• 关系笔记: 浏览器开发者工具
• 自动化扩展: chrome-devtools-mcp

浏览器开发者工具 MOC

这张地图覆盖什么

这张地图覆盖浏览器 DevTools 的核心面板、典型排障路径、面板协作方式和常见专项调试任务。

重点不是重复讲浏览器原理大全，而是回答：

• 出问题时先开哪个面板
• 在面板里具体看什么证据
• 不同面板之间怎么串成排障链路

从这里开始

1. 先看 浏览器开发者工具，建立整体分工和排障心智模型
2. 再熟悉 Elements 面板、Console 面板、Network 面板
3. 需要深入定位逻辑问题时，再看 Sources 面板
4. 需要处理性能、缓存、存储、PWA、泄漏问题时，再进入对应专项面板

按任务选择起点

页面看起来不对

• Elements 面板
• Rendering 面板
• Device Mode

点击没反应或逻辑异常

• Console 面板
• Sources 面板

请求失败、鉴权异常、缓存不对

• Network 面板
• Application 面板
• Security / Issues 面板

页面慢、卡顿、掉帧

• Performance 面板
• Network 面板
• 页面加载性能排查

页面越用越卡、怀疑泄漏

• Memory 面板
• 浏览器内存泄漏排查

核心面板

结构与样式

• Elements 面板 - 查看 DOM、样式命中、盒模型和布局结果
• Rendering 面板 - 打开绘制、滚动、媒体类型等渲染辅助开关
• Device Mode - 设备模拟、视口与触摸环境调试

运行时与逻辑

• Console 面板 - 看报错、执行表达式、验证运行时状态
• Sources 面板 - 断点、单步、调用栈、作用域和源码映射
• DevTools Sources MOC - Sources 面板的断点、作用域、Source Map 和覆写调试

网络与性能

• Network 面板 - 请求、响应、Header、Timing、缓存、发起链路
• DevTools Network MOC - Network 面板的请求检查、缓存、流式连接和 Service Worker 请求调试
• Performance 面板 - 主线程火焰图、长任务、布局绘制与交互卡顿
• DevTools Performance MOC - Performance 面板的火焰图、长任务、Layout Shift 和 Web Vitals 调试
• Memory 面板 - 堆快照、分配趋势、可疑保留引用

站点状态与规则

• Application 面板 - Cookie、Storage、IndexedDB、Cache Storage、Service Worker、Manifest
• DevTools Application MOC - Application 面板的 Cookie、Storage、PWA 与 Service Worker 调试
• Lighthouse - 实验室体检、性能与可访问性报告
• Security / Issues 面板 - 证书、混合内容、浏览器聚合告警

专项排障入口

• 页面加载性能排查 - 先从加载链路、阻塞资源和主线程成本切入
• 浏览器内存泄漏排查 - 先区分正常增长还是未释放引用
• 浏览器模拟打印模式的方法 - 用 DevTools 模拟打印媒体和 A4 视口
• chrome-devtools-mcp - 面向自动化代理的 DevTools 扩展

场景排障路线

• 登录态异常排查路线 - 适合排 401、Cookie 没带、Token 刷新失效、状态串号
• 缓存不更新排查路线 - 适合排强缓存、协商缓存、Service Worker 和旧资源命中
• 流式连接排查路线 - 适合排 SSE / WebSocket 握手、消息流、中间层压缩和缓冲
• 页面卡顿排查路线 - 适合排长任务、掉帧、主线程阻塞和弱机弱网表现

推荐学习路线

1. 浏览器开发者工具
2. Elements 面板
3. Console 面板
4. Network 面板
5. Sources 面板
6. DevTools Sources MOC
7. Performance 面板
8. DevTools Performance MOC
9. Application 面板
10. DevTools Application MOC
11. Memory 面板
12. Rendering 面板
13. Lighthouse
14. Security / Issues 面板

关系与对比入口

• 浏览器开发者工具 - 面板分工、排障路径和常见误区总览
• 浏览器渲染过程 - 理解 Performance / Elements / Rendering 面板证据的底层链路
• 浏览器缓存体系 - 理解 Network / Application 面板里的缓存证据
• 性能指标体系 - 理解 DevTools 中性能数据到底在解释什么

Related notes

• 浏览器
• 前端基础 MOC
• 前端工程化 MOC
• 前端性能优化 MOC