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

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

信任类型违规行为的断点

您现在可以在 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 问题:11507971150797

自定义 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 问题:11498591148353

新增了用于在“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 视频发表评论。

开发者工具的新变化

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