[!info] related notes

• 相关 MOC: 浏览器开发者工具 MOC, HTTP 与前端网络请求
• 关系笔记: Network 面板

DevTools Network MOC

知识总览

filters:
  and:
    - 'file.ext == "md"'
    - 'file.inFolder("z")'
    - 'this.file.links.contains(file)'
    - 'file.path != this.file.path'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: 知识总览
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

这张地图覆盖什么

这张地图覆盖 Network 面板中最常用的排障动作：看请求和响应、看 Waterfall 和 Timing、看缓存命中、看 Service Worker 是否接管、看 SSE 和 WebSocket 长连接。

从这里开始

1. 先看 Network 面板
2. 再看 请求与响应检查
3. 页面慢时补 Waterfall 与 Timing

核心笔记

• 请求与响应检查
• Waterfall 与 Timing
• 缓存调试
• Service Worker 请求调试
• SSE 与 WebSocket 调试

关系与对比入口

• Application 面板 - 看本地状态和 Service Worker
• 浏览器缓存体系 - 补缓存原理
• SSE、WebSocket - 补协议层原理
• 登录态异常排查路线
• 缓存不更新排查路线
• 流式连接排查路线

Related notes

• 浏览器开发者工具 MOC
• HTTP 与前端网络请求
• Network 面板
• 请求与响应检查