What's new in Web Inspector

Highlight

Safari Web Inspector 新增了变量字体交互控件、合成样式警告、用户偏好模拟覆盖、滚动容器和事件监听器徽章，以及 Symbolic Breakpoints，让前端调试从字体排印到无障碍适配再到 JavaScript 断点都更加直观。

核心内容

字体排印检查

前端开发者经常遇到字体相关的问题：为什么这个文字看起来不够粗？为什么斜体看起来怪怪的？到底加载了哪个字体文件？

Web Inspector 的 Elements 标签页 Details 侧边栏中的 Font 面板可以回答这些问题。它显示选中元素使用的主字体名称、基本属性（字号、样式、字重、拉伸），以及字体特性（连字、小型大写字母、数字样式等）。

（02:49）

今年新增了一个重要警告：合成粗体和合成斜体。当字体文件缺少对应的粗体或斜体版本时，WebKit 会通过算法模拟——粗体是加粗笔画，斜体是把正文字形倾斜。字体设计师花大量时间专门绘制斜体，这些手工版本通常带有草书风格，和机械倾斜的效果完全不同。Web Inspector 现在会在 Font 面板中标注合成样式，提示你可能需要引入对应的字体文件。

（03:53）

变量字体（Variable Fonts）是另一个重点。一个变量字体文件可以包含多种风格变化的所有信息，比如字重、宽度、倾斜度。每个变化轴提供连续值范围，而不是静态字体文件中仅有的几个离散档位。

Web Inspector 今年为变量字体添加了交互式控件。选中一个使用变量字体的元素，Font 面板会列出所有可用的变化轴（如 wght、wdth、GRAD），每个轴都有滑块可以实时调整。拖拽滑块时，页面上的文字会立即更新，同时对应的 CSS 值会自动写入 Styles 面板。

（06:59）

用户偏好模拟

测试网站在不同无障碍设置下的表现，以前需要修改系统设置。这会影响整个 macOS，而不仅仅是当前测试的页面。

今年 Web Inspector 新增了 User Preference Overrides 弹窗。点击 Elements 标签页的新图标，可以覆盖当前 inspected 页面的用户偏好，包括：

• 配色方案（Color Scheme）：模拟 prefers-color-scheme 的 light/dark
• 减少动画（Reduce Motion）：模拟 prefers-reduced-motion
• 增强对比度（Increase Contrast）：模拟 prefers-contrast

这些覆盖只在 Web Inspector 打开时生效，不会影响系统其他部分。

（10:28）

元素徽章

Elements 标签页的 DOM 树中，Flex 和 Grid 容器已经有徽章标识。今年新增了两个：

• Scroll 徽章：标记内容溢出并产生滚动的容器。这在滚动条默认隐藏的系统中特别有用，可以快速发现意外的横向滚动。
• Event 徽章：标记绑定了 JavaScript 事件监听器的元素。点击徽章会弹出所有监听器的列表，包括事件类型、处理函数名称、源码位置、配置选项（冒泡、一次性等），还可以禁用监听器或设置事件断点。

（15:52）

断点增强

JavaScript 断点今年新增了 Symbolic Breakpoints。与在特定代码行设置断点不同，Symbolic Breakpoint 在指定函数被调用前暂停执行。

你可以精确匹配函数名，也可以用正则表达式匹配多个函数。这在调试内置 JavaScript API 调用（如 navigator.share()）或查找同名函数时特别有用。

（23:22）

断点还可以配置自动继续（Auto-continue）。配合 Log Message 或 Evaluate JavaScript 动作，这相当于在不停顿的情况下注入 console.log() 或修改变量值。

详细内容

变量字体的 CSS 使用

变量字体通过 @font-face 的 font-variation-settings 或标准 CSS 属性来控制。

