这是我参与「第四届青训营」笔记创作活动的的第3天，今天学习的知识主要是在前端开发中，如何去调试我们的代码，解决我们的bug所用到的一些工具和技巧。
前端Debug
特点：
- 多平台：浏览器，hybrid,Nodejs,小程序，桌面应用等
- 多环境：本地/线上
- 多工具：Chrome devtools， charles，spy-debugger,whistle,vconsole
- 多技巧：console，breakpoint，sourceMap，代理
可以做到的
Chrome devtools： 动态修改元素和样式，添加，删除等操作 伪类：
- 右键点击元素->Force state, 选择想要调试的伪类方法
- 右半部分选择：hover，并勾选自己想要的伪类
- Computed：过滤查找到自己想要修改的样式
- 右键点击元素->capture node screenshot，针对元素截屏
- console：控制台，查看当前网页的日志，有各类函数可以查看
- Sources：展示项目内的代码，目录树，进行断点设置，debug调试 -代码添加debugger=添加断点 ，可以将日志和断点结合起来查看数据的正确性
- watch监视变量，断点可以随时改变
- scope：查看作用域列表
- call Stack 查看当前js代码的调用栈
压缩代码
- 考虑到安全性，前端代码在上线之前往往会被压缩，只有一行，变量名也会被替换。
- 使用SourceMap进行映射
- 针对上线的项目，先导出SourceMap放在平台上，上传的为不含有SourceMap的混淆版本，当出现错误需要调试时，使用提前导出的SourseMap进行映射。
- NetWork：查看接口的各种属性，检查问题在前端还是后端
- Application：查看存储
- performance：查看网页中各个性能消耗。
- 页面卡顿->查找fps指标->寻找性能瓶颈->优化代码
- 可以查找到引起缺帧的代码处，之后对其进行优化
- Lighthouse：对WEB测试的各项核心指标进行检测
- （LCP）Largest Contentful Paint 最大内容绘制
- （FID）First Input Delay 首次输入延迟
- （CLS）Cumulative Layout Shift 累计布局偏移
移动端调试
真机调试
ios和Android，都需要真实存在的机器，Android具有用数据线链接和远程调试的方法，ios需要数据线链接MAC
vConsole
- 日志（logs） console.log|info|error
- 网络（Network）XMLHttpRequest,Fetch, sendBeacon
- 节点（Elment）HTML节点树
- 存储（Storage）Cookies,LocalStorage, SessionStorage
- 手动执行JS命令行
- 自定义插件
使用代理工具
电脑作为代理服务器，手机通过HTTP代理连接电脑，手机上的请求都经过代理服务器 如Charles，Fiddler（windows），spy-debugger，Whistle
Nodejs调试
- inspector protocol+Chrome devtools
- vscode调试
常用调试技巧
- 线上即时修改overrides，将修改保存
- 利用代理解决前端的跨域问题（线下软件，线上配置）
- 利用代理使用线下SourseMap
- 利用代理Mock数据
