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
- 禁用缓存
- 调节网路速度
- 屏蔽特定请求
- 请求详情
6. lighthouse
网页表现指标
- 首个内容绘制: 绘制第一个文本或图片的时间
- 可交互前耗时：视窗内元素事件均被注册
- 速度指数：页面完全可视化时间
- 总阻塞时间: 首个内容绘制与可交互之间任务超过50ms之外的时间总和
- 最大内容渲染：视窗内渲染的最大内容元素
- 累积布局偏移: 视窗中，元素发生位移
7. performance
- 淘宝网首页
image.png
FPS
红色部分表示网页渲染过程中有丢帧，绿色越高帧数越高。
CPU
黄色代表JS执行，紫色表示渲染消耗，绿色代表绘制消耗
NET
网络请求及优先级
HEAP
内存占用
FRAMES
查看帧率
TIMING
FP: 第一个像素渲染发生的时间
FCP
DCL: 纯HTML被完全加载以及解析
LCP
L: 依赖资源加载完成，比如src引入的图片
MAIN
横轴代表调用时间，竖轴代表调用栈。
通过调用栈找到引起性能问题的源头。demo
RASTER
页面栅格化raster
