Chrome DevTools 调试技巧：我常用的十几个功能

DevTools 功能很多，但日常真正高频的也就十几个。掌握它们，调试效率能翻几倍。

一、Elements：看样式到底从哪来

最有用的功能：Computed 面板

选中元素 → 右侧「Computed」→ 能看到最终生效的属性，点开箭头还能看到是哪条规则覆盖的。

调试「样式没生效」时：

1. 看 Styles 面板里有没有被划掉的规则（被覆盖）；
2. 看 Computed 里最终值是多少；
3. 用筛选框搜属性名，定位是哪条规则在起作用。

强制状态：点 :hov 按钮可以强制 :hover / :focus / :active，调试 hover 样式不用一直把鼠标放上面。

查看布局：Flex/Grid 容器旁会显示角标，点开能可视化看到主轴、间距、网格线。

二、Console：不只是 console.log

console.log(a, b);              // 普通
console.table(data);            // 数组/对象表格显示，看列表数据特别爽
console.dir(element);           // 展开 DOM 对象的属性
console.group("分组"); ... console.groupEnd();
console.time("耗时"); ... console.timeEnd("耗时");
console.assert(x > 0, "x 应该大于 0");

// 计数
console.count("调用次数");

// 在 Elements 面板选中元素后，Console 里用 $0 引用它
$0.style.border = "1px solid red";

// $_ 是上一个表达式的结果
$$(".card").length        // 相当于 querySelectorAll

保留日志：勾选设置里的「Preserve log」，页面跳转后日志不丢——调试重定向问题时必须有。

三、Network：看请求发生了什么

关键列：

实用功能：

• Disable cache：勾选后忽略缓存，调试「改了没生效」必备；
• Throttling：模拟慢网络（Fast 3G），看出首屏到底多慢；
• 点请求看 Timing 标签：DNS / 连接 / TLS / 等待 / 下载各花多久；
• 右键请求 → Copy → Copy as cURL，把请求复制到命令行复现。

筛选技巧：

status-code:404        # 只看 404
larger-than:100k       # 大于 100KB 的资源
domain:cdn.example.com
-domain:example.com    # 排除
method:POST

四、Sources：断点调试

普通断点：在行号上点一下。

条件断点（右键行号 → Add conditional breakpoint）：

i === 100              // 只在 i 为 100 时停
user.id === "abc"

调试循环里的问题必备，不用手动点几百次「继续」。

DOM 断点：Elements 面板右键元素 → Break on → 属性修改/子树修改/节点删除。用来找「是谁改了我的 DOM」。

XHR 断点：Sources 右侧 → XHR/fetch Breakpoints，输入 URL 片段，请求发出时自动暂停。

黑盒脚本：右键第三方脚本 → Blackbox script，单步调试时跳过它。

调试按钮：

五、Application：看存储

• Local Storage / Session Storage：看和清空缓存的选择；
• Cookies：看过期时间、HttpOnly、SameSite；
• Cache Storage：Service Worker 缓存；
• 点「Clear site data」一键清空（调试缓存问题时好用）。

六、设备模拟

点工具栏的手机图标（或 Ctrl+Shift+M）：

• 预设机型（iPhone、Pixel）；
• 自定义分辨率；
• 模拟触摸；
• 模拟网络速度。

但真机测试不可替代。模拟器看不出真实的触摸手感、字体渲染和性能表现。

七、Performance：找性能瓶颈

录制 → 操作页面 → 停止，会给出火焰图：

关注点：

• 超过 50ms 的任务会被标红（Long Task），是会卡顿的元凶；
• 大量 Layout / Recalculate Style 说明频繁触发重排；
• 勾选「Screenshots」能看到逐帧截图。

八、Lighthouse：一键体检

Lighthouse 面板 → 选类别 → Analyze：

分数会波动，看趋势和建议项比看绝对分数有用。同一页面多跑几次取中间值。

九、几个快捷键

命令面板里试试输入：

• theme → 切换 DevTools 深浅色
• screenshot → 截图（可截全页）
• coverage → 代码覆盖率（找出没用到的 CSS/JS）

十、调试本站这类站点

本站是纯前端渲染，调试时注意：

1. 改了 posts.js 没生效 → 勾选 Disable cache 刷新；
2. 想看渲染出的 HTML → Elements 面板里展开 #app；
3. 路由问题 → Console 里输 location.hash 看当前值；
4. 主题没记住 → Application → Local Storage 看 baize-theme。

DevTools 不用全学，先把 Console、Network、Elements 三块用熟，剩下的用到了再查。