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

Google 用户调研。

针对 Trusted Types 违规问题的调试支持

在 Trusted Type 违规时设置断点

您现在可以在来源面板中设置断点并捕获 Trusted Type 违规异常。

Trusted Types API 可帮助您防范基于 DOM 的跨站脚本漏洞。点击此处了解如何使用 Trusted Types 编写、审核和维护不含 DOM XSS 漏洞的应用。

在来源面板中，打开调试器边栏窗格。展开 CSP 违规断点部分，然后选中可信类型违规复选框，以便在出现异常时暂停。您可以访问此演示页面自行尝试。

Chromium 问题：1142804

将“来源”面板中的问题与“问题”标签页相关联

来源面板现在会在违反可信类型的行旁边显示一个警告图标。将光标悬停在该图标上即可预览异常。点击该标签页可展开问题标签页，其中会提供有关异常的更多详细信息以及有关如何修复异常的指导。

Chromium 问题：1150883

截取视口之外的节点屏幕截图

您现在可以为整个节点（包括折叠线下方的内容）截取节点屏幕截图。之前，对于视口中不可见的内容，屏幕截图会被截断。现在，全页屏幕截图也更加精确。

在元素面板中，右键点击某个元素，然后选择捕获节点屏幕截图。

Chromium 问题：1003629

针对网络请求新增了“信任令牌”标签页

使用新的 Trust Tokens 标签页检查 Trust Token 网络请求。

Trust Token 是一种新的 API，可帮助打击欺诈行为并将机器人与真人区分开来，而无需进行被动跟踪。了解如何开始使用 Trust Token。

我们会在后续版本中提供更多调试支持。

Chromium 问题：1126824

Lighthouse 面板中的 Lighthouse 7

Lighthouse 面板现在运行的是 Lighthouse 7。如需查看完整的变更列表，请参阅版本说明。

Lighthouse 7 中的新审核：

• 预加载 Largest Contentful Paint (LCP) 图片。审核 LCP 元素所用的图片是否已预加载，以缩短 LCP 用时。
• 记录到“Issues”面板的问题。表示 Issues 面板中存在未解决的问题列表。
• 渐进式 Web 应用 (PWA)。PWA 类别发生了相当大的变化。

• 可安装组现在完全由启用 Chrome 可安装条件的功能检查提供支持。这些信号与清单窗格中显示的信号相同。

  • “注册服务工作线程…”审核移至 PWA 优化组，“使用 HTTPS”审核现在作为关键的“可安装性要求”审核的一部分。
  • 移除了快速且可靠群组。由于改版后的“可安装性要求”审核包含离线功能检查，“当前网页和 start_url 在离线时响应 200”审核已被移除。“页面在移动网络上的加载速度足够快”审核也被移除了。

Chromium 问题：772558

“元素”面板更新

支持强制设置 CSS :target 状态

您现在可以使用开发者工具强制并检查 CSS :target 状态。

在元素面板中，选择一个元素，然后切换元素状态。选中 :target 复选框以强制应用并检查样式。

当网址中的哈希值与元素的 ID 相同时，使用 :target 伪类来设置元素的样式。不妨查看此演示，亲自试用一下。借助这项新的开发者工具功能，您可以测试此类样式，而无需一直手动更改网址。

Chromium 问题：1156628

用于复制元素的新快捷键

使用新的复制元素快捷键可立即克隆元素。

在元素面板中右键点击某个元素，然后选择复制元素。系统会在该元素下创建一个新元素。

或者，您也可以使用键盘快捷键复制元素：

• Mac：Shift + Option + ⬇️
• Windows/ Linux：Shift + Alt + ⬇️

Chromium 问题：1150797、1150797

自定义 CSS 属性的颜色选择器

样式窗格现在会显示自定义 CSS 属性的颜色选择器。

此外，您还可以按住 Shift 键并点击颜色选择器，以循环显示颜色值的 RGBA、HSLA 和十六进制表示形式。

Chromium 问题：1147016

用于复制 CSS 属性的新快捷键

