Web Inspector 的新增功能

♪ ♪

Razvan：大家好！ 我是 WebKit 开发者 体验团队的工程师 Razvan 在此向你介绍 我们今年对 Web Inspector 所添加的新功能和做出的改进 Web Inspector 是 macOS 系统 Safari 浏览器的一部分 是一套强大的工具 允许你检视网站、网页 App、 网络扩展和主屏幕网页 App 的 所有资源和活动 很高兴向你展示我们自去年以来 添加的一些新功能和做出的改进 如新的字体排印检视工具、 模拟用户偏好设置、 带有事件监听器 和滚动容器节点的新标识 以及通过增强断点 来改进 JavaScript 调试体验 如果你以前没有使用过 Web Inspector 则需要启用该功能 打开 Safari 浏览器的“设置”窗口 切换到“高级”选项卡 在底部 你可以找到 “为网络开发者显示功能”的设置 点击复选框启用此功能 菜单栏中的”开发”菜单现已可用 你可以使用名为 Show Web Inspector 的菜单项 或在任意网页按快捷键 Option+Command+I 来打开 Web Inspector

今年 我们对所有 Safari 浏览器的 开发者功能进行了很多改进 如简化了设备配对 和检视网页内容的方法 加快了模拟器打开网页的速度 更新了响应式设计模式 以及许多其他功能 想要进一步了解更多信息 请观看今年 WWDC 的 “重新发现 Safari 浏览器 开发者功能”专题讲座 启用 Web Inspector 后 我们从字体排印检视的 新工具开始看起 网络开发者 使用自定义字体来创建丰富内容 这种字体既清晰又突出 但在网络上字体排印并不容易 首先需要加载正确的字体文件 字体必须是浏览器支持的格式 并有相应功能 字体应该包括 其所代表书面语言的正确字形 此外 有许多 CSS 属性 会影响字体在屏幕上的呈现方式 其中的大多数都可以通过级联继承 有时会导致混淆 比如 “到底使用了哪种客户端字体？” 或者“为什么用了粗体字？” 又或者“是否真的是斜体？”

Web Inspector 可用来 协助使用多种字体排印检视工具 你可在字体面板的“元素”选项卡的 “详细信息”侧边栏中找到该功能

其显示所选元素上 使用的字体的属性和功能 例如所使用的主要字体的名称 你可以将其作为参考来快速检视 是否确实使用了你想要的字体 请记住 该功能只标识主要字体 如果所选节点包含 没有字形的主字体字符 将为这些字符使用备用字体 接下来 字体面板 显示基本字体属性的摘要 如字体大小、 样式、粗细和拉伸程度

还有一部分显示了 支持的字体功能属性及其使用值 根据字体支持的内容 这些选项可以切换字体的特殊方面 如连字、 小型大写字母而非小写字符、 特殊数字样式以及许多其他方面 今年新增的字体面板 会显示合成粗体及斜体字警告 什么是合成风格？我们以斜体为例

斜体字通常在其原字体文件中显示 与常规直立样式的字体文件分开 当缺少合适的斜体字时 WebKit 会为此生成一个人工表示 其在常规直立字体样式上运行算法 并倾斜单个字形以产生倾斜样式 这就是所谓的合成斜体字

字体设计师设计斜体字时非常注意 通常 斜体字 并不是直立风格的倾斜版本 而是一种特殊字体 专门设计来传达一种特殊的美学 合成粗体也有类似的情况 其字形的笔画被人为地弄得更粗 请记住 并非所有字体都支持这一功能 Web Inspector 现在会 在使用合成粗体或斜体时发出警告 显示在字体面板的 基本属性中的合成权重样式旁边 此警告可提示 未加载预期的字体文件 但有时 字体文件可能不支持 你想要的确切字体数值 此时可变字体便可发挥作用 什么是可变字体？ 简言之 可变字体是一种字体格式 可以在单个文件中包含 为一种字体生成 多种样式变化所需的所有信息 如粗细、宽度、斜度等

