(2)你真的会用Chrome devtool吗?

本文首发于个人我的博客: teobler.com

Performance

Performance API

有的时候咱们可能会想测试一下用户的某一个操做要消耗多少时间，而一般通常人会这么作：

const start = new Date().getTime();
 // do your work  const end = new Date().getTime(); console.log(end - start); 复制代码

使用 performance API，咱们能够这么作：

performance.mark("start");
 // do your work  performance.mark("end"); performance.measure("your work name", "start", "end");  console.log(performance.getEntriesByType("measure")); 复制代码

以后在控制台里咱们能够看到这样的 console 信息

image-20200522145519948

同时在 chrome 的 performance tab 里面，若是你进行相应的记录，会产生一个在 User Timing 标题下的可视化的图表

image-20200522145610966

Networking

network面板

首先老规矩咱们来介绍下面板：

image-20200522145644585

• 中间带有毫秒数的部分是一个瀑布流，它显示了该网页中每个资源加载花费了多长时间，不一样的颜色标识了不一样的加载阶段
• 下面的表格详细展现了每个资源的信息

  • 第一栏是该资源的名字
  • 第二栏是该资源的加载情况，也就是网络请求的状态码
  • 第三栏是类型，标识该资源是document / stylesheet / script...
  • 第四栏是该资源的调用者，这里的index指的就是index.html调用的改资源，将鼠标放在某个资源上而后按住shift，devtool会用绿色为你标识出该资源的调用者，红色标识出该资源又调用了哪些其余的资源
  • 第五栏是大小，可是注意这里有两个大小，第一个是该资源的实际大小，第二个是该资源压缩后的大小，若是该资源来自于cache，这里就会显示cache
  • 第六栏是加载该资源花费的时间，一样对应了压缩前和压缩后的时间
  • 最后一栏显示了该资源的详细加载的过程

其中最后一栏中有不一样的颜色，它们表明了不一样的意义：

• 白色 - 该资源在队列中，这一般代表:

  • 这个资源被渲染引擎推迟加载以把时间让给更重要的资源(好比styles和script)，一般图片的渲染会被延迟
  • 端口被占用在排队
  • 浏览器的TCP链接满了，因此在排队(在HTTP1中浏览器只能一次同时创建6个链接)
  • 建立磁盘缓存所花费的时间也会被标记为队列等待
• 灰色 - 阻塞:

  • 你的请求还没发出去，可能发生在代理查找或是队列因为不知道啥缘由阻塞了
  • 与代理服务器链接所花费的时间
• 深绿色 - DNS查找: 一般在你访问一个你历来没有访问过的域时会稍微长些，由于没有缓存
• 橙色 - 链接初始化 / 正在链接: 创建链接的时间，好比TCP链接的三次握手 / 四次挥手
• 深橙色 - SSL链接正在创建
• 绿色 - 请求已经发送 / 正在发送 / 等待: 这段时间是请求发送的一瞬间到咱们接收到第一个字节的间隙，若是这段时间不一样寻常的长的话，一般咱们的服务器网络配置或者服务器自己有问题，好比一段sql查询很慢，那么绿色的这段时间就会很长
• 蓝色 - 资源下载: 指的是资源开始下载到下载完成的这一段时间

实例

接下来咱们来看几个例子，看看这些颜色到底有什么用:

image-20200522145708160

这张图很明显是下载的文件太大了

image-20200522145721320

这张图后端可能出问题了

image-20200522145734992

这张图的总耗时并不长，可是能够看到各类时间都挺长，从DNS查找的时长来看多是第一次访问一个新的域名，致使全部的链接时间都比较长

image-20200522145750029

这张图代表你一次性下载的资源过多，致使队列等待时间过长

截图

在network面板最上方有一个消摄像机的图标，点击后刷新页面devtool会记录下加载网页过程当中的每一次重绘的时间点并截图，你能够从中看到整个网页加载的过程，你可使用这个功能来测试你的网站若是在网络环境比较差的状况下如何加载的，用户体验是否友好等等。

在截图完成后你能够双击某一个图片放大，而后使用左右箭头来预览不一样时刻你的网页加载状况。

同时你能够用这个功能来提高一些微小的性能问题，好比加载太多的图片时如何加载比较好等等。好比你在加载一个比较大的资源的时候若是阻塞了其余全部资源的加载的话是否能够考虑将这个资源延迟加载会比较好，否则用户将没有办法看到网页上的数据。

Auditing

auditing能够判断你网页的一些问题，好比加载时长，SEO，用户体验等等。

在auditing面板中google集成了Lighthouse，这是google开发的专门用于分析网页问题(好比SEO，性能，最佳实践等等)的一个工具，它的使用很简单，打开audit面板，进入你想测试的网页，勾上想要测试的内容，点击generate report按钮就能够了，以后一段时间的分析，Chrome将为你的网站进行一系列的分析和评分，在有问题的地方还可以给出一些建议，帮助你解决网站的各类问题。

image-20200522145802055

在报告的最上面能够充看到报告的一个总体状况，点击某一个分数后就可以跳转到相应的板块，咱们以performance为例

image-20200522145813872

在图中咱们能够看到Chrome认为有问题的项目就会被标红，点击右边的按钮能够获得更多的信息，而后点击learn more能够看到一些google的建议，总的来讲这个面板对于提高咱们的网站体验有着不错的效果。你能够经过这个工具更加熟悉你的网站，能够看到那些地方是还能够改进的，哪些地方是作的不错的。

在这里能够介绍一个差很少的网站叫作sonarwhal，它的功能也跟devtool里面的audit相似

Node.js Profiling

在启动node server的时候若是在命令行中加上--inspect的话，就能够在Chrome中的console中看到一个Node的logo，点击后能够打开node专用的devtool，在这里你能够在sources中进行一切操做，同时这里有一个profile页面，选中相应的server并点击start按钮后，刷新相应的页面，在刷新完成后再回来点击stop，这时Chrome会展现在刚刚的一次刷新中你的server作了什么:

image-20200522145826064

图中的横轴是时间，纵轴是此次刷新页面server端的调用栈。那么这玩意儿是干吗用的呢？profile是为了可以让开发者直观地看到本身的Node server端的一些调用状况，在出问题时能够立刻看到一个调用消耗的时间很长，那么就能够定位到代码中，看是否是相关的调用发生了不可预知的错误，及时修正。在这个profile中点击相应的function将直接跳转到相应的source code。

---

若是你喜欢个人文章，请帮我点个赞，还能够关注个人公众号

本文使用 mdnice 排版