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

by Teobler on 23 / 05 / 2020

views

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。