对于每种支持的样式 可变字体都有一系列数值 而静态字体文件中只有几个离散值 可变字体给了你更多选择 找到适合你内容的风格 可变字体甚至功能更强大 字体设计者让 字体的几乎每个方面都可配置 从笔画的粗细、到字形的曲线、 再到字符的宽度等等 可变字体有着无限可能 可变字体中 可修改的所有参数 都以变化轴表现出来 要知道哪些可调整 用户需要阅读字体的文档 或使用特殊工具显示这些信息

Web Inspector 在这方面能提供帮助 当你检视使用可变字体的元素时 字体面板会显示支持的变化轴列表 字体面板会显示每个字体的轴标签 包括一个四个字符的标识符、 一个可选的轴标签、 支持的最小值和最大值 以及当前值或者默认值 (如果 CSS 中没有指定)

今年 我们添加了交互式控件 来编辑变化轴的数值 并在检视过的页面上实时查看结果 这是调整字体样式很好的方法 直到你将字体调整得恰到好处 让我来示范一下 这是个为旅游摄影博客建立的网页 网页有我想要的布局 有一个照片库和标签导航 但仍然不确定标题的外观 右键点击以检视 heading 元素

在字体面板中 可以看到其使用了可变字体

我知道这些是因为 有这些可以控制调整变化轴 例如 我可以拖动权重轴的滑块 这一操作将立即更改 被检视页面上标题的字体粗细

请注意相应的 CSS 字体粗细属性 是如何写入样式面板的 静态字体只有几个字体 粗细以 100 为增量 但使用可变字体 可以选择变化轴范围内的任何值 我们也试试宽度的变化轴 看看其宽窄是否有所变化

我也可以在轴值输入字段中键入 或者按住向上或向下键 以精确的增量更改值

我喜欢这个精简后的版本 我想要字体粗一点 但希望它保持这个宽度 可变字体还提供了 一个自定义变化轴来改变字体等级 当我拖动滑块时 请注意 单个字符在适当位置变粗 没有像更改权重轴时那样移动位置

看起来不错 要将这些更改整合回我的项目中 可以从样式面板 或更改面板复制新的 CSS 属性

我们已经了解了如何检视字体排印 以及如何用可变字体调整字体样式 现在 来到 Web Inspector 的另一个新特性 该特性允许你模拟用户偏好设置 从而确保你构建的内容 适应用户需求 所有 Apple 产品 都提供各种设置 允许用户配置自己的设备 以适应自身需求和偏好 如 macOS 上辅助功能设置 这些设置控制内置的屏幕朗读器、 旁白或显示偏好设置 这些设置控制可以减少动态效果、 增加颜色对比度、滤色器等等 用户在设备上最常做的事之一 就是浏览网页 因此 建立适合所有人的 网站和网页 App 十分有意义 要做到这一点 你有时需要 像其他人 操作用户偏好设置时一样体验网络

要测试你的网站 比如说 减少变动的偏好 你可以去 macOS 上的辅助功能里设置 但该选项会影响整个系统 不仅仅是 Safari 浏览器和你的网站 通常你会仅在测试页面进行设置

为了帮助你进行设置 我们在 Web Inspector 中 引入了一个新工具来模拟用户偏好设置 点击“元素”选项卡中的 “新建”图标 显示用户首选项覆盖弹出窗口 此处会显示一组切换键 用于在 Web Inspector 打开时 覆盖被检视页面的用户首选项 这些首选项 映射到 CSS 媒体功能 你可以使用这些功能 来调整网页的样式和行为 例如 对配色方案的首选项 映射到 CSS 中的首选项 prefers-color-scheme 功能 以下是使用方法： 你可以为默认 灯光配色方案设置元素样式 然后 使用首选颜色方案媒体功能 来检查深色配色方案是否是首选 并更新样式 通过使用用户首选项 覆盖弹出窗口来检查页面是否适应 在外观部分 将配色方案首选项覆盖为深色 图标颜色改变就表示覆盖已应用 当覆盖处于活动状态 且 Web Inspector 处于打开状态时 将应用深色配色方案的样式 这个配色方案控件曾是独立按键 现在该按键在弹出窗口中 加入了首选项覆盖的其他控件

