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

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

可信类型违规时的断点

现在,您可以在 Sources 面板中设置断点并捕获“Trusted Type Violations”中的异常。

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

Sources 面板中,打开调试程序边栏窗格。展开 CSP Violation Breakpoints 部分,然后选中 Trusted Type violations 复选框,以在异常上暂停。您可以访问此演示页面亲自体验。

可信类型违规时的断点

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 类别变化很大。
  • 可安装组现在完全由支持 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 问题:11507971150797

适用于自定义 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

Cookie 窗格中的清除所有 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 问题:11498591148353

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

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

  • 来源面板中查看文件,或者
  • 元素面板的“样式”窗格中的文件名

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

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

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

Chromium 问题:1155120

帧详情视图更新

Frame details 视图中的新 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 DuoSamsung 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)。

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

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

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

木偶演奏器录音机

Chromium 问题:1144127

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

新的字体编辑器是 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 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59