此页面由 Cloud Translation API 翻译。

开发者工具的新变化 (Chrome 73)

Kayce Basques

以下是 Chrome 73 中开发者工具的新变化。

以下版本说明的视频版本

日志点

使用日志点将消息记录到控制台，而不会因 console.log() 调用使代码杂乱无章。

如需添加日志点，请执行以下操作：

右键点击要添加日志点的行号。

图 1. 添加日志点
选择添加日志点。此时会弹出断点编辑器。

图 2. 断点编辑器
在断点编辑器中，输入您要记录到控制台的表达式。

图 3. 输入日志点表达式

提示！注销变量（如 TodoApp）时，请将变量封装在一个对象（如 {TodoApp}）中，以在控制台中注销其名称和值。如需详细了解此语法，请参阅始终记录对象和对象属性值简写形式。
按 Enter 键或在断点编辑器之外点击一下以保存。行号顶部的橙色标志表示日志点。

图 4. 第 174 行的橙色 Logpoint 标记

下次执行该行时，开发者工具会将 Logpoint 表达式的结果记录到控制台。

控制台中 Logpoint 表达式的结果

图 5. 控制台中 Logpoint 表达式的结果

如需报告错误或提出改进建议，请参阅 Chromium 问题 700519。

检查模式下的详细提示

检查节点时，开发者工具现在会显示一条展开的提示，其中包含字体大小、字体颜色、对比度和方框模型尺寸等常见的重要信息。

检查节点

图 6. 检查节点

要检查节点，请执行以下操作：

点击 Inspect 。

提示！将鼠标悬停在 Inspect 上，即可查看其键盘快捷键。
在视口中，将鼠标悬停在相应节点上。

导出代码覆盖率数据

代码覆盖率数据现在可以导出为 JSON 文件。JSON 如下所示：

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url 是开发者工具分析的 CSS 或 JavaScript 文件的网址。ranges 描述使用过的代码部分。start 是所用范围的起始偏移量。end 是结束偏移量。text 是文件的完整文本。

在上面的示例中，范围 0 到 21 对应于 body { margin: 1em; }，范围 45 到 67 对应于 h1 { color: #317EFB; }。换句话说，系统使用了第一个和最后一个规则集，而没有使用中间的规则集。

若要分析网页加载时使用了多少代码并导出数据，请执行以下操作：

按 Ctrl+Shift+P 或 Command+Shift+P (Mac) 以打开命令菜单。

图 7. 命令菜单
开始输入 coverage，选择显示覆盖率，然后按 Enter 键。

图 8. 显示覆盖率

覆盖率标签页随即会打开。

图 9. “覆盖率”标签页
点击重新加载 。开发者工具会重新加载页面，并记录与实际交付的代码量之比。
点击 Export ，将数据导出为 JSON 文件。

Puppeteer 中也提供代码覆盖率，Puppeteer 是一种由开发者工具团队维护的浏览器自动化工具。请参阅覆盖率。

如需报告错误或提出改进建议，请参阅 Chromium 问题 717195。

使用键盘浏览控制台

您现在可以使用键盘在控制台中导航。示例如下：

按 Shift + Tab 将焦点置于最后一条消息（或表达式的求值结果）。如果消息包含链接，系统会先突出显示最后一个链接。按 Enter 键会在新标签页中打开链接。按向左箭头键可突出显示整条消息（参见图 13）。

聚焦于链接

图 11. 聚焦于链接

按向上箭头键可聚焦下一个链接。

将焦点置于另一个链接

图 12. 将焦点置于另一个链接

再次按向上箭头键可聚焦整个消息。

突出焦点全文

图 13. 突出焦点全文

按向右箭头键可展开收起的堆栈轨迹（或对象、数组等）。

展开收起的堆栈轨迹

图 14. 展开收起的堆栈轨迹

按向左箭头键可收起已展开的邮件或搜索结果。

如需报告错误或提出改进建议，请参阅 Chromium 问题 865674。

颜色选择器中的 AAA 对比度线

颜色选择器现在会显示第二行，以指明哪些颜色符合 AAA 对比度建议。自 Chrome 65 起，AA 线就一直存在。

AA 线（顶部）和 AAA 线（底部）

图 15. AA 线（顶部）和 AAA 线（底部）

两条线之间的颜色表示符合 AA 建议但不符合 AAA 建议的颜色。当某种颜色符合 AAA 建议值时，与该颜色属于同一侧的所有元素也符合该建议值。例如，在图 15 中，低线下方的所有内容均为 AAA，并且高于线长的所有内容均不符合 AA 建议值。

提示！一般来说，您可以通过增加符合 AAA 建议值的文字量来提高网页的可读性。如果由于某种原因无法达到 AAA 建议值，请尽量至少达到 AA 建议值。

请参阅颜色选择器中的对比度，了解如何访问此功能。

如需报告错误或提出改进建议，请参阅 Chromium 问题 879856。

保存自定义地理定位替换项

现在，您可以通过“传感器”标签页保存自定义地理定位替换项。

按 Ctrl+Shift+P 或 Command+Shift+P (Mac) 以打开命令菜单。

图 16. 命令菜单
输入 sensors，选择 Show Sensors，然后按 Enter 键。系统随即会打开传感器标签页。

图 17. “传感器”标签页
在地理定位部分中，点击管理。系统会打开设置 > 地理位置。

图 18. “设置”中的“地理位置”标签页
点击添加营业地点。
输入地点名称、纬度和经度，然后点击添加。

图 19. 添加自定义地理位置

如需报告错误或提出改进建议，请参阅 Chromium 问题 649657。

代码折叠

Sources 和 Network 面板现在支持代码折叠。

第 54 到 65 行已折叠

图 20. 第 54 到 65 行已折叠

如需启用代码折叠，请执行以下操作：

按 F1 打开设置。
在 Settings > Preferences > Sources 下，启用 Code folding。

如需折叠代码块，请执行以下操作：

将鼠标悬停在块开始的行号上。
点击 Fold 图标。

如需报告错误或提出改进建议，请参阅 Chromium 问题 328431。

“消息”标签页

Frames 标签页已更名为 Messages 标签页。只有在检查 Web 套接字连接时，此标签页才在 Network 面板中可用。

“消息”标签页

图 21. “消息”标签页

如需报告错误或提出改进建议，请参阅 Chromium 问题 802182。

下载预览渠道

您可以考虑将 Chrome Canary 版、Dev 版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并在用户采取行动之前发现网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变化，或讨论与开发者工具有关的任何其他内容。

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。