接下来 我将向你展示 如何设置减少动态效果的偏好 下一部分 将展示一段有很多动态效果的画面 如果你对此会感到不适 你可以跳过接下来的三分钟 回到本页面 当点击照片放大时 这些动态效果可能有点太多了

有些用户可能会被 快速突然的动态效果弄得晕头转向 尤其是该动作在 z 轴上产生时 会引起不适 如恶心或头痛 这绝对不是一次舒服的经历 用户可以在设备上 设置减少动态效果的偏好 从而表明其希望网站 和网页 App 适应 美国网络开发者应该对此表示尊重 这就是首选减少动态效果 CSS 媒体功能有用的地方 如果动画只是为了装饰 那完全可以去除 但是请记住 有些动画有助于在界面中传达意思 删除动画会影响使用 更慢更细微的淡入淡出动画或许可以 很好地显示动作效果 也可以满足用户需求 先在我的网页上试试这一改变 首先 我将检视照片 并在 Web Inspector 的 Elements 选项卡中选择 figure 元素

该操作将在样式面板中 显示其所有匹配的 CSS 规则 下面是 CSS 属性 将动画设置为具有大量动态效果 这就默认开启了 接着 我将点击此 CSS 规则的 源代码位置 跳转到样式表中定义其位置

这一步会打开 Sources 面板 并将我放在 CSS 规则旁边 该规则包含我想要更改的动画 取消之前准备的这段代码的注释 这段注释受 prefers-reduced-motion CSS 媒体功能保护 这里将动画改为淡入淡出 而不是缩放照片 我还增加了动画持续时间 这样就不会感觉太过突然

现在 再次点击页面上的一个图片 看看是什么样子

哦！还在运行相同的动画 这是因为我定义了 受 prefers-reduced-motion 媒体功能保护的新动画 但该页面仍尊重 该首选项的默认系统值 该值设置为关闭 调整一下 点击返回到 Elements 选项卡 在这里打开 用户首选项覆盖弹出窗口

在辅助功能部分打开弹出菜单 覆盖用户首选项“Reduce motion”

更改系统上的默认值 并将其设置为打开

现在 再点击我页面上的一张照片

看 这张照片现在就慢慢消失了 取消了让人头晕的动态效果 对喜欢减少动态效果的用户来说 这是个更好的体验 我会将这些更改整合回我的项目中 用户偏好设置覆盖弹出窗口 “增加对比度” 映射到 prefers-contrast CSS 媒体功能 理想情况下 我们希望为每位用户构建 具有高水平颜色对比度的内容 但如果因设计系统受到了限制 你可以使用该媒体功能来调整风格 以满足习惯高对比度的用户 然后 检查被检视页面上的样式 是否能适应相关改动 将“增加对比度”的首选项 设定为开 我们希望你使用这些功能 来创作更多用户喜欢使用的内容 接下来我们将向你展示 Web Inspector 的 Elements 选项卡中 新元素的标识 Elements 选项卡的“节点树”视图中 你可以在充当 CSS Flex 和 CSS Grid 容器的 元素旁边看到标识 元素标识是一种速览 特别感兴趣节点的方法 在这种情况下 创建 CSS Grid 或 Flex 布局上下关系的节点 你可以点击 grid 和 flex 元素标识 来切换该节点的专用页面覆盖 标识的突出显示颜色 与页面覆盖的颜色相匹配 CSS Grid 和 Flexbox 页面覆盖显示了 显示线条、间隙和决定布局的 可用空间的指南 要进一步了解有关如何调试带有 页面覆盖的 CSS Grid 和 Flexbox 布局 更多信息 请观看往年讲座视频 要调试的布局问题中 最难解决的就是不需要的滚动效果 就像一个容器因其内容物 与容器宽度不符而水平滚动 当默认情况下 滚动条不可见时 这种类型的问题 可能会很长时间存在 难以发现 为帮助你识别不需要的滚动效果 我们添加了一个新的元素标识 显示在滚动条旁边 当某元素的内容 溢出边界并应用滚动条时 该标识会在节点树中 提供快速的视觉提示 我们来看一个常见的不需要 应用滚动效果的例子以及修复方法 回到页面 我们看到照片库顶部 这些标签看起来布局很好 利用到了所有可用的水平空间 但当我尝试滑动时 我注意到库中有个短的水平滚动条 这不是我想要的效果 最后一个标签被切掉了少许 调整窗口大小 反而更难看了 在 Elements 选项卡的节点树中 我注意到 标签旁边有一个“滚动”标识 点击这个元素 在样式面板中显示 其匹配的 CSS 规则 这个 Flexbox 容器 看上去没问题 其弹性项目和标签本身怎么样？

