通过网页检查器审查网页内容

大家好 我是Jonathan Davis Safari和WebKit团队的 网页技术传播员 欢迎收看 使用网页查看器审查网页内容 在创建网页内容的过程中 开发者需要检查许多细节 比如CSS类名的命名规则 还要保证网页可以正常访问 细节太多 很容易忘记 找起来也很乏味 内置清单是最理想的办法 部分团队会给持续集成系统 设置自动测试 就像Safari的 WebDriver macOS可用 现在iOS也能用了 WebDriver 有益于查找代码变化 找到用户功能失败的原因 但对于网页开发者 他们要检查进程是否符合代码结果 网页查看器现在有个新的审查系统 可用于macOS的 Safari 13 它提供了快速 简单 更方便的方法 检查网页内容

本视频中 我会演示 如何使用网页查看器的审查 如何实现测试并分析测试结果 以及最后 如何为项目 创建自定义审查 首先 访问网页查看器 需要开启开发菜单

只要打开Safari偏好设置 点击“高级” 然后勾选“在菜单栏显示开发菜单”

然后加载一个网页 在开发菜单打开网页查看器 或使用快捷键 Command-Option-I

以WebKit.org为例 点击“审查”标签

左边栏列出了审查项 点击左侧的箭头 展开审查项 审查项是多个测试组或测试的集合 测试组没有任何功能 只是单个测试集合的组织容器 运行审查很简单 点击“开始”按钮 运行所有可用的审查项 或右击一个审查项 在上下文菜单中查看更多选项 如果只运行一个审查项 右击审查项 选择“开始” 或者将鼠标悬停在左边栏的右侧 会出现一个播放键 也可以点亮后 按下空格 审查十分迅速 并在测试完成后即时更新

选择审查项的另一个方法 是点击“编辑”按钮 在导航边栏的底部

这里可以勾选或取消单个测试 测试组 或整个审查项 来选择是否启用它们

完成后点击底部的“完成”按钮

测试的结果列表显示在审查项下方 在结果文件夹里 每个结果被存入“运行”文件夹

展开“运行”文件夹 可以查看运行审查的结果 结果运行在页面重新加载后也可用 因此你可以修改网页 然后重新审核更新后的结果 比如 你可以对比通过率 结果会在关闭网页查看器后清空

点击审查运行演示的结果 会出现一个报告 展现示例结果的级别和数据

前三个级别 应该很眼熟 如果你用过Xcode “通过”代表测试通过 指代码符合测试要求 “警告”是基本通过 指虽然代码通过了测试 但还有需要修改的地方 “失败”指代码没能通过测试

另外这两个级别 是网页查看器特有的 “错误”是在使用 JavaScript运行测试时 出现的报错 “不支持”是个特殊情况 说明 当前页面不支持被测试的数据 比如API缺失

测试结果还可以包括测试数据 形式为DOM节点或报错消息

网页查看器自带部分默认的审查项 可以禁用 但不能删除 其中一个默认项 测试网页的标记 是否符合访问性的一般准则

然后是访问性审查的运行结果 在WebKit.org

整体评分说明WebKit运行不错 但还有提升空间

结果中显示“失败”的地方 是检测到失败的DOM节点 显示为可互动的DOM树 展开该节点的DOM树 就可以访问子节点 悬停鼠标会显示对应的页面元素 就像在使用元素标签

这就很容易理解 网页内容的哪个代码需要完善

要修复它 只要点击这个箭头 直接到元素标签里的节点 问题是作为菜单的元素 需要子元素才能形成菜单项

因此我只要添加一个新的角色属性 用菜单项的值 给菜单的每个子元素

我现在就补上缺失的属性 给每个元素

还有几个

好了 现在切换回审查标签 重新运行审查 看看DOM修改后的新结果

很好 这个页面现在通过了所有测试 我只需将这些修改并入实际代码中

你看 检查问题就这么简单 修改它们也很方便 在网页查看器中 审查和审查结果可以导出 再导入 点击“导出”按钮 将结果保存到JSON文件 它们可以通过查看器再次导入 仍然可以访问完整结果 包括可互动的DOM节点 只要页面元素匹配报表节点

你也可以导出内置的审查项 作为你编写审查项的示例 由于许多团队都有独特的目标代码 编写自定义的审查项 是最大的用处之一 在使用网页查看器的审查框架时

使用JSON格式实现便携 每个测试都是字符串化的 JavaScript函数 提供简单的框架 和特殊的通道 访问更多的数据 在JavaScript 简单的JSON格式 方便分享测试给组员或其他开发者

这个例子是ESLint审查 WebKit博客上有 关于创建网页查看器审核 这篇博客深入讲解了 如何编写自定义审查 以及使用审查框架的其他好处 只要下载 ESLint JSON文档 就能拖拽到网页查看器中 导入它

网页查看器的审查又快又方便 希望你们可以尝试一下 使用内置访问性审查 检查你的网页

使用便携的审查格式 创建自定义审查项 保证进程中的代码符合项目标准 我们期待您的反馈 如果发现任何问题 请反馈错误报告 也可提出特殊要求 更多信息 和其他相关资料 请查看本视频相关讲演中的链接