此页面由 Cloud Translation API 翻译。

Switch to English

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

Jecelyn Yeen

Twitter GitHub 首页

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

出现可信类型违规行为的断点

现在，您可以在 Sources 面板中设置断点和捕获“Trusted Type 是为了解决”中的异常。

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

在 Sources 面板中，打开 Debugger 边栏窗格。展开 CSP 违规断点部分，然后选中可信类型违规复选框以在异常上暂停。请访问此演示页面，亲自尝试一下。

出现可信类型违规行为的断点

Chromium 问题：1142804

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

现在，Sources 面板会在违反“可信类型”的行旁边显示一个警告图标。将鼠标悬停在该异常上可预览该异常。点击它以展开 Issues（问题）标签页，您会看到有关异常的更多详情以及有关如何解决问题的指南。

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

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 类别发生了很大的变化。
现在，可安装组完全由启用 Chrome 可安装条件的功能检查提供支持。这些信号与“清单”窗格中显示的信号相同。
- “注册 Service Worker...”审核已移至 PWA 优化群组，“使用 HTTPS”审核现在包含在密钥“可安装性要求”审核中。
- 快速且可靠群组已被移除。由于改进后的“可安装性要求”审核包括离线功能检查，因此移除了“离线时当前网页和 start_url 响应 200”审核。“网页在移动网络上的加载速度足够快”这项审核也已被移除。

Chromium 问题：772558

元素面板更新

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

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

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

当网址中的哈希和元素的 ID 相同时，可以使用 :target 伪类来设置元素的样式。观看此演示即可亲自体验。借助这项全新的开发者工具功能，您可以测试此类样式，而无需始终手动更改网址。

强制使 CSS `:target` 状态

Chromium 问题：1156628

用于复制元素的新快捷方式

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

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

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

Mac：Shift + Option + ⬇️
窗口/ 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 值。

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

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

Chromium 问题：997625

仅清除可见的 Cookie

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

在应用面板 > Cookie 窗格的文本框中输入文本以过滤 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”（记录网络日志）设置。以前，每当页面重新加载时，开发者工具都会重置用户的选择。

记录网络日志

Chromium 问题：1122580

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

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

WebTransport 连接

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

Chromium 问题：1152290

“Online”（在线）重命名为“No throttling”（不节流）

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

记录网络日志

Chromium 问题：1028078

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

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

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

在控制台中复制对象

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

Chromium 问题：1149859、1148353

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

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

在来源面板中访问某个文件，或者
元素面板的“样式”窗格中的文件名

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

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

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

Chromium 问题：1155120

帧详情视图更新

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

现在，开发者工具会在创建 Service Worker 的框架下显示它们。

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

Frame 详情视图中的 Service Worker 信息

Chromium 问题：1122507

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

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。实验性图标会显示实验性 Web 平台功能标志的状态。标志开启时，该图标会突出显示。导航到 chrome://flags 并切换标志。

模拟双屏

Chromium 问题：1054281

实验功能

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

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

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

点击底部的 Record（录制）按钮，开始记录互动情况。请尝试填写屏幕上的表单您会发现 Puppeteer 命令已相应地附加到文件。再次点击 Record 按钮以停止录制。

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

请注意，这尚处于早期实验阶段。我们计划逐步改进和扩展“录音机”功能。

木偶管录音机

Chromium 问题：1144127

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

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

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

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

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 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并先于用户发现您网站上的问题！

与 Chrome 开发者工具团队联系

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

请通过 crbug.com 向我们提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues，报告开发者工具问题。
您可以前往 @ChromeDevTools 发 Twitter 微博。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。