最小宽度属性的数值过于精确 看起来很奇怪 这是一次初步尝试 是为了告诉浏览器到底要做什么 而不是我想要什么 让浏览器自己去计算

为解决这个问题 我将注释掉这个最小宽度声明 现在 每个标签 需要多少空间就占用多少空间 但是还有很多闲置的空间 为解决这个问题 我们要添加 一个值为 1 的 flex 属性

该操作会将 未使用的空间分配给每个标签 以让其填满容器 而且不再有不需要的水平滚动 节点树中容器旁的 “滚动”标识现已消失 证实了这一点 接着 我会向你介绍新的活动标识 该标识出现在附加了 JavaScript 事件监听器的元素旁边 其既适用于内置事件 如指针或 UI 事件 也适用于你在代码中 调度的自定义 JavaScript 事件 在节点树中 查找旁边带有事件标识的元素 并点击标识以显示一个弹出窗口 其中包含附加到 该元素的所有事件监听器 你在此处可以获得 每个事件监听器的概述： 即事件类型、 处理事件的 JavaScript 函数名称 以及定义该函数的源代码中的位置 事件监听器的各种配置选项 比如它是否在 DOM 树中冒泡 或是否在运行一次后自动删除 此外还有一个 选项可以禁用事件监听器 这样你就可以 在不运行它的情况下调试代码 或者 如果你想逐步调试代码 你可以为其设置一个事件断点 断点将在下次调用处理程序时 暂停 JavaScript 的执行 这是我们讨论 改进断点调试体验的好机会 调试 JavaScript 时 你可能习惯于在代码中添加 console.log() 语句 另一方面 断点是一种很有效的调试方式 可以暂停并单步执行 JavaScript 而不必更改源代码

如果你以前没有使用过断点 最简单的方法是 在 Sources 选项卡 点击脚本文件上的行号 该操作将在脚本的该行上 设置一个 JavaScript 断点 下次该行将要运行时 Web Inspector 将在 该点暂停 JavaScript 执行 暂停时 你可以观察调用栈 检视 scope 中 对象和变量的状态 甚至可通过控制台对它们进行更改

你可以继续执行 JavaScript 也可以使用顶部的单步执行控件 一次单步执行一个表达式 你可以通过右键点击断点 并选择编辑断点来配置断点 你可以在此处设置 许多选项来控制何时命中断点 甚至在命中时运行操作

