这是我参与「第五届青训营 」伴学笔记创作活动的第10天

学习内容

pc端

elemnts

1.elements中的styles的.cls来添加类名 2.选中元素右键Force state可以让元素保持伪类的状态，也可以在styles中的：hov勾选伪类状态 3.右键Capture node screenshot可以截图 3.computed中样式旁的箭头可以传到styles中生效的css样式中

console

1 .console.log /warn黄色/error红色/debug蓝色/info 2.可以直接在log中添加元素样式 占位符 %s字符串 %o对象 %c样式 %d数字 3.log.table将数据以表的样子展现 4.console.dir将对象以文件树的方式展现

Sources

1.Page右侧上方为debug工具栏 左到右为暂停 单步跳过 进入函数 跳出函数 单步执行 激活/关闭所有断点 代码执行异常处自动 下方 断点调试器 breakpoints断点列表 可以查看断点 激活关闭断点 watch中的+可以对变量添加监控 查看变量的值 Scope查看作用域列表 call stack查看当前js代码调用栈 dom breakpoints元素发生变化时添加断点

代码压缩混淆后的调试

Sources.map从压缩地方映射到源码 map中有版本 映射的文件名 压缩规则 源文件地址 内容等 map的应用场景一般是用作监控 项目打包时带上map，上线前将map上传到另一个平台（如监控平台） 上传后删除掉源文件，用监控平台收集的错误去调试

network

1.列表显示的是站点在加载时请求的资源 下方 有请求的数量 节点 耗时 等数据 2.waterfall列表示的请示是定型执行还是串型执行 3.No throttling可以模拟弱网络环境 用来测试页面不同网络时的执行情况 4.前后端找问题时，通过选中接口名点Preview可以看到后端返回的结果，看结果是否符合预期来判断问题出在前端还是后端 headers显示的是请求的相关信息

Application

展示的是与本地存储相关的信息 1.storage中的clear site date 一键清除整个网站的数据存储 用来快速清缓存

Performance

区域4是运行时各个模块运行的时间

页面卡顿----》查看FPS指标（代表每一帧的渲染情况）------》寻找性能瓶颈------》优化代码

查看的第一种方法直接看区域三中Frames每一帧 第二种方法点击区域二右上设置 more tools -》rendering-》勾选Frames rendering states，正常值为60左右 低于60就会有掉帧卡顿情况

发现问题后可以在main中重新录制，显示的红色箭头就是性能瓶颈区域

Lighthouse

first contentful paint页面第一个dom元素开始渲染的时间 largest contentful paint 整个页面渲染完成时间 time to interactive可以交互的时间 下方也会提出建议，优化手段