这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
我总结了PC端的web调试技术：
一、前端debug特点
1、多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用。
2、多环境：本地开发环境、线上环境。
3、多工具：Chrome devTools、Charles、Spy-Debugger....
4、多技巧：Console、Breakpoint、sourceMap、代理等
二、chrome dev tools
Elements
1、点击 .cls 开启动态修改元素得class
2、输入字符串可以动态地给元素添加类名；
3、勾选/取消类名可以动态地查看类名生效效果；
4、点击具体的样式值（字号、颜色、宽度高度等）可编辑
5、computed下点击样式里的箭头可跳转到styles面板中的css规则
6、激活伪类：选中具有伪类的元素，点击：hov DOM树右键菜单,选择Force State
Console
1、console.log （数字蓝色、字符串灰色）
2、console.warn 黄色
3、console.error 红色
4、console.debug 蓝色
5、console.info和log类似 、
6、console.table 具像化地展示JSON和数组数据
7、console.dir 通过类似文件树地方式展示对象的属性。
8、占位符，给日志添加样式 %s 字符串占位符 %o 对象占位符 %c 样式占位符 %d 数字占位符
9、console.time console.timeEnd
source
区域1：页面资源文件目录树
区域2：代码预览区域
区域3：debug工具栏
从左到右依次为：暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所有断点、代码执行异常处自动
区域4： 断点调试器
展开scope可以查看作用域列表（包含闭包）
展开call stack 可以查看当前js代码地调用栈
XHR/fetch Breakpoints 网络请求断点
DOM Breakpoints DOM事件断点
如何调试上线压缩后的代码？使用source map， 其中mappings字段存储了源文件和source map的映射。
压缩后的代码上线后不安全怎么办？使用监控。
Network
站点请求资源 瀑布流展示并行、串行
Application
浏览器存储相关 localStorage sessionStorage IndexedDB Web SQL Cookie
点击application下storage面板中的clear site data可以清楚网页的本地存储数据；
Performance 性能展示
区域1:控制面板
区域2∶概览面板
FPS:每秒帧数 CPU:处理各个任务花费的时间 NET:各个请求花费时间
区域3∶线程面板 Frames :帧线程 Main :主线程，负责执行Javascript,解析HTMUCSS,完成绘制 Raster : Raster线程，负责完成某个 layer或者某些块(tile)的绘制。
Lighthouse 核心web指标
Largest Contentful Paint (LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
First Input Delay (FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
Cumulative Layout Shift (CLS):累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。
