这是我参与「第四届青训营 」笔记创作活动的的第8天。本节课的主题是【前端必须知道的开发调试知识】，授课老师为秃头披风侠。
本篇笔记分别对课程中所讲的几个要点进行一些解读，如若有误，欢迎大家在评论区交流，指出不当之处。
1. BUG与DeBug
前端Debug的特点
- 多平台
- 多环境
- 多工具
- 多技巧
2. Chrome DevTools
F12或右键检查打开。
TAG 1 : Elements：网页的元素和样式
- 点击对应标签，右击可以抓取节点截屏
右侧：
Styles
- 点击cls，可以动态修改样式
- 调试/强制激活伪类：检查，右键强制Force State/点击hov
Computed
- 用Filter功能快速找到要调试的样式
TAG 2: Console
console.log/warn/error/debug/info
可以通过占位符结合样式输出格式化信息
console.table：使用表格具象化展现JSON数据
TAG 3: Source
展示页面源代码，Debug，调试
调试：
JS写debugger或者代码添加断点
watch用以观察值
breakpoint 取消/添加断点
关于回调函数与闭包：
XHR/feach 断点：中断网络请求
DOM断点：用以开发界面等动态效果
如何调试压缩代码：SourceMap
工程中：在监控平台中使用（不太理解）
AG 5:APPLICATION
网站存储在本地上的数据。能够在storage处快速清除缓存
TAG 6: PERFORMANCE
点击Record录制一段过程，能查看加载速度
查看FPS帧率等，确认丢帧→确认原因→每个
TAG 7:LightHouse
网页性能情况指标
核心WEB指标：
3. 移动端H5调试
1. 真机调试
2. VConsole
3. 通过代理工具调试
Charles，FD等
4. Node.js调试
一些调试技巧
- Overrides能让代码修改后刷新保持修改后效果
-
代理解决开发时跨域问题
- 为什么？
- 本地-转发代理
- 上线-Nginx配置代理
终极方法-小黄鸭调试法
