Chrome 77 开发者工具更新

拷贝元素样式

在DOM树上右键点击某节点来拷贝CSS到剪贴板。

布局变动可视化

注意：此功能可能使你的屏幕频繁闪动
有时候当你在喜欢的网站上读新闻的时候，你会因为图片和广告等内容的加载完毕使得内容不断变动而失去当前阅读的位置。这种情况称为布局变动（Layout shifts）。这是因为网页开始没有为图片，广告等内容预留地方。解决方案就是使用"占位符"
开发者工具现在可以帮助你检测到布局变动:

1. 打开命令菜单
2. 输入Rendering
3. 运行 “Show rendering”命令
4. 打开"layout shift regions"功能
   这样当你检查一个网页时，布局变动就以蓝色高亮显示。

审查面板中的Lighthouse 5.1

操作系统主题同步

当你使用暗色调主题时，开发者工具界面也自动切换到它自己的暗色调主题外观。

打开断点编辑器的快捷键

首先打开命令菜单, 运行"Breakpint Editor"命令将为你打开断点编辑器。可以用来创建日志点和条件断点

网络面板中的预加载缓存

在网络面板中的size列，如果某项资源是使用prefetch cache加载的，则会显示成prefetch cache。预加载是一项用于加速后续页面加载的web 平台特性。有报告称截止到2019年七月，有83.3%的浏览器支持这一功能。

对象私有属性

控制台现在可以在对象预览中显示私有类属性。

Application面板里的通知及推送消息

Application 面板的后台服务部件现在支持推送消息和通知了。推送消息发生在当一个server发送信息给一个service worker的时候。通知发生在一个service worker或页面脚本显示信息给用户的时候。