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

Kayce Basques

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

这些版本说明的视频版本

日志点

使用 Logpoint 将消息记录到控制台，而不会因 console.log() 调用而使代码变得杂乱。

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

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

   

   图 1. 添加日志点

2. 选择添加日志点。系统随即会弹出断点编辑器。

   

   图 2. 断点编辑器

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

   

   图 3. 输入日志点表达式

   提示！在记录变量（例如 TodoApp）时，请将变量封装在对象（例如 {TodoApp}）中，以便在控制台中记录变量的名称和值。如需详细了解此语法，请参阅始终记录对象和对象属性值简写。

4. 按 Enter 键或点击断点编辑器外部即可保存。行号上方的橙色标记表示日志点。

   

   图 4. 第 174 行上的橙色日志点徽章

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

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

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

检查模式下的详细提示

检查节点时，开发者工具现在会显示一个展开的提示框，其中包含常用的重要信息，例如字体大小、字体颜色、对比度以及盒状模型尺寸。

图 6. 检查节点

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

1. 点击检查图标 。

   提示！将光标悬停在检查上，即可查看其键盘快捷键。

2. 在视口中，将鼠标悬停在节点上。

导出代码覆盖率数据

现在，您可以将代码覆盖率数据导出为 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; }。换句话说，系统使用了第一个和最后一个规则集，但未使用中间的规则集。

如需分析网页加载时使用的代码量并导出数据，请执行以下操作：

1. 按 Control+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单。

   

   图 7. 命令菜单

2. 开始输入 coverage，选择 Show Coverage，然后按 Enter 键。

   

   图 8. 显示覆盖范围

   系统会打开覆盖面标签页。

   

   图 9. “覆盖率”标签页

3. 点击重新加载图标 。开发者工具会重新加载网页，并记录所用代码量与所提供代码量之间的对比情况。

4. 点击导出 ，将数据导出为 JSON 文件。

DevTools 团队维护的浏览器自动化工具 Puppeteer 也提供代码覆盖率功能。请参阅覆盖面。

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

使用键盘浏览控制台

您现在可以使用键盘浏览控制台。示例如下：

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

图 11. 聚焦链接

按向上键可将焦点移至下一个链接。

图 12. 聚焦另一个链接

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

图 13. 突出显示整个消息

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

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

按向左箭头键可收起展开的消息或结果。

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

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

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

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

两条线之间的颜色表示符合 AA 建议但不符合 AAA 建议的颜色。如果某种颜色符合 AAA 建议，那么该颜色同一侧的任何颜色也符合该建议。例如，在图 15 中，下线以下的任何内容都是 AAA，而上线以上的任何内容甚至都达不到 AA 建议值。

提示！一般来说，您可以增加符合 AAA 建议的文本量，从而提高网页的可读性。如果出于某种原因无法满足 AAA 建议，请至少尝试满足 AA 建议。

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

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

保存自定义地理位置替换

“传感器”标签页现在可让您保存自定义地理定位替换设置。

1. 按 Control+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单。

   

   图 16. 命令菜单

2. 输入 sensors，选择 Show Sensors，然后按 Enter 键。系统会打开传感器标签页。

   

   图 17. “传感器”标签页

3. 在地理位置信息部分，点击管理。系统随即会打开设置 > 地理位置。

   

   图 18. “设置”中的“地理定位”标签页

4. 点击添加营业地点。

5. 输入位置名称、纬度和经度，然后点击添加。

   

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

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

代码折叠

来源和网络面板现在支持代码折叠。

图 20. 第 54 至 65 行已折叠

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

1. 按 F1 打开设置。
2. 在设置 > 偏好设置 > 来源下，启用代码折叠。

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

1. 将鼠标悬停在代码块开始的行号上。
2. 点击折叠图标 。

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

“消息”标签页

框架标签页已重命名为消息标签页。此标签页仅在检查 WebSocket 连接时显示在网络面板中。

图 21. “消息”标签页

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

下载预览渠道

不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试最前沿的 Web 平台 API，并在用户发现问题之前帮助您找到网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

开发者工具的新变化系列中涵盖的所有内容。