浏览器DevTools你真的会用吗?

最新推荐文章于 2022-08-24 15:58:16 发布

weixin_45150228

最新推荐文章于 2022-08-24 15:58:16 发布

阅读量244

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45150228/article/details/126130016

版权

Start

本文将会介绍浏览器devtool的一些常用工具方法，这些工具能够能够以可视化的方式展现当前网页情况，我们也能快速定位代码问题，如果我们能很好的利用起来，那就能写出高质量代码。

JS分析器

打开开发者工具按ctrl+shift+p搜索Show Javascript Profiler选中然后回车

在这里插入图片描述

可以看到当前js代码执行时间，也可以通过左上角录制，测试当前按钮执行的函数是否有性能问题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qgGKlzJk-1659444062626)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56d656402d2b4ccca4b86bf52cb0a3cd~tplv-k3u1fbpfcp-watermark.image?)]

然后我们点击右侧的html

在这里插入图片描述

点击事件执行时间和函数每一行执行的时间都给你展示出来，是不是very nice?

Rendering

搜索Rendering

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yWRzgbI4-1659444062628)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b28c67929d0447b3ac421bc5b6e85740~tplv-k3u1fbpfcp-watermark.image?)]

1. Paint Flashing(绘画闪烁)

>页面中需要重绘的区域会突显成绿色

2. Layer Shif Regions(层移位区域)

>页面中需要重排的区域会突显成蓝色

3. Scrolling Performance Issues(滚动性能问题)

>页面中减慢滚动速度的元素会突显成蓝绿色，包括触摸滚轮事件处理程序和其他主线程滚动情况

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zoJx2S4r-1659444062629)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7b6d3c49785e4a5e8436c4fbd77f2328~tplv-k3u1fbpfcp-watermark.image?)]

4. Core Web Vitals(核心网络生命力)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zogKPSzA-1659444062629)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0cd38a281c474ac4b265db9b386417b5~tplv-k3u1fbpfcp-watermark.image?)]

右上角面板中我们能够看到当前网站的三大核心指标所消耗的时间，这里做个简单的介绍：

$\color{green}{LCP}$ (Largest Contentful Paint) 显示最大内容元素所需的时间，衡量网站的载入效率
$\color{green}{FID}$ (First Input Delay) 首次输入延迟时间，衡量网站互动性
$\color{green}{CLS}$ (Cumulative Layout Shift) 累计版面配置转移，衡量网页稳定性

那我们拿到这些指标，再结合浏览器相关标准就能有目的性的做性能优化，那性能优化相关我打算后期再出一篇文章，这里不做过多讨论。

图层面板

搜索Show Layers

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uSwwYoif-1659444062630)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/575386534ae148b1916ecc367a75d506~tplv-k3u1fbpfcp-watermark.image?)]

Slow scroll rects翻译的意思是慢速移动矩形，其实就是对应上面Rendering中的第3点，影响页面滚动的元素。有时候在写页面的时候，页面出现横向滚动条又无法定位到哪个子集元素宽度超出了，这时候就可以打开Layers面板查看了，能快速定位我们的css问题。

Css概览

搜索Show CSS Overview

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-61uJKAqU-1659444062631)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99f36a41c19344ef920b080694bc889a~tplv-k3u1fbpfcp-watermark.image?)]

颜色和字体颜色可以给ui检查检查，未使用的声明中点击数值可以看到具体的元素，鼠标放上去能定位到DOM位置。

Memory

查看内存使用情况，是否有内存泄露

1.测试当前内存

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q8BeAq8G-1659444062631)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34c9e25f99fe4c84b433d3d539272b47~tplv-k3u1fbpfcp-watermark.image?)]
点击Heap snapshot，再点击左上角圆圈，获取当前快照
在这里插入图片描述

可以看到当前内存占用情况

2.测试内存泄漏

点击Allocation instrumentation on timeline，再点击左上角圆圈，开始记录内存情况

在这里插入图片描述

可以看到内存泄露了，点击(array)进去能看到具体哪个变量造成的内存泄露。

3.performance查看内存泄露

切到performance也能测内存泄露，我们需要在下方勾选Menory，再去录制即可。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZEK9mmsV-1659444062633)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecc7965c8b624fda904a2adf7e66600a~tplv-k3u1fbpfcp-watermark.image?)]

可以看到内存一直在增加，没有平稳成一条直线就说明有泄露了。

覆盖范围

搜索Coverage

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFqbz5Wu-1659444062633)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a7263ab9ebd4fe38edf67d09cb4aeb8~tplv-k3u1fbpfcp-watermark.image?)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RwokKmvi-1659444062634)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/717db37e9ea94c49b7a28a41efdd2257~tplv-k3u1fbpfcp-watermark.image?)]

可以看到,右边百分比就是当前代码未使用到的,单位是字节，所以我们可以对此优化。

性能监视器

搜索Show Performance Monitor

在这里插入图片描述

可以看到：CPU使用情况、JS内存大小、DOM节点数等都可以实时监控。

监控内存泄漏到平稳图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ln6pgk84-1659444062635)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34b1d68086494011835e21a11681a483~tplv-k3u1fbpfcp-watermark.image?)]

FPS

简介：FPS(Frames Per Second)，表示每秒传输帧数，是速度单位，是用来分析动画的一个主要性能指标。一般在50-60FPS的动画会相当流程，30FPS就会感觉卡顿了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kXXHyE3D-1659444062636)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/acc55a921a6741c09aaf0f37fc65af17~tplv-k3u1fbpfcp-watermark.image?)]