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

下面介绍了 Chrome 73 中开发者工具的新变化。

此版本说明的视频版

日志点

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

如需添加日志点,请执行以下操作:

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

    添加日志点

    图 1. 添加日志点

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

    断点编辑器

    图 2. 断点编辑器

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

    输入日志点表达式

    图 3. 输入日志点表达式

    提示!在退出变量(例如 TodoApp)时,请将该变量封装在对象(例如 {TodoApp})中,以便在控制台中退出其名称和值。如需详细了解此语法,请参阅始终记录对象对象属性值简写

  4. Enter 键或点击 Breakpoint Editor 外部即可保存。行号顶部的橙色标记表示日志点。

    第 174 行上的橙色 Logpoint 徽章

    图 4. 第 174 行上的橙色 Logpoint 徽章

当该行代码下次执行时,DevTools 会将日志点表达式的结果记录到控制台。

控制台中 Logpoint 表达式的结果

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

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

检查模式下的详细提示

在检查节点时,DevTools 现在会显示一个展开的提示,其中包含字体大小、字体颜色、对比度和盒模型尺寸等常见重要信息。

检查节点

图 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+PCommand+Shift+P(Mac)打开“命令”菜单。

    命令菜单

    图 7. 命令菜单

  2. 开始输入 coverage,选择显示覆盖率,然后按 Enter 键。

    显示覆盖范围

    图 8. 显示覆盖范围

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

    “覆盖率”标签页

    图 9. “覆盖率”标签页

  3. 点击重新加载图标 重新加载。开发者工具会重新加载网页,并记录所使用的代码量与所发布的代码量之间的差异。

  4. 点击导出 导出,以 JSON 文件格式导出数据。

代码覆盖率功能还适用于 Puppeteer,这是一个由开发者工具团队维护的浏览器自动化工具。请参阅覆盖率

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

使用键盘在控制台中导航

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

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

聚焦链接

图 11. 聚焦链接

Up 箭头键可将焦点移至下一个链接。

聚焦另一个链接

图 12. 聚焦另一个链接

再次按 Up 箭头键可将焦点移至整个消息。

将焦点置于整条消息

图 13. 将焦点置于整条消息

向右箭头键可展开已收起的堆栈轨迹(或对象、数组等)。

展开已收起的堆栈轨迹

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

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

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

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

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

AA 线(顶部)和 AAA 线(底部)

图 15. AA 线(顶部)和 AAA 线(底部)

介于这两条线之间的颜色表示符合 AA 建议,但不符合 AAA 建议。如果某种颜色符合 AAA 建议,则与该颜色在同一侧的任何内容也符合该建议。例如,在图 15 中,低线以下的任何值均为 AAA,高线以上的任何值甚至都不符合 AA 建议。

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

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

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

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

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

  1. Control+Shift+PCommand+Shift+P(Mac)打开“命令”菜单。

    命令菜单

    图 16. 命令菜单

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

    “传感器”标签页

    图 17. “传感器”标签页

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

    “设置”中的“地理位置”标签页

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

  4. 点击添加营业地点

  5. 输入营业地点名称、纬度和经度,然后点击添加

    添加自定义地理位置

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

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

代码折叠

SourcesNetwork 面板现在支持代码折叠。

第 54 行至第 65 行已折叠

图 20. 第 54 行至第 65 行已折叠

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

  1. F1 键打开设置
  2. 依次选择 Settings(设置)> Preferences(偏好设置)> Sources(来源),然后启用 Code folding(代码折叠)。

如需收起代码块,请执行以下操作:

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

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

“信息”标签页

标签页已重命名为消息标签页。仅在检查 Web 套接字连接时,此标签页才会显示在 Network 面板中。

“信息”标签页

图 21. “信息”标签页

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。