探索网页检查器的改进

♪播放重低音音乐♪ ♪ 帕特里克安格尔：嗨 我是帕特里克 Webkit开发体验团队的工程师 很荣幸来向大家介绍 今年在网页检阅器中 令人振奋的新性能和改良 网页检阅器是在macOS上 Safari浏览器的一部分 它让网页开发者和设计者 能够取用大量的工具套组 来检阅他们的网页和网页应用程序 它能让你检阅 网页上所有的资源和活动 而且能在macOS、iOS、iPadOS 和tvOS之间顺畅的运作 今年 我很兴奋要向大家介绍 网页检阅器的新性能 从可视化CSS网格的新的叠加开始 断点的增强 以及直接在网页检阅器中 编写和校订审查的能力 在我开始介绍新的性能前 如果你以前没用过网页检阅器 你需要先开启它 在Safari浏览器偏好设定的 进阶标签中 打开“在选单列中显示开发选单” 就可以从开发选单里面 的“显示网页检阅器”项目中 来打开网页检阅器 现在我们打开网页检阅器了 让我们来看看今年的第一个新工具： 网格叠加 现今的网页布局可以很复杂 CSS网格是一个二维空间布局系统 它用一种很强大的方式 让设计师在排版内容时更容易 同时对任何一位 曾经在印刷设计业工作的人来说 都很熟悉 能直觉地使用 它是以行和列来定义的结构 组件被放置或分布在网格中 来达成有弹性同时可预期的布局 网格是编排网页的高效能方法 不过随着你的布局越来越复杂 它也会有一堆新的问题和疑惑 像是 为什么我的列是这个尺寸？ 或者 为什么这个蓝色盒子在下面？ 过去在网页检阅器中 对于这些迫切的问题 主要的答案来自 组件标签中的样式侧边栏 今年 它已经被移到 自己独立的侧边栏 让你可以在其他像是已计算样式的 面板旁边 检视匹配的CSS规则 如果你看网格的编写样式 你可以收集一些关于它的布局的信息 不过网格的编写样式 只能让你得到部分的信息 要是网页检阅器能提供一个 更可视化的方式让你消化这些信息 那岂不是很棒？ 嗯 现在出现了！ 如果你看在文件对象模型树状图 里面的组件 你会在每一个是CSS网格的组件旁边 看到一个新的可点击的网格徽章 这里 我们会看到在我们的页面上 两个CSS网格中其中之一的徽章 如果我们按下这个新的徽章 然后回到我们的网页上 你可以在已经存在的内容上面 看到新的网格叠加 让你可以看见网格内联的布局 而且不用绞尽脑汁地 阅读你编写的CSS 期望它会按你想象的运作 那万一这个刚好不是你想看到的 网格信息呢？ 如果想看的是网格区域、网格线名 和其他选项呢？ 要回答这个问题 让我们回到网页检阅器 这里 你可以看到另一个新的性能： 布局面板 它会显示所有 跟网格叠加相关的 选项和控制 首先 让我们来看看 在页面上的网格清单 这里有一个选项可以一次切换 开启或关闭全部的网格叠加 或者可以切换单一网格的开启或关闭 每个网格都对应到它的CSS选择器 帮助我们从清单上面来辨认它 在每个列出的网格旁边有色版 让你可以交互式地改变 网格叠加的颜色 当网格叠加开启时 每个组件上的徽章就会用这个颜色 网页检阅器在你下次加载相同页面时 会记得你每个组件的颜色 现在让我们来看看 控制这些叠加如何显示的选项 从轨道尺寸开始 它显示了每个轨道的编写尺寸 那就是你的网格的行或列 像这里 是将分块单位和最小尺寸 混合在一起使用 接着 网格线码显示在你的网格 特定行或列中 排放子组件能够使用的值 我们放了负数网格线码 它们代表了 从最外围的网格线开始计算的网格线码 位在标签里面 正数网格线码旁边 这些让你能够选择 你想要怎么排放你的项目 网格线名提供了另外一种 能根据区域名和已经明确命名的网格线 来查阅你网格内网格线的方法 区域名让你可以看到你的网格中 每一个已命名的区域 如果你想在网格中放置子组件 但是不想处理想要放置组件的 每一边网格线 那么这个就很有帮助 我们在每一个区域的中间放上区域名 并且用粗线条框出每一个区域 最后 在第二个网格线容器上 打开延伸网格线 能让你看到延伸至页面外的轨道线 能让你在从视觉去比较页面上 网格和其他组件的排列 我们根据脑中想好的网页表现性能 来建立叠加 你想建立多少都可以 你还是能顺畅地滑动页面 你可以同时显示许多网格 还是能顺畅地卷动页面 它们可以用在所有书写模式上 像这个原来在维基百科上的直式文字 右到左的文字方向 以及这样的组合 从搭载Safari浏览器15的MAC 或最新的Safari浏览器技术预览版 进行远程检阅时 你也可以使用这些叠加 我们相信网格是 网页上非常重要的布局工具 这就是为什么我们把这些工具 带到网页检阅器中 让你可以在我们所有对平台之间 看见网格和排除错误 来继续建立很棒的布局 现在让我们来看看网格叠加 是如何帮助我们更了解 和解决我们网页上的问题 我们来看看我正在制作的网页 它能让我快速浏览 每天早上我想看到的信息 我可以看到我的通勤路况 当天的天气预报 看起来我今天晚上会需要一件外套！ 还有今天下班后 我要去店里采买的东西 这个页面是用CSS网格编排的 因此很容易建立不同尺寸的模块 并且将它们放到我的页面上 等等 看来我忘记其中一个 用来装饰仪表板的有趣的图释 它应该被放在下面 和其他图释在一起！ 没问题 我可以用我们新的网格叠加 来帮我把它放到我想放的位置 要开始检阅我的页面 我先在出问题的组件上右键单击 然后选“检查组件” 如果你没有看到“检查组件” 确认你有像我们前面说过那样 打开网页检阅器 接下来我会选详细信息侧边栏中的 布局面板 这样我可以看到我页面上 所有的网格内容 我不太记得我想要处理的 是这些网格中的哪一个 不过可以勾选最上方 所有网格叠加的复选框 一次打开所有的叠加 我现在看到我想处理的网格内容 是粉红色那个 而上面出现我所有的模块 我只要取消勾选网格内容清单上的 其他两个叠加 就可以把它们关掉 现在只剩下我有兴趣的那个网格叠加 如果你跟我一样 只想看到 当下作业时所需要的信息就好 我会关闭轨道尺寸标签 这样我就可以专心在放置这个 迷路的图释的 网格线码上 现在 剩下的网格线码标签 让我能看清楚我要放图释的位置 在列线6和行线4 因为我明确地在出问题的图释上 按了右键和检查了那个模块 所以它已经帮我选取了 我可以直接开始编辑它的样式 来测试我的修正 有了这个新的三面板布局 我可以同时显示布局面板 这当我在页面上测试不同的样式 想要切换显示的是哪一个标签 或网格叠加时 有了这个新的布局 我就不需要一直在面板之间切换了 在样式面板中 我会按下样式属性 并且添加一个新属性 网格-区域 接着我可以输入冒号 直接开始 编辑新的属性值 这里我输入“4/6” 来代表行线4和列线6 很好 现在我的图释 出现在我要它出现的位置了 不过我再仔细想一下 我真的想要确保 即便之后 我在网格中加入或移除行或列 这个图释都会一直留在那个位置 在给我行线4和列线6这个值的 同一个标签里面 我看到第二个网格线码 -3 两个标签上都有 这个负数网格线码会让我的图释 留在从网格最外围算进来 三条轨道线的地方 我已经明确地定义过了 因此就我的情况来说不会有问题 我要把网格-区域属性值 更新成这组新的值“-3/-3” 大家可以看到我的图释 还留在正确的位置 就算我从我的网格中 增加另一行或移除另一列 它也会一直在那里 网页检阅器这个新的叠加 帮助我能很迅速地调整网页的布局 这对于了解既有的布局 和设计新的布局都很棒 现在让我们来谈谈 以断点在JavaScript中 排除错误的改良 就指令而言 当我们试着想搞清楚 为什么我们的指令 没有按照我们想那样运作 我们通常从console.log开始 或者 如果你从来没试过断点 我强烈建议你去试试看 我们等一下就会看到 它们很强大 甚至比过去更有结构性 如果你没用过断点 要开始最简单的方式 就是在来源标签中 按下JavaScript的网格线间距中 你想要暂停的那行 这样会建立一个断点 一旦遇到那个断点时 就会这行的一开头暂停你的指令 等着要执行这行 让你可以在你的编码上 一次停下一个陈述 或者深入研究特定的陈述 以及检视过程中每一步的 变量状态 不过断点可不只是这样而已！ 事实上 一共有五种不同类型的断点 各自用在不同场合中 有调试器陈述的断点 异常和断言的断点 JavaScript断点 这个你可以在JavaScript的 行上面设定 事件断点 当遇到点击、计时结束 时间间距、或者在操作动画框架 这类事件时 会停下来 文件对象模型断点 当出现和文件对象模型节点 相关的动作时 就会停下来 这些可以被加到组件卷标中 或是从网页检阅器中任何一个 节点预览 的内容选单看到 还有URL断点 一旦通过像是XMLHttpRequest 或Fetch的API 要对URL做出网络请求时 就会停下来 你可以通过在断点上点击右键 然后选取编辑断点 来配置你的JavaScript断点 这里 你可以控制断点的许多层面 让我们来看看它们每一个选项 我们可以设定一个条件 当条件为真时才会执行断点 今年 我们新增支持 在断点条件和动作的表达式里面 使用网页检阅器的控制台标签API 像这个 它指的是目前在组件标签中 选取的文件对象模型节点 在一些案例中 忽略断点几次后再执行断点 可能会让断点条件有更好的表现 例如在一个循环里 除非它已经完成几次的重复 我们不会希望它停下来 这可以用于在某个条件上 或排除某个条件 来控制断点被启动的时间 如果是用于在某个条件上 程序执行次数被忽略的次数 只有在条件被满足时才会增加 接下来 你可以定义执行断点时 会采取的动作 像是假设编码是嵌入在 你的JavaScript原始码 以取得的变量来评估 环境中的JavaScript 以样板字符串字面值 将信息轻易地记录到控制台 播放系统哔哔声 让你听到断点已经执行 以及定义探针表达式 它是通过存在来源标签的 详细信息侧边栏 的探针面板内的结果来评估 让你可以看到你的网页随着时间改变 的表达式结果 今年新的内容还有 支持JavaScript表达式的动作类型 可以被设定成模拟使用者的动作 这个对于和JavaScriptAPI 互动很有帮助 那个通常需要使用者去启动 像是播放影片 让你在网页原始码中实作改变前 可以先测试新的行为 你可以任意混合和配对这些动作 来定制化你的断点 包含多个不同的动作类型 最后 在你只是想要 加入一些纪录文件记录 或只是想要针对测试做个快速修补 而不用调整原本的网页的情形下 你可以让断点在评估 和执行完这些动作后自动继续 这些用来配置断点的选项 是非常多功能的 而今年 我很高兴要告诉大家 现在所有断点类型都可以使用这些了 不只是JavaScript断点 这让你能设定强大的断点条件 例如只有点击像是按钮 这种特定类型的组件的事件时暂停 或者出现对于特定URL的网络请求时 播放系统哔哔声 在所有断点类型都能用这些配置选项 让原本就很好的排除错误工具更棒 它能帮你脱颖而出 或者在适当的时机让你更突出 现在让我们回到我的仪表板网页 看看能够让这些新工具 轻而易举地排除错误 以及测试修补程序的问题 我最近在通勤路况模块 加了一个新按钮 因为我想要把我预计的通勤时间 分享给其他人 你永远不会知道什么时候可能会迟到 很不幸地 当我按下“分享”按钮 什么事都没发生 更糟的是 距离我上次操作这个模块 已经好几天了 我不记得 我在哪里处理这个按钮的点击事件 幸运的是 我可以用事件断点 在我的点击事件处理器暂停 来找回我的编码 我可以在来源标签这里建立事件断点 按下在导览侧边栏的断点那部分 右上方的加号 然后选择事件断点 让我可以定义一个新的事件断点 我要把事件设成“点击” 接着按下返回键来建立我的新断点 现在我可以看到我的点击断点 列在导览侧边栏中 当我按下我的按钮时 这个事件断点应该会暂停 不过首先我要确保我分享的通勤状况 是最新的预估时间 所以我要按下“更新”按钮…糟了！ 我的事件断点会停下所有点击的事件 包括我的“更新”按钮 虽然我希望的是 当我点击“分享”按钮时 再暂停就好 让我们用今年新的配置选项 来调整我的断点 在断点上右键单击并且选择编辑断点 这样我就可以编辑我的断点 这里 会出现一个弹出框 上面有事件断点的配置选项 我需要加上一个条件 确保只有在需要的时候才会暂停 在这个例子中 我可以用一些 网页检阅器控制台API 让目前的事件成为“$event” 并且检查事件的目标 是否和我的分享按钮是一致的 为了不用把这个特定按钮的 断点写死 我会用另一块控制台API 来检查事件的目标是否为 目前在组件标签中选取 的文件对象模型节点 而且为“$0” 我可以按旁边把配置弹出框关掉 我所有的更动都自动放进去了 因为按了“更新”按钮 我依然停在我的断点上 所以我要按下“继续”按钮 在页面上继续执行指令 现在当我按下“更新”按钮 我的通勤时间更新了 而且断点没有执行 不过如果我在“分享”按钮上右键单击 并且选择“检查组件” 让它成为选择的组件 现在我可以按下我的“分享“按钮 宾果！ 断点刚好停在我希望它暂停的位置 现在我看到为什么我的“分享”按钮 无法运作了 我忘了写这个功能 断点可以让你省下很多时间 至少在这个例子是这样 它实时帮我修补分享功能 并且在我回到原始码进行实作前 就先测试我的更动 我要在分享功能上多加一个断点 先按下网格线间距 在断点指示器上按下右键 然后选择编辑断点 在这个断点上我不需要条件 不过我想加入一个动作 预设的动作类型：评估JavaScript 就是我想放在这里的东西 我要在动作上加入我的JavaScript 这个叫做“navigator.share” 和一个我已经准备好数据的对象 “this.shareData” 我不需要把暂停指令 作为测试这个修正的一部分 所以我会勾选 “评估后自动继续” 跟之前一样 按弹出框外面来储存我的更动 现在我已经完成我的点击事件断点 让我们点一下它的指示器把它关掉 同时我会按“继续”按钮 来继续网页上的指令执行 现在我可以按我的“分享”按钮 上面会出现分享选单 我会选备忘录来确认 我分享的数据是否正确 看起来是正确的 现在我可以回到我的原始码 进行这些更动 太棒了！ 这些断点的强化 让我不需要用console.log 在原始码中到处试 就能够找出解决方法并且测试它 现在我有解决方案了 我可以把修正加到原始码 现在让我们来看看在审查里面 这个有趣的新性能 它让你可以直接在网页检阅器 建立和编辑你的审查 每个在审查标签中的审查 都是用JavaScript写的 而且会针对被检查的页面执行 这些测试会检查 不正确的文件对象模型结构 帮忙加强设计系统规则 或者帮忙确认你没有漏掉可访性属性 除了单一的审查 你也可以分享和执行整组的审查 根据预设值 网页检阅器 有两个审查组别： 审查示范 它会介绍审查运作的方式 和它们支持的功能性 以及一系列的辅助使用来检查 文件对象模型可访性的 最佳实例的子集 有符合可访性倡议规范 例如确保标题或替换文字 会出现在所有图片组件上 你可以选取审查 用审查名称旁边的 “开始”按钮来执行它 或者用导览侧边栏上方的 “开始”按钮 来执行所有的审查 在你完全审查后 你可以看到每个审查的结果 以及整体通过和失败的总结 如果有任何失败的结果 你看到关于那些失败的信息 让你能去修补它们 要分享你的审查结果 或是要用外部文本编辑器来编辑它们 你可以输出这些审查 在导出的JSON档案上做调整 然后再把调整过的审查 重新输入到网页检阅器中 输出和输入的步骤 很适合让你在团队或社群中 分享审查 而今年 我们有新的编辑模式 让建立和编辑审查更容易 当你按下 导览侧边栏下面的编辑按钮时 审查标签会转换成编辑模式 现在你可以建立新的审查 以及编辑已经存在的审查 要知道 预设的审查示范 和辅助使用审查群组 是无法删除或编辑的 不过可以复制 然后复制的内容是可以编辑的 现在 让我们来看看 以导览侧边栏的“建立”项目 来建立新的审查 你可以建立一个新的审查事件 或者一组审查事件 眼下 让我们来看看 建立一个新的审查事件 当我们建立一个新的审查事件 你可以看到它被加到导览侧边栏上 接着会显示预设的审查内容让你编辑 这里你有几项可以配置的东西 名称 还有审查的描述 以及审查支持的最小审查版本 这是要确保审查不会 在较旧版本的网页检阅器上执行 因为那些版本可能不支持某些性能 设置指令是在每个顶级审查 或审查群组之前 会执行的JavaScript 它可以让你执行 在这个顶级审查之下所有审查 所依赖的常用设置功能 最后 但同样很重要的 是指审查本身 它是一个JavaScript功能 它可以回传真或假 或者更多关于这次审查的信息 的结果对象 还有一个特殊的 WebInspectorAudit对象 它会公开额外的API 专门让审查在审查本身 以及审查的设置中使用 你可以从网页检阅器参考内容中 更了解这个API 你的变更会自动储存 而且这全部都能在不用输出的情况下 在网页检阅器中完成 不过要真的体验这些审查有多灵活 我想要带大家看看实际操作的样子 让我们再一次回到我的仪表板 看看审查如何帮我从网页中 抓出一些可访性问题 以及设计上的问题 当我打开审查标签 首先要做的 是执行辅助使用预设的审查事件 这些可以帮助我对于我在一般可访性 最佳实例中的表现有基本的了解 我可以按下在审查群组旁的 “执行”按钮 快速地执行这些审查 还不错 不过我可以做得更好 要看失败的审查结果 我可以点击“通过”筛选按钮 把那些结果都隐藏起来 只留下失败的审查结果 让我们来修正它吧 这个审查提供 失败的文件对象模型节点的列表 让我们可以轻易地 用出现在伪类选择器上的 组件标签按钮里面的“显示” 跳到那个节点 在组件标签中 我会利用 在文件对象模型节点上右键单击 试着帮我的影像加上标题 选择“新增”>“属性” 然后输入我的新标题

