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

使用新的“问题”标签页解决网站问题

抽屉式导航栏中新的问题标签页旨在帮助减少控制台的通知疲劳和杂乱。目前,控制台是网站开发者、库、框架和 Chrome 本身的中心位置,可用于记录消息、警告和错误。“问题”标签页以结构化、汇总且可操作的方式显示来自浏览器的警告,并提供指向开发者工具中受影响资源的链接,并提供有关如何解决问题的指导。随着时间的推移,越来越多的 Chrome 警告将显示在“问题”标签页(而不是控制台)中,这有助于减少控制台的混乱。

请查看使用 Chrome 开发者工具“问题”标签页查找和修复问题,了解如何开始使用。

“问题”标签页。

Chromium bug:#1068116

在“检查模式”提示中查看无障碍功能信息

检查模式提示现在会指明元素是否具有可访问的名称和角色,以及是否可聚焦键盘

包含无障碍功能信息的“检查模式”提示。

Chromium 错误:#1040025

性能面板更新

在页脚中查看总阻塞时间 (TBT) 信息

记录加载性能后,Performance 面板现在会在页脚中显示 Total Blocking Time (TBT) 信息。TBT 是一项加载性能指标,有助于量化网页需要多长时间才可用。它实质上是测量网页看上去可以使用多长时间(因为其内容已渲染到屏幕上),但实际上无法使用,这是因为 JavaScript 阻塞了主线程,导致网页无法响应用户输入。TBT 是主要实验室指标,用于估算 First Input Delay,它是 Google 新推出的核心网页指标之一。

如需获取总阻塞时间信息,请勿使用重新加载页面 重新加载页面 工作流来记录页面加载性能。而应点击 Record 图标 记录,手动重新加载页面,等待页面加载,然后停止记录。如果您看到 Total Blocking Time: Unavailable,则表示开发者工具无法从 Chrome 的内部分析数据中获取所需信息。

“Performance”面板录音的页脚中的“Total Blocking Time”信息。

Chromium bug:#1054381

新版“体验”部分中的布局偏移事件

“Performance”面板新增的 Experience(体验)部分可以帮助您检测布局偏移。 Cumulative Layout Shift (CLS) 指标可帮助您量化不必要的视觉不稳定性,是 Google 新推出的核心网页指标之一。

点击 Layout Shift 事件即可在摘要标签页中查看布局偏移的详细信息。将鼠标指针悬停在 Moved fromMoved to 字段上,即可直观地查看发生布局偏移的位置。

布局偏移的详细信息。

控制台中的 Promise 术语更加准确

在记录 Promise 时,控制台用于将 Promise 的状态错误地描述为 resolved

使用旧版“resolved”术语的控制台示例。

控制台现在使用 fulfilled 一词,该术语符合 Promise 规范

使用“执行”这一新术语的控制台示例。

V8 bug:#6751

“Styles”窗格更新

支持 revert 关键字

现在,“样式”窗格的自动补全界面会检测 revert CSS 关键字,该关键字会将属性的级联值还原为在未更改元素的样式的情况下该值原本的值。

将属性的值设置为要还原。

Chromium bug:#1075437

图片预览

将鼠标悬停在“样式”窗格中的 background-image 值上,即可在提示中查看图片的预览。

将鼠标悬停在背景图片值上。

Chromium 错误:#1040019

颜色选择器现在使用以空格分隔的函数颜色表示法

CSS 颜色模块级别 4 指定 rgb() 等颜色函数应支持以空格分隔的参数。例如,rgb(0, 0, 0) 等同于 rgb(0 0 0)

现在,当您使用颜色选择器选择颜色,或在“样式”窗格中交替使用颜色表示法(具体方法是按住 Shift 键并点击颜色值)时,您会看到以空格分隔的参数语法。

在“样式”窗格中使用以空格分隔的参数。

您还会在“Computed”窗格和“Inspect Mode”提示中看到该语法。

开发者工具正在使用新语法,因为即将推出的 CSS 功能(例如 color())不支持已废弃的逗号分隔参数语法

大多数浏览器都已经支持以空格分隔的参数语法一段时间了。请参阅我可以使用以空格分隔的功能颜色表示法吗?

Chromium bug:#1072952

弃用了“元素”面板中的属性窗格

元素面板中的 Properties 窗格已被弃用。请改为在控制台中运行 console.dir($0)

已弃用的“Properties”窗格。

参考文献:

“Manifest”窗格中对应用快捷方式的支持

应用快捷方式可帮助用户快速启动 Web 应用中的常见或推荐的任务。系统仅针对安装在用户的桌面设备或移动设备上的渐进式 Web 应用显示应用快捷方式菜单。

如需了解详情,请参阅利用应用快捷方式快速处理各项事务

“Manifest”窗格中的应用快捷方式。

下载预览渠道

您可以考虑将 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