Chrome devtools使用

目的：了解chrome开发者工具几个常用模块，常用的调试技巧，前端性能优化

1.elements

样式修改

切换伪类，添加class, 设置具体属性

查看元素监听事件

打印元素

$0~5分别对应之前选择的元素

通过{$0}查看元素对象具体属性

2. layers

元素层级可视化，可视化动画层级变化

3. console

除了日志之外, 还能参与开发的调试

打印表格数据

console.table(<表格数据>, <属性列表>?:string[]...)

记录执行时间

// 开始记录, 可以传入计时器名称用来标记
console.time(<tag?>)

// 一大堆代码

// 结束记录
console.timeEnd()

同时打印多个值

console.group(value1, value2)

移动端日志插件

if( process.env.NODE_ENV === 'development') {
    import VConsole from 'vconsole'
    /* eslint-disable no-unused-vars*/
    var vConsole = new VConsole({});
}

• 腾讯vconsole项目地址

4.sources

资源查看，代码调试，alt + p搜索文件，添加断点

条件判断点，log断点

image.png

页面代码覆盖查看

alt+ shift+p打开命令行，输入coverage

image.png

5. network

1. 禁用缓存
2. 调节网路速度
3. 屏蔽特定请求
4. 请求详情

6. lighthouse

网页表现指标

1. 首个内容绘制: 绘制第一个文本或图片的时间
2. 可交互前耗时：视窗内元素事件均被注册
3. 速度指数：页面完全可视化时间
4. 总阻塞时间: 首个内容绘制与可交互之间任务超过50ms之外的时间总和
5. 最大内容渲染：视窗内渲染的最大内容元素
6. 累积布局偏移: 视窗中，元素发生位移

7. performance

• 淘宝网首页

image.png

FPS

红色部分表示网页渲染过程中有丢帧，绿色越高帧数越高。

CPU

黄色代表JS执行，紫色表示渲染消耗，绿色代表绘制消耗

NET

网络请求及优先级

HEAP

内存占用

FRAMES

查看帧率

TIMING

FP: 第一个像素渲染发生的时间

FCP

DCL: 纯HTML被完全加载以及解析

LCP

L: 依赖资源加载完成，比如src引入的图片

MAIN

横轴代表调用时间，竖轴代表调用栈。
通过调用栈找到引起性能问题的源头。demo

RASTER

页面栅格化raster