现在，您可以使用一些新的快捷键更快地复制 CSS 属性。

在元素面板中，选择一个元素。然后，右键点击 Styles 窗格中的 CSS 类或 CSS 属性，以复制相应的值。

CSS 类的复制选项：

• 复制选择器。复制当前选择器的名称。
• 复制规则。复制当前选择器的规则。
• 复制所有声明：复制当前规则下的所有声明，包括无效属性和带前缀的属性。

CSS 属性的复制选项：

• 复制声明。复制当前行的声明。
• 复制媒体资源。复制当前行的属性。
• 复制值：复制当前行的值。

Chromium 问题：1152391

Cookie 更新

用于显示已解码 Cookie 的新选项

现在，您可以选择在 Cookies 窗格中查看经过网址解码的 Cookie 值。

前往应用面板，然后选择 Cookie 窗格。选择列表中的任意 Cookie。 选中新的显示已解码的网址复选框，即可查看已解码的 Cookie。

Chromium 问题：997625

仅清除可见的 Cookie

“Cookie”窗格中的清除所有 Cookie 按钮现已替换为清除过滤出的 Cookie 按钮。

在应用面板 > Cookie 窗格中，在文本框中输入文字以过滤 Cookie。在我们的示例中，我们按“PREF”过滤列表。点击清除过滤出的 Cookie 按钮可删除可见的 Cookie。清除过滤条件文本后，您会看到其他 Cookie 仍保留在列表中。以前，您只能选择清除所有 Cookie。

Chromium 问题：978059

“存储”窗格中新增了用于清除第三方 Cookie 的选项

在存储空间窗格中清除网站数据时，开发者工具现在默认仅清除第一方 Cookie。启用包括第三方 Cookie，以同时清除第三方 Cookie。

Chromium 问题：1012337

为自定义设备修改用户代理客户端提示

您现在可以为自定义设备修改 User-Agent 客户端提示。

依次前往设置 > 设备，然后点击添加自定义设备…。展开用户代理客户端提示部分以修改客户端提示。

用户代理客户端提示是用户代理字符串的替代方案，可让开发者以保护隐私且符合人体工程学的方式访问有关用户浏览器的信息。如需详细了解用户代理客户端提示，请访问 web.dev/user-agent-client-hints/。

Chromium 问题：1073909

“网络”面板更新

持久保留“录制网络日志”设置

开发者工具现在会保留“记录网络日志”设置。之前，每当页面重新加载时，开发者工具都会重置用户的选择。

Chromium 问题：1122580

在“网络”面板中查看 WebTransport 连接

“网络”面板现在会显示 WebTransport 连接。

WebTransport 是一种新的 API，可提供低延迟的双向客户端-服务器消息传递功能。如需详细了解其应用场景，以及如何针对未来实现提供反馈，请访问 web.dev/webtransport/。

Chromium 问题：1152290

“在线”已重命名为“无节流”

网络模拟选项“在线”现已更名为“无节流”。

Chromium 问题：1028078

控制台、“来源”面板和“样式”窗格中新增了复制选项

在控制台和“来源”面板中复制对象的新快捷方式

您现在可以使用控制台和“来源”面板中的新快捷方式复制对象值。当您需要复制大型对象（例如长数组）时，此功能非常实用。

Chromium 问题：1149859、1148353

在“来源”面板和“样式”窗格中复制文件名的新快捷键

您现在可以通过右键点击以下内容来复制文件名：

• 来源面板中的文件，或
• “元素”面板中“样式”窗格内的文件名

从上下文菜单中选择复制文件名，以复制文件名。

Chromium 问题：1155120

帧详情视图更新

“帧详细信息”视图中的新 Service Worker 信息

DevTools 现在会在创建专用服务工作线程的框架下显示这些专用服务工作线程。

在应用面板中，展开包含服务工作线程的框架，然后选择服务工作线程树下的某个服务工作线程以查看详细信息。

Chromium 问题：1122507

在“帧详细信息”视图中衡量内存信息

