作者：FelDev译者：前端小智来源：Medium喜欢再看，微信搜索【伟大的走向世界】没有大厂背景的就关注这个，但具有积极向上趋势心态的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。1.模拟慢速网络和慢速设备。我们可能习惯了城市的网速。这是一个杠杆。这并不意味着中国各地的互联网速度都一样。在一些偏远的地方，网速还是慢的可怜，所以有时候我们做的产品需要考虑到网速慢，那怎么模拟呢？打开浏览器的性能选项卡，点击右上角的齿轮图标可以看到Newwork和CPU的模拟。2.颜色选择器点击代表颜色的小方块，弹出颜色选择器。启用颜色选择器后，您可以将鼠标悬停在网页上并使用颜色选择器获取该像素的颜色。弹出颜色选择器的小方块也有快捷键Shift-click可以改变颜色格式。3、AuditsAudits（审计），这个功能一直存在，但是在chrome60之后，有了翻天覆地的变化：引入了另一个谷歌开源项目：LightHouse。Audits主要从5个方面对网页进行评分，最终会生成一份报告：4.PrettyPrint（显示可读代码）我们知道很多网站压缩了Javascript代码，但是对于开发者和学习者来说，阅读起来比较困难，Google为我们提供了更好地查看压缩文件的功能。我们点击下面的大括号{}图标来使用PrettyPrint功能。5.快速文件切换器如果您知道文件名，则不必打开“来源”选项卡。只要按cmd/ctrl+p，然后输入你要查找的文件名，然后回车就可以了。6.响应式模式我们在桌面和移动设备上开发网站，通常我们更喜欢最初的桌面体验。但这与越来越多的用户使用移动设备访问网络的趋势背道而驰。为了改善网站的用户体验，我们需要准确了解网站在移动设备上的表现。Chrome开发者工具包中添加了一个手机模拟器功能来帮助我们测试：对于大多数人来说，大多数时候，他们只需要在不同的屏幕尺寸和方向上查看他们的网站。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。我和阿里云服务器合作，优惠价格比较便宜：89/年，223/3年，比学生便宜9.9/月，买了建了一个项目，熟悉技术栈比较香（老用户可以买用他们的家庭账户，我用我妈妈的）推荐购买三年的便宜货，点击本文查看。Icomo7。截图一，F122，[ctrl+shift+p]3.输入“capture”4.选择以下任一项抓取全尺寸截图“【整个网页】抓取节点截图”【节点网页】“抓取屏幕截图”【当前画面】8.扩展我们可以为Chrome开发者控制台安装扩展。许多框架都有自己的扩展来简化其技术的开发（Vue、Angular、React等）。这是精选DevTools扩展的列表。9.CoverageCoverage是chrome开发者工具的一个新功能，字面意思就是可以用来检测网站代码运行时哪些js和css已经运行，哪些js和css还没有使用如图，这是我打开csdn网页时显示的运行和未运行的代码。如何打开caverage前提条件：chrome浏览器版本必须是59以上。使用ctrl+shift+i快速打开devtools，点击右上角的...Moretools。有一个覆盖范围。那么这个新功能有什么作用呢？如上图所示，我们加载的css和js文件的数量显示在最右边，红色区域代表已经运行的代码，青色代表已经加载但没有运行的代码。可以用来发现页面中没有使用过的js和css代码。您可以只向用户提供必要的代码，这样可以提高页面的性能。这对于确定哪些脚本可以拆分和延迟加载非关键脚本很有用。10.实时跟进新功能。Chrome的开发工具会不断更新。它将发布有关DevTools新功能的更新视频。我们可以时不时的去看看，了解一些新的功能，这样我们就可以实时了解谷歌。一些有用的功能。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。来源：https://medium.com/better-pro...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博客早一两篇），这篇文章GitHubhttps://github.com/qq449245884/xiaozhi已经收录，还有我的很多文档已经整理好了。欢迎明星和完美。可以参考考点面试。另外关注公众号，后台回复福利就可以看到福利了。你知道。
