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

Jecelyn Yeen

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

针对 Trusted Type 违规问题的断点

现在，您可以在 Sources 面板中设置断点并捕获可信类型违规问题的异常。

可信类型 API 可帮助您防范基于 DOM 的跨站脚本漏洞。如需了解如何使用可信类型编写、审核和维护不存在 DOM XSS 漏洞的应用，请点击此处。

在 Sources 面板中，打开 debugger 边栏窗格。展开 CSP 违规断点部分，然后选中 Trusted Type 违规复选框，以便在出现异常时暂停。您可以通过此演示页面自行试用。

针对 Trusted Type 违规问题的断点

Chromium 问题：1142804

来源面板现在会在违反可信类型的行旁边显示一个警告图标。将光标悬停在相应行上即可预览异常。点击该图标可展开问题标签页，其中会详细说明异常并提供解决方法指南。

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

Chromium 问题：1150883

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

现在，您可以为整个节点截取节点屏幕截图，包括折叠线下的内容。以前，如果视口中不显示内容，屏幕截图会被截断。现在，整页屏幕截图也更加精确。

在 Elements 面板中，右键点击某个元素，然后选择 Capture node screenshot。

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

Chromium 问题：1003629

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

使用新的 Trust Tokens 标签页检查信任令牌网络请求。

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

我们会在后续版本中提供进一步的调试支持。

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

Chromium 问题：1126824

Lighthouse 面板中的 Lighthouse 7

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 状态

您现在可以使用 DevTools 强制执行和检查 CSS :target 状态。

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

当网址中的哈希值与元素的 ID 相同时，请使用 :target 伪类为元素设置样式。您可以查看此演示自行试用。借助这项新的 DevTools 功能，您无需一直手动更改网址，即可测试此类样式。

强制设置 CSS `:target` 状态

Chromium 问题：1156628

复制元素的新快捷方式

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

在 Elements 面板中右键点击某个元素，然后选择 Duplicate element。系统会在其下方创建一个新元素。

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

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

元素重复

Chromium 问题：1150797、1150797

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

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

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

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

Chromium 问题：1147016

新增了用于复制 CSS 属性的快捷方式

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

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

新增了用于复制 CSS 属性的快捷方式

CSS 类的复制选项：

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

CSS 属性的复制选项：

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

Chromium 问题：1152391

Cookie 更新

新增了用于显示已解码网址的 Cookie 的选项

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

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

用于显示已解码网址的 Cookie 的选项

Chromium 问题：997625

仅清除可见 Cookie

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

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

仅清除可见 Cookie

Chromium 问题：978059

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

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

清除第三方 Cookie 的选项

Chromium 问题：1012337

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

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

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

修改用户代理客户端提示

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

Chromium 问题：1073909

“网络”面板更新

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

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

录制网络日志

Chromium 问题：1122580

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

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

WebTransport 连接

WebTransport 是一个新 API，可提供低延迟、双向的客户端-服务器消息传递。如需详细了解其用例以及如何就未来的实现方式提供反馈，请访问 web.dev/webtransport/。

Chromium 问题：1152290

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

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

录制网络日志

Chromium 问题：1028078

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

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

现在，您可以在“控制台”和“来源”面板中使用新的快捷方式复制对象值。这非常方便，尤其是在您要复制大型对象（例如长数组）时。

在控制台中复制对象

在“来源”面板中复制对象

Chromium 问题：1149859、1148353

在“Sources”面板和“Styles”窗格中复制文件名的全新快捷方式

现在，您可以通过右键点击以下各项来复制文件名：

  • Sources 面板中的文件，或
  • 元素面板中样式窗格中的文件名

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

复制“来源”面板中的文件名

复制“样式”窗格中的文件名

Chromium 问题：1155120

帧详情视图更新

帧详情视图中新增了 Service Worker 信息

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

在应用面板中，展开包含服务工件的帧，然后选择 Service Workers 树下的某个服务工件以查看详细信息。

帧详情视图中的 Service Worker 信息

Chromium 问题：1122507

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

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

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

衡量内存

Chromium 问题：1139899

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

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

问题反馈链接

“性能”面板中的丢帧数

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

丢失的帧数

Chromium 问题：1075865

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

您现在可以在 DevTools 中模拟双屏设备和可折叠设备。

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

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

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

模拟双屏幕

Chromium 问题：1054281

实验功能

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

现在，DevTools 可以根据您与浏览器的交互生成 Puppeteer 脚本，让您更轻松地自动执行浏览器测试。Puppeteer 是一个 Node.js 库，提供高级 API，可通过 DevTools Protocol 控制 Chrome 或 Chromium。

前往此演示页面。在 DevTools 中打开 Sources 面板。选择左侧窗格中的录制标签页。添加新的录制内容并为其命名（例如 test01.js）。

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

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

请注意，这项功能目前处于实验阶段。我们计划随着时间的推移改进和扩展录音机功能。

Puppeteer Recorder

Chromium 问题：1144127

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

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

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

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

Chromium 问题：1093229

CSS Flexbox 调试工具

自上次版本发布以来，开发者工具添加了对 flexbox 调试的实验性支持。

现在，开发者工具会绘制一条辅助线，以帮助您更好地直观呈现 CSS align-items 属性。还支持 CSS gap 属性。在我们的示例中，我们使用了 CSS gap: 12px;。请注意每个间隔的虚线图案。

Flexbox

Chromium 问题：1139949

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

在新的 CSP 违规标签页中，一目了然地查看所有内容安全政策 (CSP) 违规问题。此新标签页目前处于实验阶段，应该能让您更轻松地处理存在大量 CSP 和可信类型违规问题的网页。

“CSP 违规行为”标签页

Chromium 问题：1137837

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

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

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

颜色选择器中的 APCA

该示例显示 APCA 阈值为 38%。对比度必须达到或超过所列值。此值是根据字体粗细和大小计算得出的，具体请参阅此 APCA 查找表。

Chromium 问题：1121900

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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