Discover Web Inspector improvements
Developer Tools 入门 20m

发现 Web Inspector 的改进

Discover Web Inspector improvements

2021年6月11日

在 Apple 官方观看视频

一句话判断

Safari Web Inspector 在 15 代的升级让它终于有了和 Chrome DevTools 一较高下的资本——CSS 变量检查、Flexbox 可视化调试和 Performance 面板是三个最实用的改进。

这场 Session 讲了什么

Safari 的 Web Inspector 在历史上一直被前端开发者吐槽「功能太弱」。Safari 15 带来了一次全面的升级，覆盖了样式检查、布局调试、性能分析和网络请求四个方面。

样式检查方面，CSS 自定义属性（CSS Variables）现在有了专门的检查面板。你可以在 Variables 面板中看到所有自定义属性的定义和当前计算值，还可以直接修改值来实时预览效果。之前的版本中，CSS 变量只能在 Styles 面板的规则列表里翻找，体验很差。

布局调试方面，Flexbox 和 Grid 布局现在有了可视化覆盖层。选中一个 Flex 容器后，Web Inspector 会在页面上画出 flex 线条、间距和对齐参考线。Grid 布局也有类似的网格线覆盖层。

性能分析方面，新增了 Timelines 面板中的 Rendering 和 JavaScript 时间线。你可以看到每帧的布局（Layout）、绘制（Paint）和合成（Composite）耗时，以及 JavaScript 的执行时间线。这对于定位页面卡顿的原因非常有帮助。

值得深挖的点

CSS Variables 的调试链路

之前调试 CSS 变量需要手动追踪 var() 引用链：找到使用变量的元素，然后一层一层往上看变量在哪里被定义。Web Inspector 15 新增了变量追踪功能，点击一个 var() 引用可以跳转到定义位置。如果变量被多层覆盖（比如 :root 定义了一版，.dark-theme 又覆盖了一版），Web Inspector 会列出所有定义并标注哪个生效。

Network 面板的请求阻塞功能

Safari 15 的 Network 面板新增了请求阻塞（Request Blocking）功能，可以手动屏蔽特定的 URL 模式。这在调试失败降级逻辑时非常有用——比如你想测试图片 CDN 挂掉后页面的 fallback 行为，不需要真的让 CDN 宕机，只需要在 Web Inspector 中屏蔽图片请求。

代码片段

/* 利用 Web Inspector 调试 CSS 变量层级 */
:root {
    --color-primary: #007AFF;
    --color-bg: #FFFFFF;
    --spacing: 16px;
}

/* 深色模式覆盖部分变量 */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #0A84FF;
        --color-bg: #1C1C1E;
    }
}

/* Web Inspector 中可以直接修改变量值，实时预览 */
.button {
    background-color: var(--color-primary);
    /* 在 Variables 面板中修改 --color-primary 的值 */
    /* 可以即时看到按钮颜色的变化 */
    padding: var(--spacing);
}
<!-- 在 Web Inspector 中使用 Console 的新 API -->
<script>
// 性能标记 API 配合 Timelines 面板使用
performance.mark('data-fetch-start');
fetch('/api/data')
    .then(r => r.json())
    .then(data => {
        performance.mark('data-fetch-end');
        performance.measure(
            '数据获取',
            'data-fetch-start',
            'data-fetch-end'
        );
        // 在 Timelines 面板中可以看到这段测量的精确时间
        console.log('数据获取耗时:', 
            performance.getEntriesByName('数据获取')[0].duration);
    });
</script>

最佳实践

养成用 Web Inspector 的 Storage 面板检查 Service Worker 缓存的习惯。PWA 的缓存问题是最难调试的 bug 之一——缓存的响应可能过期但没有被更新，导致页面显示旧内容。Storage 面板可以列出所有 Cache Storage 中的条目，支持按 URL 筛选和手动删除。

在性能优化时，先用 Timelines 面板录制一段用户操作，然后查看 Rendering 时间线中的紫色（Layout）和绿色（Paint）区块。如果 Layout 频繁触发（比如在滚动时），说明需要优化 CSS 选择器或者减少 DOM 操作。

还有什么值得关注

  • Console 面板现在支持 console.table() 的嵌套对象展示，调试 API 返回值更方便了。
  • Elements 面板中可以直接编辑 CSS Grid 的 grid-template-areas，改完页面实时响应。
  • Web Inspector 现在可以通过 Wi-Fi 连接到 iOS 设备进行远程调试，不需要 USB 线。
WWDC 2021