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

Kayce Basques

复制元素的样式

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

复制样式。

图 1. 复制元素样式。

感谢 Adam Argyle 和 VisBug 的灵感。

直观呈现布局偏移

假设您正在阅读自己喜爱的网站上的一篇新闻报道。在阅读网页时，您 因为内容不断跳动，所以会不断失去定位。这种问题称为布局 移动。通常，在图片和广告加载完毕时会出现此问题。该网页尚未预留任何空间 因此浏览器必须将所有其他内容下移 。解决方法是使用占位符。

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

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

布局偏移。

图 2. 布局偏移。

Chromium 问题 961846

Audits 面板中的 Lighthouse 5.1

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

新的“审核”面板界面。

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

Lighthouse 5.1 的 Node 和 CLI 版本具有 3 个值得关注的新主要功能：

  • 效果预算。通过指定请求来防止您的网站随时间的推移而退化 页面大小和文件大小。
  • 插件。使用您自己的自定义审核扩展 Lighthouse。
  • 堆栈包。添加针对特定技术栈量身定制的审核。WordPress 堆栈包 先发货。React 和 AMP Stack Pack 尚处于开发阶段。

操作系统主题同步

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

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

按 Ctrl + Alt + B 或 在“Sources”面板的编辑器中聚焦时，按 Command+Option+B (Mac) 以打开 Breakpoint Editor。使用断点编辑器创建日志点并 条件断点。

断点编辑器。

图 4. 断点编辑器。

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

现在，当从以下位置加载资源时，Network 面板的 Size 列会显示 (prefetch cache) 预提取缓存预提取是一项全新的网络平台功能，可加快后续网页的加载速度 。根据我能否使用...报告，截至 2019 年 7 月，全球有 83.33% 的浏览器支持该功能。

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

图 5. Size 列显示 prefetch2.html 和 prefetch2.css 来自 (prefetch cache)。

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

Chromium 问题 935267

查看对象时的私有属性

控制台现在会在其对象预览中显示专用类字段。

检查对象时，控制台现在会显示“#color”等私有字段。

图 6. 左侧的旧版 Chrome 在检查#color 对象，而右侧的新版本则支持。

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

“应用”面板的“后台服务”部分现在支持推送消息和 通知。推送消息是指服务器向 Service Worker 发送信息时出现的推送消息。 在 Service Worker 或页面脚本向用户显示信息时发生通知。

与 Chrome 76 中的后台提取和后台同步功能一样，用户启动 录制时，此网页上的推送消息和通知会被记录 3 天，即使该网页 即使 Chrome 已关闭。

新的“通知”和“推送消息”窗格。

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

Chromium 问题 927726

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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