前端必须知道的开发调试知识 ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第12天。
一、Bug与Debug
前端Debug的特点：
- 多平台（浏览器、Hybrid、Node.js、小程序、桌面应用等）
- 多环境（本地开发环境、线上环境）
- 多工具（Chrome、devTools、Charles、Spy-Debugger、Whistle、vConsole）
- 多技巧（Console、BreakPoint、sourceMap、代理等）
二、Chrome DevTools
01 Elements 动态修改元素和样式
- 点击.cls 开启动态修改元素的 class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(孛号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到 styles面板中的css规则
可以用以下2种方式强制激活伪类：
- 选中具有伪类的元素．点击:hov
- DOM树右键菜单,选择Force State
02 Console
左侧可以选择等级．对日志进行分类查看
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table：具像化的展示JSON和数组数据
- console.dir：通过类似文件树的方式展示对象的属性
- 占位符：给日志添加样式，可以突出重要的信息
%s:字符串占位符;%o:对象占位符; %g:样式占位符;%d:数字占位符
03 Source
区域1:页面资源文件目录树
区域2:代码预览区域
区域3:Debug工具栏从左到右依次为：
暂停〔继续）
单步跳过
进入函数
跳出函数
单步执行
激活〔关闭}所有断点
代码执行异常处自动
区域4︰断点调试器
- 展开Scope可以查看作用域列表(包含闭包)
- 展开Call Stack可以查看当前javaScript 代码的调用栈
压缩后的代码如何调试?
前端代码天生具有"开源"属性．出于安全考虑，上线之前JavaScript 代码通常会被压缩，压缩后的代码只有一行。变量使用'a'、"b'等替换．整体变得不可阅读。那么压缩后的代码如何调试呢?
- Source Map
mappings字段存储了源文件和Source Map 的映射
英文，表示源码及压缩代码的位置关联
逗号，分隔一行代码中的内容。
分号，代表换行。
04 Network
区域1:控制面板
区域2:过滤面板
区域3∶概览区域
区域4: Request Table面板
区域5∶总结面板
区域6:请求详情面板
05 Application
Application面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SOL
- Cookie
- 点击左侧Application下的Stroage面板中的Clear Site Data可以清除网页的本地存储数据
06 Performance
区域1:控制面板
区域2︰概览面板：
FPS:每秒帧数
CPU:处理各个任务花费的时间
NET:各个请求花费时间
区域3︰线程面板：
Frames:帧线程
Main︰主线程，负责执行Javascript,解析HTMIL/CSS,完成绘制
Raster: Raster线程，负责完成某个layer或者某些块(tile)的绘制。
区域4︰统计面板
常用的解决步骤： 页面卡顿 查看FP金指标 寻找性能瓶颈 优化代码
07 Lighthouse
核心WEB指标
<br
Largest Contentful Paint (LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
First Input Delay (FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短
Cumulative Layout Shift (CLS):累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。
