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

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

以下版本说明的视频版本

日志点

使用日志点将消息记录到控制台,而无需使用 console.log() 让您的代码杂乱无章 调用。

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

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

    添加日志点

    图 1. 添加日志点

  2. 选择添加日志点。此时会弹出 Breakpoint Editor

    断点编辑器

    图 2. 断点编辑器

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

    输入日志点表达式

    图 3. 输入日志点表达式

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

  4. Enter 键或在 Breakpoint Editor 外部点击以保存。橙色徽章 表示日志点。

    第 174 行的橙色日志点标志

    图 4. 第 174 行的橙色日志点标志

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

控制台中日志点表达式的结果

图 5. 控制台中日志点表达式的结果

要报告错误或提出改进建议,请参阅 Chromium 问题 #700519

检查模式下的详细提示

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

检查节点

图 6. 检查节点

如需检查节点,请执行以下操作:

  1. 点击 Inspect 检查节点

    提示!将鼠标悬停在 Inspect 上方,以查看其键盘快捷键。

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

    命令菜单

    图 7. 命令菜单

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

    显示覆盖率

    图 8. 显示覆盖率

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

    “覆盖率”标签页

    图 9. “覆盖率”标签页

  3. 点击重新加载 重新加载。DevTools 重新加载页面,并记录使用的代码量与配送量的对比情况。

  4. 点击 Export(导出)导出 转换为 JSON 文件格式。

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

要报告错误或提出改进建议,请参阅 Chromium 问题 #717195

使用键盘浏览控制台

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

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

将焦点置于链接

图 11. 将焦点置于链接

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

将焦点移到其他链接

图 12. 将焦点移到其他链接

向上箭头键再次将焦点移至整条消息。

将焦点置于整条消息中

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

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

展开收起的堆栈轨迹

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

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

要报告错误或提出改进建议,请参阅 Chromium 问题 #865674

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

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

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

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

2 条线之间的颜色表示符合 AA 建议但不符合 AAA 要求的颜色 建议。如果某个颜色符合 AAA 推荐标准,则与该颜色相同。 也符合该建议例如,在图 15 中,下面这条线下方的任何内容都是 AAA, 超过上限的任何内容均不符合 AA 推荐标准。

提示!一般来说,您可以通过增加文字 且符合 AAA 推荐的标准。如果部分客户无法达到 AAA 建议 请尽量至少达到 AA 建议标准。

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

要报告错误或提出改进建议,请参阅 Chromium 问题 #879856

保存自定义地理定位覆盖

“传感器”标签页现在允许您保存自定义地理定位替换值。

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

    命令菜单

    图 16. 命令菜单

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

    “传感器”标签页

    图 17. “传感器”标签页

  3. 地理定位部分中,点击管理设置 >系统会打开 Geolocations(地理位置)。

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

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

  4. 点击添加地理位置

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

    添加自定义地理位置

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

要报告错误或提出改进建议,请参阅 Chromium 问题 #649657

代码折叠

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

第 54 至 65 行已折叠

图 20. 第 54 至 65 行已折叠

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

  1. F1 打开设置
  2. 设置下 >偏好设置 >源代码支持代码折叠

如需折叠代码块,请执行以下操作:

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

要报告错误或提出改进建议,请参阅 Chromium 问题 #328431

“消息”标签页

Frames 标签页已更名为 Messages 标签页。此标签仅在 网络面板。

“消息”标签页

图 21. “消息”标签页

要报告错误或提出改进建议,请参阅 Chromium 问题 #802182

下载预览渠道

请考虑将 Chrome Canary开发者版Beta 版用作您的默认开发浏览器。通过这些预览渠道,您可以访问最新的开发者工具功能,测试先进的网络平台 API,并在用户之前发现您网站上的问题!

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题
  • 请发送电子邮件至 @ChromeDevTools
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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