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

复制元素的样式

右键点击 DOM 树中的某个节点,将该 DOM 节点的 CSS 复制到剪贴板。

复制样式。

图 1. 复制元素样式。

感谢 Adam ArgyleVisBug 给予灵感

直观呈现布局偏移

假设您正在喜爱的网站上阅读新闻报道。您在阅读页面时,会因为内容在跳动中来回跳动而迷失方向。此问题称为布局偏移。这种情况通常发生在图片和广告加载完毕时。网页没有为图片和视频预留任何空间,因此浏览器必须将所有其他内容下移,为它们腾出空间。解决方案就是使用placeholders

现在,开发者工具可以帮助您检测布局偏移:

  1. 打开命令菜单
  2. 开始输入 Rendering
  3. 运行 Show Rendering 命令。
  4. 选中 Layout Shift Regions 复选框。当您与页面交互时,布局偏移会以蓝色突出显示。

布局偏移。

图 2. 布局偏移。

Chromium 问题 961846

“审核”面板中的 Lighthouse 5.1

Audits 面板现在正在运行 Lighthouse 5.1。新的审计包括:

新的“审核”面板界面。

图 3. 新的“审核”面板界面。

Lighthouse 5.1 的 Node 和 CLI 版本具有 3 项新的主要功能,值得您了解:

  • 效果预算。指定网页不应超过的请求数和文件大小,以防止网站随时间倒退。
  • 插件。使用您自己的自定义审核扩展 Lighthouse。
  • 堆栈包。添加针对特定技术栈量身定制的审核机制。WordPress 堆栈包最先发布。React 和 AMP 堆栈包正在开发中。

操作系统主题同步

如果您使用的是操作系统的深色主题,开发者工具现在会自动切换为自己的深色主题

用于打开断点编辑器的键盘快捷键

当焦点位于“来源”面板的编辑器中时,按 Ctrl + Alt + BCommand + Option + B (Mac) 以打开断点编辑器。使用断点编辑器创建日志点条件断点

断点编辑器。

图 4. 断点编辑器

在“网络”面板中预提取缓存

从预提取缓存加载资源时,Network 面板的 Size 列现在显示 (prefetch cache)预提取是一项新的 Web 平台功能,用于加快后续网页加载速度。Can I use... 报告显示,截至 2019 年 7 月,全球 83.33% 的浏览器都支持该功能。

显示资源来自预提取缓存的“大小”列。

图 5. Size 列显示 prefetch2.htmlprefetch2.css 来自 (prefetch cache)

如需试用,请参阅预提取演示

Chromium 问题 935267

查看对象时的私有属性

控制台现在会在其对象预览中显示私有类字段

检查对象时,控制台现在会显示不公开字段,例如“#color”。

图 6. 在检查对象时,左侧的旧版 Chrome 不会显示 #color 字段,而右侧的新版 Chrome 则会显示。

“Application”面板中的通知和推送消息

“Application”面板的“Background Services”部分现在支持推送消息和通知。推送消息在服务器向 Service Worker 发送信息时发生。当 Service Worker 或页面脚本向用户显示信息时,就会发送通知。

Chrome 76 中的后台提取和后台同步功能一样,开始录制后,系统会记录此页面上的推送消息和通知 3 天(即使页面已关闭,甚至在 Chrome 关闭时也是如此)。

新的 Notifications 和 Push Messages 窗格。

图 7. Application 面板中新增的“Push Messages”和“Notifications”窗格。

Chromium 问题 927726

下载预览渠道

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