1.模拟慢速网络和慢速设备我们可能习惯了城市的网速，是杠杠的，不代表国内网速一样，在一些偏远的地方，网速还是慢得可怜，所以有时候我们做的产品需要考虑到网速慢，那怎么模拟呢？打开谷歌浏览器的性能选项卡，点击齿轮图标可以看到Newwork和CPU的模拟。2.颜色选择器点击代表颜色的小方块，弹出颜色选择器。启用颜色选择器后，您可以将鼠标悬停在网页上并使用颜色选择器获取该像素的颜色。弹出颜色选择器的小方块也有快捷键Shift-click可以改变颜色格式。3、AuditsAudits（审计），这个功能一直存在，但是在chrome60之后，有了翻天覆地的变化：引入了另一个谷歌开源项目：LightHouse。Audits主要从5个方面对网页进行评分，最后生成报告：4.PrettyPrint（显示可读代码）我们知道很多网站都会压缩Javascript代码，但这对开发者和学习者来说很重要。阅读起来比较困难，谷歌为我们提供了一个功能，可以更好的查看压缩文件。我们点击下面的大括号{}图标来使用PrettyPrint功能。5.快速文件切换器如果您知道文件名，则不必打开“来源”选项卡。只要按cmd/ctrl+p，然后输入你要查找的文件名，然后回车就可以了。6.响应式模式我们在桌面和移动设备上开发网站，通常我们更喜欢最初的桌面体验。但这与越来越多的用户使用移动设备访问网络的趋势背道而驰。为了改善网站的用户体验，我们需要准确了解网站在移动设备上的表现。Chrome开发者工具包中添加了一个手机模拟器功能来帮助我们测试：对于大多数人来说，大多数时候，他们只需要在不同的屏幕尺寸和方向上查看他们的网站。7.截图一，F122，[ctrl+shift+p]3.输入“capture”4.选择以下任一项抓取全尺寸截图“【整个网页】抓取节点截图”【节点网页】“抓取屏幕截图”【当前画面】8.扩展我们可以为Chrome开发者控制台安装扩展。许多框架都有自己的扩展来简化其技术的开发（Vue、Angular、React等）。[这是精选DevTools扩展的列表][1]。9.CoverageCoverage是chrome开发者工具的一个新功能，字面意思就是可以用来检测网站代码运行时哪些js和css已经运行，哪些js和css还没有使用如图，这是我打开csdn网页时显示的运行和未运行的代码。如何打开caverage前提条件：chrome浏览器版本必须是59以上。使用ctrl+shift+i快速打开devtools，点击右上角的...Moretools。有一个覆盖范围。那么这个新功能有什么作用呢？如上图所示，我们加载的css和js文件的数量显示在最右边。红色区域代表已经运行的代码，青色代表已经加载但未运行的代码。可以用来发现页面中没有使用过的js和css代码。您可以只向用户提供必要的代码，这样可以提高页面的性能。这对于确定哪些脚本可以拆分和延迟加载非关键脚本很有用。10.实时跟进新功能。Chrome的开发工具会不断更新。它将发布有关[DevTools的新增功能][2]的更新视频。我可以实时了解谷歌的一些有用功能。
