浏览器DevTools你真的会用吗?

欧巴_
6,080 阅读7分钟

Start

本文将会介绍浏览器devtool的一些常用工具方法，这些工具能够以可视化的方式展现当前网页情况。平常我们在做性能优化的时候，第一步是分析性能瓶颈，第二步借助工具找到问题，第三步解决瓶颈问题。那浏览器devtool工具就能帮助我们快速定位代码问题，从而对症下药。

奇技淫巧

把这个放在前面，我觉得这个挺有用的，而且工作中也用得到。

Copy property path

快速复制接口属性值

当后端返回的数据结构嵌套很深的时候，你要通过最外层对象取里面值，你可能是一个个取，那可太麻烦了，往下看，右击你需要的字段：

image.png data[0].creator.avatar_large，你要的数据类型就在粘贴板中啦。 以下熟悉作了解即可，方便操作（在Elements面板中也有）

  • Copy value 复制属性的值
  • Expand recursively 递归展开
  • Collapse children 收缩所有子项

也可以直接control/command + f 搜索对应字段

Scroll into view

可以在Elements面板中快速定位到当前DOM元素

image.png 上图有个Hide Element大家知道什么时候用吗？摸鱼神具。

Performance(重点)

强大的性能监控工具

工具栏

image.png

从左到右依次为：

  • Record(Ctrl+E) 记录运行时性能
  • Start profiling and reload page(Ctrl+Shift+E) 记录负载性能，会重新加载页面
  • clear 清空面板
  • Load profile... 上传
  • Save profile... 下载，会生成个json文件，需要做比对可以再上传
  • recordings 生成过的profile列表记录，注意：点clear就全没有了
  • Screenshots 屏幕截图，启用会在录制时捕获每一帧的屏幕截图
  • Memory 内存 下面也会有重点介绍
  • Web Vitals 核心功能，会显示LCP，FCP，LongTasks
  • Collect garbage 录制时强制垃圾收集

概览

image.png 在概览上可以拖动鼠标进行缩放，可以点击定位，可以鼠标滚轮放大缩小。

CPU颜色划分： Loading\color{blue}{Loading}

颜色执行内容
蓝色 ( Loading\color{blue}{Loading} )网络通信和HTML解析
黄色 ( Scripting\color{yellow}{Scripting} )JavaScript执行
紫色( Rendering\color{purple}{Rendering} )样式计算和布局(重排)
绿色 ( Painting\color{green}{Painting} )样式更改(重绘)
灰色 ( Other\color{gray}{Other} )其他事件
白色 ( Idle\color{white}{Idle} )空闲时间
红色 ( LongTasks\color{red}{Long Tasks} )长任务出现

火焰图

点击火焰图任何区域，可以使用键盘的WASD进行缩放和左右位移

Frames-帧

image.png

  • 白色：没有变化
  • 绿色：按预期及时渲染
  • 黄色：浏览器尽最大努力及时呈现至少一些视觉更新，比如滚动了但主线程没空
  • 红色：掉帧，无法在合理的时间内渲染帧，比如：scroll，resize事件触发过于频繁,浏览器来不及处理导致在下一个事件被触发之前无法完成
Main-主线程

image.png

Ctrl + F可以搜索Task名字，定位到具体的位置会标红

右上角有红色三角形表示该Task是一个长任务(执行超过50ms)，左边灰色区域执行时间50ms，右边红色区域执行时间就是39.83ms。长任务过多会导致页面出现卡顿，那我下篇性能优化文章会讲解如何去优化长任务。
从上倒下依次是调用堆栈，上面的事件导致下面的事件。

Task 颜色划分
DevTools 为脚本分配随机颜色，来自一个脚本的函数调用是浅绿色的，来自另一个脚本的调用可能是米色的。较深的黄色代表脚本活动，紫色代表渲染活动。

我们可以点击任意脚本活动查看： image.png

(anonymous)代表的是匿名函数的意思，点击旁边文件导航跳转过去，光标定位的地方就是函数调用的位置。

image.png

Call Tree 调用树

image.png

调用树的顺序是从上到下，和Buttom-Up顺序相反，这里介绍一个就可以了
SelfTime指的当前函数执行时间，不包括子函数执行时间，百分比是当前时间除以所有SelfTime时间之和。
TotalTime指的SelfTime和子函数的TotalTime之和，百分比是当前时间除以首个函数的TotalTime。
Activity列中的顶级项目，例如Event、Paint和Composite Layers是根活动，嵌套表示调用堆栈。 可以看到，实际计算出来的值还是会有一点误差。

Event Log 事件日志

image.png

按记录期间发生的顺序查看活动，包括加载、脚本、渲染、绘制等，也提供了事件名和耗时时长搜索过滤。
Start Time表示该活动开始的时间点，相对于记录的开始时间。比如103.6ms，表示活动在录制开始后103.6毫秒开始。

Network

重新发请求

与后端调试接口时，有时候会让你再请求一次，再请求一次...

image.png 右击，选择Replay XHR，则会重新发起请求。

阻断请求

可以阻断请求URL和当前域名

image.png

可以搜索Show Network request blocking查看阻断的列表

Console

搭配CSS

image.png

$0

asLNB4Dm8n.gif

$1对上次的节点引用，$2对上上次节点的引用，一直到$4

$_

$_.gif

$、$$

等同于document.querySelector和document.querySelectorAll

image.png

Sources

Snippets 片段

有时候我们在翻译网站的时候，会把代码也翻译成中文，那我们可以使用Sources的Snippets来内置代码，指定元素不进行翻译，也可以在片段中快捷键Ctrl+Enter执行。

image.png

有时候我们想更快的执行这段代码，可以先重命名，然后通过快捷键Ctrl+p可以快速定位到片段的位置去执行。

snippets.gif

当然，Snippets这里我只是举了一个例子，你可以实现你想要的一些东西！

JS分析器

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

image.png

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

image.png 然后我们点击右侧的html

image.png

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

Rendering

搜索Rendering

image.png

1. Paint Flashing(绘画闪烁)

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

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

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

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

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

image.png

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

image.png

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

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

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

图层面板

搜索Show Layers

image.png

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

Css概览

搜索Show CSS Overview

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

Memory

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

1.测试当前内存

image.png 点击Heap snapshot，再点击左上角圆圈，获取当前快照 image.png 可以看到当前内存占用情况

2.测试内存泄漏

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

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

3.performance查看内存泄露

切到performance也能测内存泄露，我们需要在下方勾选Menory，再去录制即可。 image.png 可以看到内存一直在增加，没有平稳成一条直线就说明有泄露了。

覆盖范围

搜索Coverage

image.png

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

性能监视器

搜索Show Performance Monitor

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

监控内存泄漏到平稳图： image.png

FPS

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

image.png 当然，performance也能查看FPS，红色表示长时间帧，可能出现卡顿掉帧。

快速切换

  • 搜索Dock to right 切换调试面板到右侧，Dock to bottom 切换调试面板到下侧
  • 搜索theme 切换dark或light主题
  • ...(未完待续)

面板快捷键

  • Ctrl ] 切换到下个面板，Ctrl [ 切换到上个面板
  • Ctrl L 清空Console面板，Ctrl ` 调出Console面板
  • Ctrl +放大，Ctrl -缩小
  • 面板右上角齿轮，选择shortcuts查看更多

End

好了，先分享这么多，如果喜欢，可以点个赞，你的点赞将是我最大的动力，谢谢！

avatar
文章
阅读
粉丝