这是我参与「第五届青训营」伴学笔记创作活动的第10天。今天开始了有关Web调试技术方面的学习。

BUG产生

前端DeBug特点

• 多平台：浏览器、Hybrid、Nodejs、小程序
• 多环境：本地开发环境、线上环境
• 多工具：Chrome devTools、Charles、Spy-Debuger
• 多技巧：Console、BreakPoint、sourceMap、代理

PC端调试

chrome

• 动态修改元素和样式(elements)

• console（字符串是灰色，数字是蓝色）

• Sorce Tab（sources展示项目的源代码）

• Break Point与Watch
  • debugger或点击行号可以设置断点，暂停代码，进入调试
  • 暂停状态下，鼠标hover可以展示变量值或者使用右侧watch查询变量值
  • 通过breakpoints勾选或取消可以实现断点的激活或禁用
• Scope与Call Stack
  • 展开scope可以查看闭包，展开Call Stack可以查看当前JS代码的调用栈
• Source Map（出于安全考虑，代码上线后会被压缩）
  • 带source map，则体积大，影响性能
  • 不带source map，则上线后无法调试
  • 应用场景：监控
  • 打包时的产物带source map，上线前上传到监控平台，删除产物中的source map，再上传
• NetWork

可以模拟弱网，进行性能调试

• Application
• Performance（页面卡顿后查看Fbs指标，寻找性能瓶颈，后优化代码）

• Lighthouse

移动端调试

移动端H5调试

• 真机调试
• Vconsole
• 代理工具调试（常用代理工具：Charles、Fiddler、spy-debugger、Whistle）

Node.JS调试

• Inspector Protocol + Chrome Devtool
• Inspector Protocol + VSCode

常用开发调试技巧

• 线上及时修改Overrides
• 利用代理解决开发阶段的跨域问题
• 启用本地Source Map
• 使用代理工具Mock数据

个人小结

今天课程中学到了许多有关Chrome DevTools的调试技巧以及其他不同端的调试方法，激发对未来有关断点调试、性能优化相关工作的兴趣。