Web Inspector 有什么新功能

一句话判断

Safari Web Inspector 在 Big Sur 上迎来了一波实用更新——更快的 JS 调试、改进的 CSS 审查、新的 Network 面板过滤功能，以及期待已久的 console.trace() 支持。

这场 Session 讲了什么

Web Inspector 是 Safari 内置的开发者调试工具，这场 Session 聚焦于 Safari 14 / macOS Big Sur 中 Web Inspector 的各项改进。

整体方向是让 Web Inspector 的调试体验更接近 Chrome DevTools 的水准。新增了 CSS 变量审查的增强、JavaScript 调试器性能优化（不再卡顿）、Network 面板更细粒度的过滤、以及 Storage 面板对 IndexedDB 的更好支持。

Session 还演示了如何通过 WebDriver（Safari 的自动化测试接口）进行远程调试，以及 Web Inspector 如何与 Safari Technology Preview 配合使用以获取最新功能。

值得深挖的点

CSS 审查体验的改进

Safari 14 的 Web Inspector 终于可以在 Styles 面板中直接展示 CSS 自定义属性（CSS Variables）的继承链。以前你要追踪一个 var(--color-primary) 到底从哪继承来的，只能手动往上翻 DOM 树。现在点击变量名就能跳转到定义处，还能看到完整的覆盖关系。

JavaScript 调试器不再拖后腿

之前的 Web Inspector 在调试大型 React/Vue 项目时，启用断点会让整个页面变得极度卡顿。Big Sur 版本重写了 JS 调试器的后端通信协议，减少了不必要的数据传输，断点命中时的暂停速度提升了数倍。对于有几千个 JS 文件的项目来说，这个优化是必须的。

代码片段

// Safari 14 Web Inspector 新增支持的 console 方法

// 输出调用栈 —— 终于！
function processData(input) {
    validate(input);
    return transform(input);
}

function validate(input) {
    if (!input) {
        console.trace("验证失败"); // 现在会输出完整的调用栈
    }
}

// console.table 改进：支持嵌套对象
const users = [
    { name: "张三", age: 28, address: { city: "北京" } },
    { name: "李四", age: 32, address: { city: "上海" } }
];
console.table(users); // 表格展示更清晰

/* CSS 变量审查增强 —— 在 Web Inspector 中可以直接追踪 */
:root {
    --color-primary: #007AFF;
    --spacing-unit: 8px;
}

.button {
    /* 点击 var() 里的变量名，直接跳转到 :root 的定义 */
    background-color: var(--color-primary);
    padding: var(--spacing-unit);
}

最佳实践

用 Safari Technology Preview 作为主力调试浏览器。它比正式版 Safari 领先 6 周，包含最新的 Web Inspector 功能，而且可以和正式版 Safari 并存，不会互相干扰。
善用 Network 面板的新过滤器。Big Sur 版本支持按资源类型、域名、请求方法等多维度组合过滤。调试 API 问题时，直接过滤 Fetch/XHR 加上特定域名，比以前翻一长串资源列表高效太多。
响应式设计模式下测试暗色模式。Web Inspector 的响应式模式现在可以直接切换 Light/Dark Appearance，不用再去系统设置里切换了。开发暗色模式适配时很方便。

还有什么值得关注

Web Inspector 现在支持远程调试 iOS/iPadOS 14 上的 Safari 页面，连接方式从 Wi-Fi 改为优先 USB，稳定性和速度都好很多。
WebDriver 在 Safari 14 中默认可用，不再需要手动 safaridriver --enable，跑 Selenium 测试方便了不少。
Storage 面板新增了对 Service Worker Cache 的查看和管理能力，PWA 开发调试终于不用盲人摸象了。