这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
今天跟着老师学习了如何在PC端调试和在移动端调试。
Bug和Debug
Bug
1946年，操作员在追踪马克II型的错误时发现继电器中有一只飞蛾，遂有bug术语。这个bug被仔细移除，并被贴在日志本上。这带来的第一个bug，就是我们今日所说的错误或程序中的故障。
Debug
由于程序故障（Bug），所以将排除程序故障的操作叫做Debug。
特点
1.多平台
- 浏览器、Hybrid、Nodejs、小程序
- 多环境
- 本地来开发环境、线上环境
- 多工具
- Chrome devTools、Charles、Spy-Debuger... 4.多技巧
- Console、BreakPoint、sourceMap、代理等
Chrome DevTools
- 动态修改元素和样式
- Console
- Source Tab
- Break Point与Watch
- Scope与Call Stack
- Source Map
- NetWork
- Application
- Performance
- Lighthouse
移动端H5调试
- 真机调试
- VConsole
- 代理工具调试
原理电脑作为代理服务器，手机通过HTTP代理连接到电脑，手机上的请求都经过代理服务器。
常用代理工具
- Charles：适合查看、控制网络请求，分析数据
- Fiddler：与Charles类似，适合windows平台
- spy-debugger：远程调试手机页面、抓包
- Whistle：基于Node实现的跨平台Web调试代理工具
Node.js调试
- Inspector Protocol + Chrome Devtool
- Inspector Protocol + VS Code
常用开发调试技巧
- 线上及时修改Overrides
- 利用代理解决开发阶段的跨域问题
- 启用本地Source Map
- 使用代理工具Mock数据