我会回到审查标签 再跑一次相同的审查群组 这次 我看到我通过所有审查了 审查另一个很棒的用途是 检查我的网页是否达到我的设计标准 我做这个计划时的其中一个规则是 确保我要在所有的组件中 都一致使用一小组的字体家族 让我们用今年新加到网页检阅器 的审查编辑模式来做这件事 我会先按下导览侧边栏下面 的“编辑”按钮来开始编辑 现在我进入编辑模式 我可以用侧边栏上面的“建立”按钮 建立一个新的审查事件 我会保留审查事件的预设选项 把我的审查事件命名为“字体” 现在我可以编辑剩下的审查事件 我会先加上描述 帮助我记得这个审查事件是做什么的 现在让我插入已经准备好的审查编码

我的审查主要有三个步骤 第一步 我会用预期的字体家族 建立一个数组 接下来 我会收集在我的网页上 所有带着没有列在 我预期的字体家族的 字体的组件 最后 我会回传我的结果对象 包括所有没有通过审查的组件 当我把我的审查写完 我只要按导览侧边栏上的“完成” 就可以了 现在我可以按在它名字旁边 的执行按钮 来执行我的审查 似乎我的页面上 其中一个节点出了点问题 让我们来看看出了什么问题 我可以再次用组件标签按钮中的显示 去到那个组件 并且查看它的样式 嗯 这真是太尴尬了！ Comic Sans！ 我真的不想用这个字体 让我们把它改成 uni-rounded字体家族

