共计 2098 个字符，预计需要花费 6 分钟才能阅读完成。
作者：FelDev
译者：前端小智
起源：medium
点赞再看 ，微信搜寻【大迁世界】,B 站关注【前端小智】 这个没有大厂背景，但有着一股向上踊跃心态人。本文
GitHubhttps://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。
最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。
github 地址：https://github.com/qq44924588…
1. 模仿慢速网络和慢速设施
咱们可能习惯了在城市的网速，那是杠杠的，并不象征网速在中国哪个都一样的，在一些偏僻中央，网速仍然慢的可怜，所以有时候咱们所做的产品是须要思考网速慢的状况的，那怎么模仿呢？
关上谷个浏览器的 performance 选项卡，而后单击右上角的齿轮图标就能够看到 Newwork 和 CPU 的模仿状况。
2. 色彩选择器
单击示意色彩的小方块，弹出色彩选择器。
启用色彩选择器后，能够将网页悬停并应用色彩选择器来获取该像素的色彩。
弹出色彩选择器的小方块还有快捷键按住 Shift 并单击以更改色彩格局。
3. Audits
Audits（审计）, 这个性能其实始终存在，只不过在 chrome 60 之后，产生了天翻地覆的变动：引入了 Google 开源的另外一个我的项目：LightHouse。
Audits次要从 5 个方面来给网页打分，最终会生成一个 report:
4.Pretty Print（显示可读代码）
咱们晓得许多网站都对 Javascript 代码进行了压缩，但这对开发者和学习者来说，读起来很吃力，谷歌提供一个性能给咱们，能够更好查看压缩文件。
咱们点击下方的大括号 {} 图标，即可应用 Pretty Print 性能了
5. 疾速文件切换器
如果你晓得文件名，则不用关上“Sources”选项卡。只需按cmd/ctrl + p，而后输出你想查找的文件名，接下按下回车就 ok 了。
6. 响应模式
咱们在桌面和挪动设施上开发网站，通常咱们偏向于最后的桌面体验。然而这与越来越多的用户应用挪动设施拜访网络的趋势相脱离。为了进步网站的用户体验，咱们须要精确地晓得网站在挪动设施上的成果。Chrome 开发者工具包里退出了手机模拟器个性，帮忙咱们测试：
对于大多数人而言，大多数工夫只须要通过不同的屏幕尺寸和方向查看他们的网站即可。
大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。
我和阿里云单干服务器，折扣价比拟便宜：89/ 年，223/ 3 年，比学生 9.9 每月还便宜，买了搭建个我的项目，相熟技术栈比拟香（老用户用家人账号买就好了，我用我妈的)举荐买三年的划算点，点击本条就能够查看。
Icomo
7. 屏幕截图
1、F12
2、【ctrl+shift+p】
3、输出“capture”
4、抉择以下任意
- capture full size screenshot”【整个网页】
- capture node screenshot”【节点网页】
- “capture screenshot”【以后屏幕】
8. Extensions
咱们能够将扩大程序安装到 Chrome 开发者控制台。许多框架都有本人的扩展名，以简化其技术（Vue，Angular，React 等）的开发。这是 Featured DevTools 扩大的列表。
9. Coverage
Coverage 是 chrome 开发者工具的一个新性能，从字面意思上能够晓得它是能够用来检测代码在网站运行时有哪些 js 和 css 是曾经在运行，而哪些 js 和 css 是还没有用到的，如图，这是我在关上 csdn 网页时，所显示的已运行和尚未运行的代码状况。
如何关上 caverage 前提：chrome 浏览器的版本必须是 59 或以上，在 ctrl+shift+ i 疾速关上 devtools，点击右上角的 … More tools 有个 Coverage。
那这个新性能有什么作用呢？
如上图所示，最左边显示的是咱们加载的 css 和 js 文件数量，红色区域示意已运行的代码，而青色示意已加载但未运行的代码。可用来发现页面中尚未用到的 js 和 css 代码，你能够为用户只提供必要的代码，这样就能够晋升页面的性能。这对于找出能够进行拆分的脚本以及提早加载非关键脚本来说十分有用。
10. 实时跟进新性能
Chrome 的开发工具会不断更新，它会在 What’s New In DevTools 上公布更新的视频，咱们能够时不是去看看，理解一些新进去的性能，这样咱们就能实时晓得谷歌的一些好用的性能了。
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
起源：https://medium.com/better-pro…
交换
文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。