这是我参与【第五届青训营】笔记创作的第十天。
主要关于Web 应用使用 Chrome devTools 调试、移动端 H5 调试、NodeJs 应用调试、常用代理工具的使用四个方面的内容。
Bug无处不在，故需采用一些方法（Debug）来消除它。
Debug特点：多平台、多环境、多工具、多技巧。
Chrome devTools 调试
- 动态修改元素和样式 （Elements）
- 点击.cls开启动态修改元素的class；
- 输入字符串可动态的给元素添加类名；
- 勾选/取消类名，可动态观察其生效效果；
- 点击样式值可进行编辑，并可观察到预览效果；
- Computed下点击样式里的箭头可跳转到style面板中的css规则。
- Consule
最左侧：日志，不同类型的值会有不同的输出结果-
consule.log
-
consule.warn
-
consule.error
-
consule.debug
-
consule.info
-
consule.table
具象化展示JSON和数组数据 -
consule.dir
通过类似文件树的方式展示对象属性 -
占位符
%s字符串 %o对象 %c样式 %d数字
-
- Source Tab
展示项目源代码，还有Debug调试栏、
断点调试器：断点地方加入debugger;
压缩后的代码需要用Source Map来调试 - NetWork
列表展示各种请求资源，总的请求数量还有所耗时间，串行并行，可以模拟弱网环境。可通过查看返回结果判断前端问题还是后端问题。 - Application
浏览器存储相关
clear site data 清除缓存 - Performance（性能）
控制面板、概览面板、线程面板、统计面板
可模拟性能较差的条件。
例：页面卡顿->查看FPS指标->寻找性能瓶颈->优化代码 - Lighthouse
点击性能分析->核心Web指标。（LCP:2.5s,FID:100ms,CLS:0.1或更少）
移动端 H5 调试
- 真机调试
可用数据线、usb连接、手机扫码 - VConsule
- 使用代理工具调试
- 常用代理工具
Charles、Fiddler、spy-debugger、Whistle
NodeJs 应用调试
- Inspector Protocol + Chrome devTools
- Inspector Protocol + VS code
常用开发调试技巧
- 线上即时修改Overrides
- 利用代理解决开发阶段的跨域问题
- 启用本地source map
- 使用代理工具Mock数据
- 小黄鸭调试大法