@font-face {
  font-family: "Inter";
  src: url("Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

body {
  font-family: "Inter", sans-serif;
  font-weight: 450;
}

/* 暗色模式下加粗 */
@media (prefers-color-scheme: dark) {
  body {
    font-weight: 500;
  }
}

关键点：

• @font-face 中 font-weight: 100 900 声明了该字体支持的字重范围
• font-stretch: 75% 125% 声明了宽度变化范围
• 使用变量字体后，font-weight: 450 这样的非整百值也有效
• 静态字体只支持 100/200/300…900 的整百值

Web Inspector 中调整变量字体的交互方式：

/* 在 Web Inspector 的 Styles 面板中，调整滑块后会生成类似这样的 CSS */
.title {
  font-family: "Inter";
  font-weight: 680;
  font-stretch: 95%;
  font-variation-settings: "GRAD" 150;
}

关键点：

• font-variation-settings 用于控制自定义变化轴（如 "GRAD"）
• GRAD（Grade）轴改变字重但不改变字符宽度，适合响应式布局中需要微调对比度的场景
• 标准轴（weight、width）优先用 font-weight 和 font-stretch 而不是 font-variation-settings

用户偏好覆盖的 CSS 适配

/* 基础动画 */
.photo-zoom {
  animation: zoom-in 0.3s ease-out;
}

@keyframes zoom-in {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 为偏好减少动画的用户提供替代方案 */
@media (prefers-reduced-motion: reduce) {
  .photo-zoom {
    animation: fade-in 0.5s ease-out;
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

关键点：

• prefers-reduced-motion 检测用户是否开启了减少动画
• 不要直接移除所有动画，而是用更温和的动画替代
• 完全移除动画可能影响可用性，因为动画可以传达界面变化
• 在 Web Inspector 的 User Preference Overrides 中开启 Reduce Motion 即可测试这段代码

暗色模式适配：

.card {
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid #e0e0e0;
}

@media (prefers-color-scheme: dark) {
  .card {
    background: #1a1a1a;
    color: #f0f0f0;
    border-color: #404040;
  }
}

关键点：

• prefers-color-scheme: dark 匹配系统暗色模式
• 在 Web Inspector 中切换 Color Scheme override 可以即时预览效果
• 图标颜色也会随覆盖状态变化，方便确认当前生效的配色方案

Symbolic Breakpoint 的使用

在 Sources 标签页中设置 Symbolic Breakpoint：

// 假设你的代码中某处调用了 navigator.share()
// 但分享的 URL 不正确，你想找到调用点

// 在 Web Inspector 的 Sources 标签页中：
// 1. 点击 Breakpoints 区域的 + 按钮
// 2. 选择 "Symbolic Breakpoint"
// 3. 输入函数名：navigator.share
// 4. 点击设置

// 当点击分享按钮时，执行会在 navigator.share() 调用前暂停
// 此时可以检查 Call Stack 找到你的代码中的调用位置

// 配合断点动作自动修复问题：
// 在调用点设置一个普通断点，右键编辑：
// - 取消 "Pause"（勾选 Auto-continue）
// - 添加 Action: Evaluate JavaScript
// - 输入: data.url = "https://example.com/photo/" + photoId;

关键点：

• Symbolic Breakpoint 匹配函数名，不需要知道函数在源码中的具体位置
• 支持正则表达式，如 /share.*/ 匹配所有以 share 开头的函数
• 配合 Auto-continue 和 Evaluate JavaScript 动作，可以在不暂停的情况下修复运行时数据
• Call Stack 可以回溯到业务代码中的调用位置

事件监听器徽章的工作流

<!-- HTML 结构 -->
<div class="gallery">
  <figure class="photo" data-id="123">
    <img src="photo.jpg" alt="...">
    <button class="share-btn">Share</button>
  </figure>
</div>

// JavaScript 事件绑定
document.querySelector('.gallery').addEventListener('click', handlePhotoClick);
document.querySelector('.share-btn').addEventListener('click', handleShare, { once: true });

在 Web Inspector 中：

• .gallery 元素会显示 Event 徽章，点击后可以看到 click 事件监听器
• .share-btn 的 Event 徽章会显示 { once: true } 配置
• 可以临时禁用某个监听器来排查事件冲突
• 可以直接从徽章设置事件断点，下次触发时自动暂停

关键点：

• Event 徽章显示所有监听器，包括冒泡阶段捕获的事件
• 可以区分 addEventListener 和内联 onclick 绑定
• 禁用监听器是临时操作，刷新页面后恢复
• 事件断点会在事件触发时暂停在执行处理函数之前

核心启发

1. 用变量字体替代多字体文件方案

• 做什么：把网站中不同字重（Regular、Medium、Bold）的多个字体文件替换为单个变量字体文件
• 为什么值得做：减少 HTTP 请求数量，获得连续可调的字重和宽度，Web Inspector 的交互控件让微调变得直观
• 怎么开始：选择支持变量字体的字体（如 Inter、Roboto Flex），用 @font-face 声明范围，在 Web Inspector 中拖拽滑块找到最佳参数后复制 CSS

2. 建立无障碍适配检查清单

• 做什么：在 Web Inspector 中系统性地测试三种用户偏好覆盖：暗色模式、减少动画、增强对比度
• 为什么值得做：这些偏好覆盖直接影响大量用户的体验，且测试不需要修改系统设置
• 怎么开始：打开 User Preference Overrides 弹窗，逐个切换偏好状态，检查页面布局和交互是否正常适配。为 prefers-reduced-motion 准备替代动画方案

3. 用 Scroll 徽章消除意外滚动

• 做什么：在 Elements 面板中扫描 Scroll 徽章，定位并修复所有意外的横向或纵向滚动
• 为什么值得做：隐藏滚动条时，意外滚动很难被发现，可能导致内容被截断或用户困惑
• 怎么开始：检查带有 Scroll 徽章的元素，查看其 overflow 属性和子元素尺寸。常见修复包括调整 min-width、flex 属性或 white-space

4. 用 Symbolic Breakpoint 调试第三方代码

• 做什么：在调试涉及浏览器内置 API 或第三方库的问题时，用 Symbolic Breakpoint 定位调用链
• 为什么值得做：不需要在压缩后的第三方代码中找位置，直接按函数名打断点
• 怎么开始：在 Sources 标签页添加 Symbolic Breakpoint，输入目标函数名（如 fetch、localStorage.setItem），触发后检查 Call Stack 找到业务代码中的调用位置

5. 用 Event 徽章清理过期事件绑定

• 做什么：定期检查 Elements 面板中的 Event 徽章，确认每个事件监听器都是必要的
• 为什么值得做：重复或过期的事件绑定可能导致内存泄漏和意外行为
• 怎么开始：遍历页面关键交互元素，点击 Event 徽章查看监听器列表。确认事件类型、处理函数和配置选项是否符合预期。对不再需要的监听器在源码中移除

关联 Session

• Rediscover Safari developer features — Safari 开发者功能的全面更新，包括设备配对和响应式设计模式
• What’s new in CSS — CSS 新特性，包括容器查询和层叠层
• What’s new in WebKit — WebKit 引擎的新功能和改进
• Meet Safari Web Extensions — Safari Web 扩展开发
• Explore WKWebView additions — WKWebView 的新 API 和功能