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

Jecelyn Yeen

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

信任类型违规行为的断点

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

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

在来源面板中，打开调试程序边栏窗格。展开 CSP 违规问题 断点部分，然后选中违反信任类型政策复选框，以在 异常。通过此演示页面亲自尝试一下。

信任类型违规行为的断点

Chromium 问题：1142804

现在，Sources 面板会在违反 Trusted Type 的行旁边显示一个警告图标。悬停 以便预览异常点击该按钮即可展开 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 类别发生了显著变化。

  • Installable 组现在完全由支持 Chrome 的 可安装的标准。这些信号与“清单”窗格中显示的信号相同。

    • “注册 Service Worker...”将审核移至 PWA 优化组，并且“使用 HTTPS"现在已纳入关键的“可安装性要求”审核。
    • 快速且可靠组已被移除。修订后的“可安装性要求”审核 包括离线功能检查， 离线”审核已移除。“页面在移动网络上的加载速度足够快”审核已移除 。

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 属性的复制选项：

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

Chromium 问题：1152391

Cookie 更新

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

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

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

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

Chromium 问题：997625

仅清除可见的 Cookie

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

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

仅清除可见的 Cookie

Chromium 问题：978059

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

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

用于清除第三方 Cookie 的选项

Chromium 问题：1012337

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

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

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

修改用户代理客户端提示

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

Chromium 问题：1073909

“网络”面板更新

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

开发者工具现在会保留“Record network log”设置。以前，DevTools 会重置用户的选择 。

记录网络日志

Chromium 问题：1122580

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

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

WebTransport 连接

WebTransport 是一个新的 API，提供低延迟的双向客户端-服务器消息传递。了解详情 的用例，以及如何就未来实施的 web.dev/webtransport/.

Chromium 问题：1152290

“在线”重命名为“No throttling”

网络模拟选项“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 Worker 在 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 或 三星 Galaxy Fold

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

您还可以启用实验性网络平台功能来访问新的 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 视频发表评论。

开发者工具的新变化

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