此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

针对“可信类型”违规行为的调试支持

信任类型违规行为的断点

您现在可以在 Sources 面板中设置断点并捕获有关可信类型违规行为的异常。

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

在来源面板中，打开调试程序边栏窗格。展开 CSP Compliance Breakpoints 部分，然后选中 Trusted Type violations 复选框以暂停异常。通过此演示页面亲自尝试一下。

信任类型违规行为的断点

Chromium 问题：1142804

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

现在，Sources 面板会在违反 Trusted Type 的行旁边显示一个警告图标。将鼠标悬停在该异常上可预览异常。点击该菜单项可展开问题标签页，该标签页提供了有关例外情况的更多详细信息以及有关如何解决问题的指导信息。

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

Chromium 问题：1150883

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

现在，您可以针对整个节点（包括非首屏内容）截取节点屏幕截图。以前，屏幕截图会因在视口中不可见的内容而被截断。整页的屏幕截图现在也非常精确

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

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

Chromium 问题：1003629

网络请求的全新“信任令牌”标签页

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

信任令牌是一种新的 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 类别发生了显著变化。
Installable 群组现在完全由支持 Chrome 可安装标准的功能检查提供支持。这些信号与“清单”窗格中显示的信号相同。
- “注册 Service Worker...”审核移至 PWA 优化组，“使用 HTTPS”审核现在包含在关键的“可安装性要求”审核中。
- 快速且可靠组已被移除。由于修订后的“可安装性要求”审核包括离线功能检查，因此移除了“离线时当前页和 start_url 响应 200”审核。“网页加载时速度足够快”审核也已移除。

Chromium 问题：772558

元素面板更新

支持强制采用 CSS `:target` 状态

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

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

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

强制采用 CSS `:target` 状态

Chromium 问题：1156628

用于复制元素的新快捷键

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

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

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

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

元素重复

Chromium 问题：1150797、1150797

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

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

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

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

Chromium 问题：1147016

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

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

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

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

CSS 类的复制选项：

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

CSS 属性的复制选项：

复制声明。复制当前行的声明。
复制属性。复制当前行的属性。
复制值：复制当前行的值。

Chromium 问题：1152391

Cookie 更新

显示经过网址解码的 Cookie 的新选项

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

转到 Application（应用）面板，然后选择 Cookies 窗格。选择列表中的任意 Cookie。选中新的显示网址已解码复选框以查看已解码的 Cookie。

显示经过网址解码的 Cookie 的选项

Chromium 问题：997625

仅清除可见的 Cookie

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

在 Application（应用）面板 > Cookies 窗格中，在文本框中输入文本以过滤 Cookie。在本示例中，我们按“PREF”过滤列表。点击清除已过滤的 Cookie 按钮，以删除可见的 Cookie。清除过滤器文本，您将看到其他 Cookie 仍保留在列表中。以前，您只能清除所有 Cookie。

仅清除可见的 Cookie

Chromium 问题：978059

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

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

用于清除第三方 Cookie 的选项

Chromium 问题：1012337

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

您现在可以修改自定义设备的用户代理客户端提示。

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

修改用户代理客户端提示

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

Chromium 问题：1073909

“网络”面板更新

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

开发者工具现在会保留“Record network log”设置。以前，每当页面重新加载时，DevTools 都会重置用户的选择。

记录网络日志

Chromium 问题：1122580

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

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

WebTransport 连接

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

Chromium 问题：1152290

“在线”已更名为“无节流”

网络模拟选项“Online”（在线）现已更名为“No Throttling”。

记录网络日志

Chromium 问题：1028078

控制台、Sources 面板和 Styles 窗格中新增了复制选项

新增了用于在“控制台”和“来源”面板中复制对象的快捷键

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

在控制台中复制对象

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

Chromium 问题：1149859、1148353

新增了用于在“Sources”面板和“Styles”窗格中复制文件名的快捷键

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

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

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

在“Sources”面板中复制文件名

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

Chromium 问题：1155120

帧详情视图更新

Frame 详情视图中的新 Service Worker 信息

现在，DevTools 会在创建它们的框架下显示专用 Service Worker。

在 Application 面板中，展开包含 Service Worker 的框架，然后在 Service Workers 树下选择一个 Service Worker 以查看详细信息。

Frame 详情视图中的 Service Worker 信息

Chromium 问题：1122507

在“Frame details”（帧详情）视图中测量内存信息

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

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

测量内存

Chromium 问题：1139899

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

如果您想要改进问题消息，请从控制台或更多设置 > 更多工具 > 问题 > 进入问题标签页，以打开问题标签页。展开问题消息，然后点击问题消息是否对您有帮助？，即可在弹出式窗口中提供反馈。

问题反馈链接

“性能”面板中的丢帧

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

Chromium 问题：1075865

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

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

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

点击新的 span 图标，即可在单屏/折叠和双屏/展开模式之间切换。

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

模拟双屏幕

Chromium 问题：1054281

实验功能

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

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

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

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

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

请注意，这只是一个早期实验。我们计划逐步改进和扩展录音机功能。

木偶师记录器

Chromium 问题：1144127

“Styles”窗格中的字体编辑器

新的字体编辑器是“样式”窗格中的一个弹出式窗口编辑器，用于调整字体相关属性，帮助您找到最适合您的网页的排版。

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

“Styles”窗格中的字体编辑器

Chromium 问题：1093229

CSS Flexbox 调试工具

自上次发布以来，DevTools 添加了对 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 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

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

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