performance.measureMemory() API 状态现在会显示在 API 可用性部分下。

新的 performance.measureMemory() API 可估算整个网页的内存用量。如需了解如何使用此新 API 监控网页的总内存用量，请参阅这篇文章。

Chromium 问题：1139899

通过“问题”标签页提供反馈

如果您日后想改进问题消息，请依次前往控制台或更多设置 > 更多工具 > 问题，打开问题标签页。展开问题消息，然后点击此问题消息对您有用吗？，之后您可以在弹出的窗口中提供反馈。

“性能”面板中的丢帧

在“性能”面板中分析加载性能时，“帧”部分现在会将丢弃的帧标记为红色。将光标悬停在该视频上，即可查看帧速率。

Chromium 问题：1075865

在设备模式下模拟可折叠设备和双屏设备

您现在可以在开发者工具中模拟双屏设备和可折叠设备。

启用设备工具栏后，选择以下设备之一：Surface Duo 或 Samsung Galaxy Fold。

点击新的跨屏图标，即可在单屏或折叠姿态与双屏或展开姿态之间切换。

您还可以启用实验性 Web 平台功能，以访问新的 CSS 媒体 screen-spanning 功能和 JavaScript getWindowSegments API。实验性图标会显示实验性 Web 平台功能标志的状态。开启标志后，相应图标会突出显示。前往 chrome://flags 并切换标志。

Chromium 问题：1054281

实验功能

使用 Puppeteer 记录器自动执行浏览器测试

开发者工具现在可以根据您与浏览器的互动生成 Puppeteer 脚本，从而更轻松地实现浏览器测试自动化。Puppeteer 是一个 Node.js 库，它提供了一个高级 API，用于通过 DevTools Protocol 控制 Chrome 或 Chromium。

前往此演示页面。在开发者工具中打开来源面板。选择左侧窗格中的录制标签页。添加新录制内容，并为文件命名（例如 test01.js）。

点击底部的录制按钮，开始录制互动。尝试填写屏幕上的表单。请注意，Puppeteer 命令会相应地附加到文件中。再次点击录制按钮即可停止录制。

如需运行该脚本，请按照 Puppeteer 官方网站上的入门指南操作。

请注意，这是一项早期实验。我们计划随着时间的推移改进和扩展录音机功能。

Chromium 问题：1144127

“样式”窗格中的字体编辑器

新版字体编辑器是“样式”窗格中与字体相关的属性的弹出式编辑器，可帮助您为网页找到理想的排版。

该弹出式窗口提供了一个简洁的界面，可通过一系列直观的输入类型动态操控排版。

Chromium 问题：1093229

CSS Flexbox 调试工具

自上一个版本以来，开发者工具新增了对 Flexbox 调试的实验性支持。

开发者工具现在会绘制一条引导线，帮助您更好地直观呈现 CSS align-items 属性。此外，还支持 CSS gap 属性。在我们的示例中，CSS 为 gap: 12px;。请注意每个缺口的影线图案。

Chromium 问题：1139949

新的“CSP 违规行为”标签页

在新的 CSP 违规行为标签页中，您可以一目了然地查看所有内容安全政策 (CSP) 违规行为。 这个新标签页是一项实验，旨在让您更轻松地处理存在大量 CSP 和可信类型违规行为的网页。

Chromium 问题：1137837

新的色彩对比度计算方法 - 高级感知对比度算法 (APCA)

高级感知对比度算法 (APCA) 将取代颜色选择器中的 AA/AAA 指南对比度。

APCA 是一种基于现代色彩感知研究成果计算对比度的新方法。与 AA/AAA 指南相比，APCA 更依赖于具体情境。对比度是根据文本的空间属性（字体粗细和大小）、颜色（文本与背景之间的感知亮度差异）和上下文（环境光、周围环境、文本的预期用途）计算得出的。

该示例显示 APCA 阈值为 38%。对比度必须达到或超过所列值。此值是根据字重和字号计算的，请参阅此 APCA 查找表。

Chromium 问题：1121900

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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