让我们来看看其中的几个应用 你可以通过为断点 设置条件来控制断点何时命中 该设置将在设置断点的 同一范围内评估 JavaScript 当条件为真时 断点将命中 有时 你可能会 发现多次跳过断点更容易 例如 在一个循环中 你对最初几次迭代不感兴趣 可以在此处设置忽略断点的次数 还可以在遇到断点时运行操作 比如评估一段 JavaScript 该操作将在 设置断点的同一范围内运行 在继续之前 可以使用它来修改脚本的状态 还可以使用表达式 将消息记录到控制台 这些表达式可以访问 JavaScript 暂停时变量和对象的状态 这类似于在代码中 添加 console.log() 语句 但不必修改源代码 你还可以使用探测表达式操作 而非将变量和对象记录到控制台 该操作可以让你检视 Sources 选项卡细节侧边栏 面板中给定表达式的状态 当然 这些操作非常有用 但有时只想运行表达式 而不必在断点处 实际停止并手动恢复 在这些情况下 使用选项在 计算表达式后自动继续 此选项使 Log messages 操作行为 类似于 console.log() 语句： 表达式会记录 但不会暂停 同样 你可以 在断点位置评估 JavaScript 然后继续 如同代码已经整合到了源代码中 你还可以设置许多其他类型的断点 点击断点部分中的加号按钮 以显示可以设置的所有断点的列表 例如当即将通过 fetch() 或 XMLHTTPRequest 等方法 发出网络请求时 触发的 URL 断点 类似于我们之前在事件标记中 看到的“Click”的事件断点 在处理微任务、动画帧、 超时或间隔时触发的断点 以及今年新增的添加符号的断点 以便在函数即将调用之前暂停 符号断点有助于调试 对内置 JavaScript 函数的调用 或暂停多个同名函数 添加符号断点时 可以根据需要指定或通用 要么匹配完全函数名 包括区分大小写 要么中断多个匹配模式的函数 若你不记得完整函数名 请使用正则表达式 让我们看看符号断点 如何帮助调试代码中的问题 我页面上的 每张照片都有一个分享按钮 可以与朋友分享链接 但我收到了一个错误报告 显示他们 收到的网址没有导向照片页面 我们来调查一下 我做这个时间有点久了 所以不太记得是怎么创建的了 有多种方法可以调试 但我要试试符号断点 切换到 Sources 选项卡 并点击以添加新的符号断点

无论在我的端运行什么代码 最终都必须调用 显示系统弹出窗口的 navigator.share() 浏览器 API 在调用 share() 函数之前设置一个断点 点击 away 设置我的符号断点 现在点击页面上照片上的共享按钮 在调用 navigator.share() 之前 Web Inspector 已经暂停 把鼠标悬停在 传递给此方法的数据对象上 此处可以看到对象的内容 似乎共享的 URL 键值 确实是错误的 这是从哪里来的？ 在 Sources 选项卡的调用栈部分 可以看到为此调用的函数链 看起来 click 事件处理程序以前被调用过 在调用栈中 选择其条目以跳转到该函数 在这里 可以看到构建数据对象的代码 该数据对象被传递给 sharePhoto() 函数 从这里的注释来看 我本打算 实现这串代码 但是忘记了 现在我们来解决这个问题 点击以在此行上设置断点 然后 右键点击并选择 Edit Breakpoint

不需要设置条件 但是需要配置它来运行 JavaScript 操作 expression 字段中 修改数据对象以修复 url 属性 然后再将其传递给 share 函数

我们不需要这个断点在这里停止 所以点击选项 在计算表达式之后自动继续 接下来 点击按钮恢复 JavaScript 的执行 现在 点击“分享”按钮时 再次到达我先前设置的符号断点 但是现在得到的 数据对象具有正确的 URL 值 来自另一个断点的 JavaScript 操作修改了该值 并将其发送到该函数 没有暂停 这证实了我在先前部分 所做的更改确实解决了问题 这只是断点支持的 许多重要调试工作流中的一个例子 类似的例子还有很多 希望你在项目中尝试类似操作 本次讲座中我们讨论了很多内容 从新的字体排印检视工具 到覆盖用户首选项 使用新的元素标识 我们还研究了断点增强 然而这些只是皮毛 今年 Web Inspector 还有许多其他新功能和改进 本讲座时间有限 难以详尽介绍 Web Inspector 还有更多功能 如果你想进一步了解 这些功能以及可使用的其他功能 请访问 webkit.org 查找详细的博客文章和文档 我们也希望收到你的来信 如果你遇到问题 或对我们如何改进 Web Inspector 有想法 请通过在 WebKit 的 Inspector 产品错误追踪上提交问题通知我们 我们同样希望各位能下载 Safari 浏览器技术预览版 该版本每隔几周发布一次 包含 WebKit 中的最新工具和技术 以及错误修复和改进 并将在下一版本的 Safari 浏览器中发布 在结束前 如果你想进一步了解 Safari 浏览器今年为开发者 提供的新功能 请查看以下讲座：“重新发现 Safari 浏览器 开发者功能”、“CSS 新增功能” 感谢观看