1
2
3
4
5
6
7
8

1. 打开任意网页
2. 鼠标右键 → "检查"（或按 F12）
3. Elements 面板左侧是 DOM 树
4. 选中一个元素 → 右侧 "Styles" 面板是它的所有 CSS
5. 任意属性可以：
   - 取消勾选 = 临时禁用
   - 双击值 = 临时改值
   - 加新属性 = 临时添加

1
2
3

- 右侧 Styles 面板 → 点击选择器链接
- 跳到 Sources 面板对应 CSS 文件
- 复制修改后的内容到本地项目

1
2
3
4

Elements → Computed 面板：
- 选中元素所有"最终生效"的 CSS（不是源码）
- 包含继承值、用户代理默认值
- Box Model 图：可视化 margin / border / padding / content

1
2
3

Elements 面板 → 选中元素 → :hov 按钮
→ 勾选 :hover / :active / :focus / :visited
→ 即使鼠标不在元素上也能看到 :hover 状态

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// 格式化输出
console.log('普通');
console.info('信息');
console.warn('警告');
console.error('错误');
console.table([{name:'Alice',age:30},{name:'Bob',age:25}]);
console.group('Group 1');
console.log('inside group');
console.groupEnd();

// 计时
console.time('fetch');
await fetch('/api/data');
console.timeEnd('fetch');

// 断言
console.assert(x > 0, 'x 必须为正');

// 对象展开
console.dir(document.body, {depth: 2});

1
2
3
4
5

$_     // 上一次 console 输出的结果
$0~$4  // Elements 面板最近选中的 5 个元素
$('#id')     // document.querySelector 的简写
$$('div')    // document.querySelectorAll 的简写
$x('//div')  // XPath 选择

1
2
3
4

Console 面板 → 点眼睛图标
→ 输入 document.title
→ 顶部实时显示当前 title（不打印）
→ 适合观察"页面是否被 XHR 改了状态"

1
2
3

1. 行断点：Sources 面板点击行号
2. 条件断点：右键行号 → "Add conditional breakpoint" → 写表达式
3. 事件断点：Sources → Event Listener Breakpoints → 勾选事件

1
2
3
4
5

F8 / F5         继续执行
F10 / F6        单步跳过（Step Over）
F11 / F7        单步进入（Step Into）
Shift + F11     单步退出（Step Out）
Ctrl + F8       临时禁用所有断点

1
2
3
4

Settings → Blackboxing → Add pattern
→ 写 /node_modules/.*\.js$
→ 调试时跳过第三方库（jQuery / React 源码）
→ 只调试自己写的代码

1
2
3

Sources → XHR/fetch Breakpoints → Add pattern
→ 写 /api/
→ 每次请求 /api/xxx 都会自动断点到"发起请求"那一行

1
2
3
4
5

Network 面板：
- All / XHR / JS / CSS / Img / Media / Doc
- 红色 = 失败
- Status / Method / Type / Size / Time / Waterfall
- 右键 → Copy → Copy as cURL（命令行重放）

1
2
3
4
5
6
7

Network 面板 → Throttling 下拉
- Online（默认）
- Slow 3G
- Fast 3G
- Slow 4G
- Fast 4G
- Add custom...（自定义）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

Block request URL：
- Network 面板 → 右键请求 → Block request URL
- 输入匹配的 URL pattern（如 /api/track）
- 此后该请求永远 404
- 用于：屏蔽埋点、屏蔽广告追踪、看页面"无脚本"渲染

Override content：
- Sources 面板 → Overrides 子标签 → Select folder for overrides
- 本地文件夹映射到页面
- 改本地文件 → 页面立即生效，**不刷新**（比 Live Reload 还快）

1
2
3

Network 面板 → 右键 → Save all as HAR with content
→ 同事拿到 HAR → Network 面板 → 右键 → Import HAR file
→ 复现你的网络环境（含响应体）

1
2
3
4

1. Performance 面板 → 点录制按钮（或 Cmd/Ctrl + E）
2. 正常操作页面（点击、滚动、加载）
3. 再次点录制按钮停止
4. 自动生成火焰图 + Summary

1
2
3
4
5

- FCP（First Contentful Paint）    首次内容绘制
- LCP（Largest Contentful Paint）   最大内容绘制
- TTI（Time to Interactive）        可交互时间
- TBT（Total Blocking Time）        长任务阻塞
- CLS（Cumulative Layout Shift）    布局偏移

1
2
3

Main 线程的黄色/红色块 = 长任务（> 50ms）
→ 点击 → 下方 Summary 看哪个函数耗时
→ 双击跳到 Sources 面板对应代码

1
2
3

Lighthouse 面板 → 选择 Performance / Accessibility / Best Practices / SEO
→ Generate report
→ 100 分制报告 + 优化建议

1
2
3
4
5
6
7

Application 面板：
- Local Storage       key-value 持久存储
- Session Storage     关闭标签页清空
- IndexedDB           大容量结构化数据
- Cookies             HTTP-only 也能看
- Cache Storage       Service Worker 缓存
- Service Workers     注册的 SW

1
2

Application → Storage → Clear site data
- 一次清空 LocalStorage / SessionStorage / Cookies / Cache / IndexedDB / SW

1
2

Application → Service Workers → Offline 勾选
→ 即使网络正常，页面也走 SW 缓存（验证离线体验）

1
2
3
4

1. F12 → 点左上角"切换设备"图标（或 Cmd/Ctrl + Shift + M）
2. 选预设设备（iPhone / iPad / Galaxy / Pixel）
3. 或自定义分辨率、DPR
4. 顶部还有 Throttling 滑块（模拟低端机）

1
2
3
4
5
6
7
8
9

Android：
1. 手机开"开发者选项" + "USB 调试"
2. USB 连电脑
3. Chrome 地址栏 → chrome://inspect → 看到设备
4. 点 inspect → 弹出 DevTools（**调试的是真机上的页面**）

iOS：
1. Mac Safari → Develop → [你的 iPhone] → 选择页面
2. 弹出 Web Inspector（**功能类似 Chrome DevTools**）

1
2
3
4

1. 电脑和手机连同一 Wi-Fi
2. 电脑 DevTools → Settings → Devices → Add custom device
3. 输入手机的 IP + 端口（手机开 Chrome → 设置 → 启用 USB 调试 + 端口转发）
4. 电脑 DevTools 直接看到手机页面

1
2
3

Sources 面板 → Snippets 子标签 → New snippet
→ 写 JS 代码 → Ctrl + Enter 执行
→ 代码片段永久保存，下次 F12 还在

1
2
3
4
5

// 改所有外部链接为新标签打开
document.querySelectorAll('a[href^="http"]').forEach(a => {
  a.target = '_blank';
  a.rel = 'noopener noreferrer';
});

1
2
3
4
5
6

DevTools → Recorder 面板（或 Performance → Record → Save as profile）
1. 点 Start recording
2. 手动操作页面（点击、输入、滚动）
3. Stop
4. 自动生成 Playwright / Puppeteer 代码
5. 复用 → CI 自动化

1
2
3
4
5
6
7

Cmd/Ctrl + Shift + P → 调出命令面板
常用：
- "Show Coverage"  代码覆盖率（哪些 JS/CSS 没用到）
- "Capture full size screenshot"  全页截图
- "Capture node screenshot"  选中节点截图
- "Show sensors"  模拟地理位置 / 设备方向
- "Show rendering"  模拟视觉缺陷（色盲 / 视力模糊）