Chrome DevTools 技巧

这页适合做“前端页面排障的第一现场工具表”。很多问题不用先去翻代码，只要先打开 DevTools 看控制台、网络、元素和性能，就已经能快速判断是前端、接口、缓存还是浏览器环境问题。

推荐排障顺序

遇到页面问题时，通常按下面顺序最省时间：

1. 先看 Console 有没有报错和警告
2. 再看 Network 请求是否成功、是否慢、返回了什么
3. 然后看 Elements / Computed，确认 DOM 和样式是否正确
4. 最后再用 Performance / Lighthouse 做性能与体验分析

快捷键

Console 技巧

// 表格显示
console.table([
  { name: "a", value: 1 },
  { name: "b", value: 2 },
]);

// 分组
console.group("API Calls");
console.log("GET /users");
console.log("POST /login");
console.groupEnd();

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

// 计数
console.count("click"); // click: 1
console.count("click"); // click: 2

// 条件日志
console.assert(x > 0, "x should be positive");

// 样式化输出
console.log("%c重要信息", "color: red; font-size: 20px; font-weight: bold");

// 复制到剪贴板
copy(document.title);

// 获取选中的元素
$0; // 当前选中元素
$("selector"); // querySelector
$$("selector"); // querySelectorAll

// 监听事件
monitorEvents(document, "click");
unmonitorEvents(document);

Network 面板

过滤请求

# 按类型
method:POST
status-code:404
domain:api.example.com
larger-than:1M
-has-response-header:cache-control

# 正则
/api\/v[12]/

模拟网络条件

• 打开 Network 面板
• 点击 "No throttling" 下拉
• 选择 Slow 3G / Fast 3G / Offline
• 或自定义：Add custom profile

复制请求

右键请求 → Copy → Copy as fetch / Copy as cURL

Elements 面板

// 强制元素状态
// 右键元素 → Force state → :hover / :active / :focus

// 编辑 HTML
// 双击元素文本直接编辑

// 隐藏元素
// 选中元素按 H 键

// 截图元素
// 右键元素 → Capture node screenshot

CSS 调试

• 点击颜色值可打开取色器
• 点击 box model 可直接编辑 margin/padding
• Computed 面板查看最终计算样式
• 点击属性旁的链接跳转到源文件

Performance 面板

1. 点击录制按钮
2. 执行要分析的操作
3. 停止录制
4. 分析火焰图：
   - 黄色：JavaScript
   - 紫色：渲染
   - 绿色：绘制

常见性能问题

• 长任务（Long Tasks）：超过 50ms 的任务
• 布局抖动（Layout Thrashing）：频繁读写 DOM
• 强制同步布局：在修改 DOM 后立即读取布局属性

Application 面板

- Local Storage / Session Storage：查看和编辑
- Cookies：查看、编辑、删除
- Service Workers：查看注册状态
- Cache Storage：查看缓存内容

Lighthouse

内置的网站审计工具：

1. 打开 Lighthouse 面板
2. 选择类别：Performance / Accessibility / SEO / Best Practices
3. 点击 Analyze page load
4. 查看评分和优化建议

高频使用场景

• 页面白屏 / 功能失效：先看 Console
• 接口异常 / 数据不对：先看 Network
• 样式错乱 / 布局异常：先看 Elements 与 Computed
• 页面卡顿 / 滚动掉帧：看 Performance
• 缓存、Cookie、Service Worker 问题：看 Application

把面板和问题类型对上，排障速度会快很多。

常见问题

请求明明发了，但页面没更新

先确认：

• Network 返回的数据是否正确
• Console 是否有运行时错误
• 页面是否命中了缓存或旧 Service Worker

改了 CSS 没生效

优先检查：

• 最终命中的选择器是谁
• 是否被更高优先级样式覆盖
• 是否有行内样式、:hover、媒体查询或 CSS 变量干扰

本地正常，线上异常

可以善用：

• Network 面板里的请求头 / 响应头对比
• 设备模式与限速模式
• 禁用缓存后重现问题

延伸阅读

• RESTful API 设计
• 前端测试指南
• Vue 3 / Nuxt 开发笔记

参考链接

• Chrome DevTools 文档 — 官方文档
• DevTools Tips — 技巧集合