现在我要回到审查标签 再执行一次审查 太棒了！ 最后 我想用“输出审查”按钮 来输出我的审查 如此一来我可以把它分享给我的同事 让他们不会像我犯这么丢脸的错 尽管我可能会省略 Comic Sans这部分的故事 不只内建的辅助使用审查 能帮我抓到我漏掉的问题 我还能写入审查 来加强我自己网页的设计系统规则 让团队更容易 在审视所有人做的更动前 确保大家都在同样的状态下 加上这个 我们已经介绍了 网页检阅器中重要的新性能！ CSS网格中新的叠加 让你的内容看起来刚刚好 断点的改良 在不用离开网页检阅器的状况下 也能更轻易找到、除错 和测试问题的修正 还有新的审查 能够直接 在网页检阅器中 建立和编辑 你可以快速地建立审查 来确保网页 有达到可访性标准和你自己的标准 连同这些新性能 我们还做了一些微调和强化 以及修正许多程序错误 来进一步改良网页检阅器 在我结束之前 我想留给大家 几个很有用的资源 你可能还没发现网页检阅器 是开放原始码WebKit计划的一部分 WebKit是一个快速、保密和安全的 网页浏览器引擎 它能在Safari浏览器、邮件 和App Store上使用 也用在很多macOS和iOS的应用程序上 你可以从webkit.org上 更了解WebKit计划 你也可以在那里找到 关于WebKit新性能的贴文 包括这篇 它在讲网页检阅器的网格叠加 除了关于网页检阅器中新性能的贴文 你还可以在上面看到许多 介绍网页检阅器的性能和界面的档案 并且更深入介绍 许多我们今天讨论过的性能 像是审查和断点 关于那些性能 有太多内容是我今天没办法涵盖到的 所以如果你想了解更多 我强烈建议你去看看那些档案 我们也很希望能听到你们的想法！ 如果你遇到程序错误 或是对于我们可以如何改良 网页检阅器有什么建议 请在反馈助理中 送出对于macOS的反馈 并且在反馈区域选择WebKit 我还想邀请大家下载 Safari浏览器技术预览版 大约每两周发行一次 这是特别针对开发者设计 让他们可以提早取得在WebKit 和网页检阅器上的 工具、性能和修正 不用等到它们出现在 所有Mac、iPhone和iPad中 Safari浏览器版本的那个时候 最后 请看看其他这些很棒的内容 包括《Safari浏览器15的设计》 来学习如何替Safari浏览器 编写和设计漂亮的内容 以及《开发进阶的网页内容》 来学习JavaScript 和WebAssembly的新性能 让你来加强你的网页 也请看看我们在WWDC 2020的内容 《网页检阅器的新进展》 看看我们在网页检阅器中 还做了哪些改良 你可以在你的开发者应用程序中 找到这些很棒的内容 以及更多其他内容 谢谢！ ♪