WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Discover Web Inspector improvements

Discover Web Inspector improvements

SafariWebKitDeveloper Tools
观看原视频

Highlight

Web Inspector 新增 CSS Grid 可视化覆盖层、全类型断点配置和 Audit 编辑模式，让 Safari 调试体验追平 Chrome DevTools。

核心内容

调试 CSS Grid 一直是前端开发的痛点。你在 Styles 面板里写 grid-template-columns: 1fr 2fr 1fr，但元素实际落在哪一格，只能靠心算。Grid 嵌套多了，布局问题很难定位。

Web Inspector 今年加了 Grid Overlay。DOM 树里每个 Grid 容器旁边会出现一个 badge，点击后页面上直接画出网格线、轨道尺寸和区域名称。你可以同时开启多个 Grid 的覆盖层，滚动时也不会卡顿。

断点方面，以前只有 JavaScript 行断点支持条件判断和自定义动作。现在所有断点类型——事件断点、DOM 断点、URL 断点、异常断点——都能配条件和动作。你可以在 click 事件上设条件，只暂停在特定按钮上；也可以在网络请求断点上加动作，自动播放提示音。

Audit 功能以前只能导入导出 JSON 来编辑。今年加了 Edit Mode，直接在 Web Inspector 里写测试代码。内置了一套 Accessibility 测试，你还可以自定义规则检查设计系统合规性。

详细内容

CSS Grid 可视化覆盖层

开启方式很简单：

  1. 在 Elements 面板找到 Grid 容器，点击旁边的 Grid badge（01:20）
  2. 页面上立即显示彩色网格覆盖层
  3. 在 Layout 面板可以开关所有 Grid 的覆盖层，或单独控制某一个

Layout 面板提供的显示选项：

  • Track Sizes：显示每行/每列的轨道尺寸，如 1fr、min-content（04:04）
  • Line Numbers：显示正数和负数行号线索。负数从最后一个显式网格线开始倒数，方便用 -1、-2 做自适应定位（04:15）
  • Line Names：显示显式命名的网格线和基于区域名生成的线名（04:34）
  • Area Names：在区域中心显示名称，用粗线框出区域边界（04:43）
  • Extended Grid Lines：将网格线延伸到页面边缘，方便和其他元素对齐比较（04:58）

覆盖层性能做了优化，同时显示几十个 Grid 也能流畅滚动（05:11）。支持所有书写模式：竖排文字、RTL 方向以及组合模式（05:26）。iOS 15 和 iPadOS 15 远程调试时同样可用（05:35）。

实际调试场景：

/* 用 Grid Overlay 定位一个错位元素 */
.emoji-tile {
    grid-area: 4 / 6;  /* 第4行第6列 */
}

/* 改用负数线索，自适应网格变化 */
.emoji-tile {
    grid-area: -3 / -3;  /* 倒数第3行/列，始终保持在右下角 */
}

关键点：

  • Grid badge 在 Elements 树中标识所有 Grid 容器（02:35）
  • 覆盖层颜色可自定义，Web Inspector 会记住设置（03:42）
  • 三栏布局下可以同时看 Layout 面板和 Styles 面板（08:08）
  • 负数行号线索让布局更具弹性（09:02）

断点增强：所有类型都支持配置

Web Inspector 有五种断点类型（10:34）：

  1. Debugger/异常/断言断点 — 在 debugger 语句或异常抛出时暂停
  2. JavaScript 断点 — 在指定代码行暂停
  3. 事件断点 — 在 click、timeout、interval、animation frame 等事件处理时暂停
  4. DOM 断点 — 在 DOM 节点增删改或属性变化时暂停
  5. URL 断点 — 在 XMLHttpRequest 或 fetch 发起请求前暂停

