这是我参与「第五届青训营 」笔记创作活动的第10天
1.Bug与Debug
特点：
1.多平台 2.多环境 3.多工具 4.多技巧
2.Chrome DevTools
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、 颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
可以用以下2种方式强制激活伪类
- 选中具有伪类的元素，点击: hov
- DOM树右键菜单，选择Force State
Console
-
console.log
-
console.warn
-
console . error
-
console.debug
-
console.info
-
console.table：具象化的展示JSON和数组数据
-
console.dir：通过类似文件树的方式展示对象的属性
-
占位符：给日志添加样式，可以突出重要的信息%s:字符串占位符; %o:对象占位符; %c: 样式占位符; %d:数字占位符
Source Tab
区域1:页面资源文件目录树
区域2:代码预览区域
区域3: Debug 工具栏
从左到右依次为
- 暂停(继续)
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活(关闭)所有断点
- 代码执行异常处自动
区域4:断点调试器
Scope与Call Stack
- 展开Scope可以查看作用域列表(包含闭包)
- 展开Call Stack可以查看当前javaScript代码的调用栈
Source Map
mappings字段存储了源文件和Source Map的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容
- 分号，代表换行。
Performance
区域1:控制面板 区域2:概览面板
- FPS :每秒帧数
- CPU:处理各个任务花费的时间
- NET :各个请求花费时间
区域3:线程面板
- Frames :帧线程
- Main:主线程，负责执行Javascript,
- 解析HTML/CSS,完成绘制
- Raster : Raster线程,负责完成某个
- layer或者某些块(tile)的绘制。
区域4:统计面板
Lighthouse
Largest Contentful Paint (LCP) : 最大内容绘制，测量加载性能。为了提供良好的用户体验，L CP应在页面首次开始加载后的2.5秒内发生。
First Input Delay (FID) :首次输入延迟，测量交互性。为了提供良好的用户体验， 页面的FID应为100毫秒或更短。
Cumulative Layout Shift (CLS) :累积布局 偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CL S应保持在0.1.或更少
核心Web指标
3.移动端调试
ios
- 使用Lightning数据线将iPhone与Mac相连
- iPhone开启Web检查器(设置-> Safari ->高级->开启Web检查器)
- iPhone使用Safari浏览器打开要调试的页面
- Mac打开Safari浏览器调试(菜单栏一>开发-> iPhone设备名>选择调试页面)
- 在弹出的Safari Developer Tools中调试
没有iPhone设备可以在MacAppStore安装Xcode使用其内置的ios模拟器
Android
1.使用USB数据线将手机与电脑相连
2.手机进入开发者模式，勾选USB调试，并允许调试
3.电脑打开Chrome浏览器，在地址栏输入:chrome://inspect/#devices并勾选Discover USB devices 选项
4.手机允许远程调试，并访问调试页面
5.电脑点击inspect按钮
6.进入调试界面
直接使用手机扫码查看，体验更佳
