DevTools 新功能(Chrome 93)

Published on Updated on

Translated to: English, Español, Português, 한국어, Pусский, 日本語

感谢流浪大法师提供的翻译。

有兴趣帮忙改进 DevTools 吗?请注册并参与 Google 用户体验调研

样式窗格(Styles pane)可编辑 CSS 容器查询(container queries)

现在,您可以在样式窗格(Styles pane)那里查看以及编辑 CSS 容器查询(container queries)

容器查询的出现,给响应式设计提供更多的动态解决方案。虽@container @规则的工作方式与媒体查询(@media)类似,然而 @container 查询的对象是满足一定条件的祖先容器节点,而不是查询视口以及 user agent 信息。

元素面板那里,点击带有 @container @规则的 DOM 元素。样式窗格现在将显示 @container 信息。您可以点击该信息,以编辑容器尺寸。样式窗格那里同时也会显示相对应的容器信息。把鼠标悬停上去,可以高亮页面中对应的容器元素以及检查容器的真实尺寸。点击可以选中该容器元素。

容器查询特性现还处于实验阶段。测试该特性之前,请在 chrome://flags 那里打开 #enable-container-queries 开关。 样式窗格(Styles pane)可编辑 CSS 容器查询(container queries)

Chromium 议题: 1146422

网络面板可预览 Web bundle

Web bundle 是一种新兴的文件格式,用于封装一个或多个 HTTP 资源。现在,您可以在网络面板那里预览 web bundle 的网络请求。

web bundle 特性现还处于实验阶段。测试该特性之前,请在 chrome://flags 那里打开 #enable-experimental-web-platform-features 开关。

预览 Web bundle

Chromium 议题: 1182537

Attribution Reporting API 调试

现在,Attribution Reporting API 错误会显示在问题标签页那里。

Attribution Reporting是一个新的 API,旨在帮助您在没有使用跨站标识符的情况下,评估用户行为(比如点击或者查看广告)所导致的转化率。

显示在问题标签页里的 Attribution Reporting API 错误信息

Chromium 议题: 1190735

更好地处理控制台里面的字符串

控制台里面的新右键菜单允许您复制任何字符串,作为文本内容、JavaScript 字面量或者 JSON 字面量。

控制台里面的新右键菜单

在 Chrome 90,控制台默认将输出字符串格式化为 JSON 字面量。我们从开发者那里得到反馈:这个改动对开发者造成困扰,一些人觉得字符串的转义有点多,不利于字符串的可读性。

现在,控制台默认将输出字符串格式化为有效的 JavaScript 字面量,并且会进一步提供 3 种复制字符串的选项。复制字符串作为 JavaScript 字面量的这个选项,会转义那些合适且特殊的字符,然后会根据字符串内容来决定是否使用单引号、双引号或者反引号来包裹字符串。复制字符串内容的这个选项呢,会一字不差地将原生的字符串内容(包括换行符以及其它的特殊字符)复制到剪切板。最后,复制字符串作为 JSON 字面量的这个选项,会将字符串格式化为有效的 JSON 字面量,然后复制到剪切板。

Chromium 议题: 1208389

改善 CORS 调试体验

控制台里面的 CORS 相关错误,现在可以链接到网络面板和问题标签页。

点击 CORS 相关错误信息旁边的两个新按钮以查看网络请求,以及进一步理清楚该错误信息,在问题标签页那里获取潜在的解决方案。

CORS 错误信息旁边的图标

Chromium 议题: 1213393

Lighthouse 8.1

现在,Lighthouse 面板运行的是 Lighthouse 8.1。

Lighthouse

如果您的网站有使用 source maps,在 Lighthouse 报告里将显示 View Treemap 按钮。点击该按钮查看您网页所有的 JavaScript 的拆解情况,检测 JavaScript 的体积以及载入时 JavaScript 的覆盖情况。

这个报告也引入一个新的指标过滤条件(参考上述截图里面的 Show audits relevant to 过滤条件)。选择一个指标,以便于获取信息以及相关诊断,从而达到改善该指标的目的。

针对评分的部分,Performance Category 做了很多调整,方便与其它的性能工具保持一致以及更好地反映出 web 的现况。

想看完整的变更列表,请翻阅发布记录

Chromium 议题: 772558

在 Manifest 窗格展示新的 note 链接

现在,Manifest 窗格可以显示新的 note 链接

目前,那些有声明 "new-note" 能力 的 Chrome OS (CrOS)、Chrome 以及安卓(Android)的应用 ,可以会在设备的Stylus设定中被选为 note-taking 应用(前提是 CrOS 设备已经在使用 stylus)。当被选为 note-taking 应用,用户可以通过 stylus palette 上的 "创建 Note" 按钮来启动 APP 。我们在应用的 manifest 文件里面添加 new-note-url 字段,是为了将相同功能给移植到 web 应用。

Manifest 窗格里的新 note 链接

Chromium 议题: 1185678

修复 CSS 选择器匹配问题

DevTools 修复了 CSS 选择器匹配的问题,该功能在上个版本里面有问题。

样式窗格里面,逗号分隔的选择器会以不同的颜色呈现,这取决于该选择器是否匹配到选中的 DOM 节点:

  • 未匹配的选择器部分用浅灰色
  • 匹配的选择器部分用黑色
CSS 选择器匹配

Chromium 议题: 1219153

网络面板支持格式化 JSON 响应

现在,您可以在网络面板里面格式化 JSON 响应。

网络面板里面,打开一个 JSON 响应,点击 {} 图标以便于格式化该 JSON 响应。

格式化 JSON 响应

Chromium bug: 998674

下载 Chrome 预览版本

您可以考虑把 Chrome Canary 版, 开发者版(Dev)测试版(Beta) 设置为默认开发浏览器。这些预览版本能让你抢先体验处于 DevTools 开发阶段的新功能、测试最新的网络平台 API ,让您抢先在用户之前发现您网站上的问题!

联系 Chrome DevTools 团队

您可以透过一下渠道讨论这篇文章的新功能和改进,或一切关于 DevTools 的一切。

  • 提交建议或意见回馈:crbug.com.
  • 报告 DevTools 问题:打开 DevTools,按 更多选项图标   More   > 帮助 > 报告 DevTools 问题
  • 在推特上,发推文: @ChromeDevTools.
  • 在我们的 What's new in DevTools YouTube 视频底下留言。

更多 DevTools 的功能

欲查询完整的 DevTools 已发布的功能,请参考 What's New In DevTools 英文系列。以下是部分已翻译成中文的内容。

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.