右键断点选择 Edit Breakpoint，可配置：

  • Condition：表达式为真时才暂停。支持 Web Inspector Console API，如 $0（当前选中 DOM 节点）、$event（当前事件对象）（11:31）
  • Ignore Count：忽略前 N 次命中，适合循环内调试（11:52）
  • Actions：命中时执行的动作，包括：
    • Evaluate JavaScript — 在上下文中执行代码（12:21）
    • Log Message — 用模板字符串输出日志（12:29）
    • Play Sound — 播放系统提示音（12:34）
    • Probe Expression — 在 Probe 面板记录表达式结果的变化（12:38）
  • Emulate User Gesture：执行动作时模拟用户手势，可绕过需要用户交互的 API 限制（如自动播放视频）（12:56）
  • Auto-continue：执行完动作后自动继续，不暂停（13:20）

实际调试示例——只捕获特定按钮的 click 事件：

// 在事件断点条件中写入：
$event.target === $0  // 只暂停当前 Elements 面板选中的元素

关键点：

  • 条件表达式支持 Console API，如 $0、$event（15:55）
  • 动作支持模拟用户手势，方便测试受限制的 API（16:56）
  • 可以组合多个同类型动作（17:12）
  • 所有五种断点类型都支持完整配置（13:40）

Audit：在 Web Inspector 中编写自定义测试

Audit 用 JavaScript 编写，针对当前页面运行。可以检查 DOM 结构、设计系统规则、Accessibility 属性等（18:42）。

内置测试组：

  • Demo Audit — 演示 Audit 功能的工作方式（19:05）
  • Accessibility — 根据 ARIA 规范检查最佳实践，如图片是否有 alt 或 title（19:11）

点击 Edit 按钮进入编辑模式（20:15）：

// 自定义 Audit：检查字体族是否符合设计系统
function test() {
    const allowedFonts = ['ui-sans-serif', 'ui-serif', 'ui-monospace'];
    const offenders = [];

    for (const element of document.querySelectorAll('*')) {
        const fontFamily = getComputedStyle(element).fontFamily;
        const fonts = fontFamily.split(',').map(f => f.trim().replace(/['"]/g, ''));
        const isAllowed = fonts.some(f => allowedFonts.includes(f));
        if (!isAllowed) {
            offenders.push(element);
        }
    }

    return {
        passed: offenders.length === 0,
        details: offenders.map(el => ({
            node: el,
            message: `Unexpected font: ${getComputedStyle(el).fontFamily}`
        }))
    };
}

测试配置项：

  • Name / Description：测试名称和描述（21:04）
  • Version：最低支持的 Audit 版本，防止在不支持的 Web Inspector 中运行（21:07）
  • Setup Script：每个测试前执行的公共设置代码（21:17）
  • Test Function：返回 true/false 或结果对象（21:32）
  • WebInspectorAudit API：Audit 专用 API，详见 Web Inspector Reference（21:41）

关键点：

  • 默认的 Demo Audit 和 Accessibility 测试不能编辑，但可以复制后修改（20:27）
  • 修改自动保存，不需要手动导出导入（21:57）
  • 测试结果中失败的节点可以一键跳转到 Elements 面板（22:56）
  • Audit 可以导出为 JSON 分享给团队（25:27）

核心启发

  1. Grid Overlay 替代手动计算。调试 Grid 布局时先看覆盖层确认行列位置，再写 CSS，减少试错次数。
  2. 用 Audit 固化设计系统规则。把字体、颜色、间距等规范写成 Audit 测试，每次提交前自动检查，避免 “Comic Sans 惨案”。
  3. 事件断点 + 条件精准定位问题。不用在代码里插 console.log，设一个带条件的 click 断点，直接停在目标元素的处理函数里。
  4. 断点动作模拟用户手势测试 API。需要用户交互才能调用的 API（如 navigator.share），可以用断点动作模拟手势快速验证。
  5. Accessibility Audit 作为发布 checklist。每次发布前跑一遍内置的 Accessibility 测试，确保图片有 alt、表单有 label 等基础合规项。

关联 Session

评论

GitHub Issues · utterances