这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
Bug和Debug
Bug
1946年，操作员在追踪马克II型的错误时发现继电器中有一只飞蛾，遂有bug术语。这个bug被仔细移除，并被贴在日志本上。这带来的第一个bug，就是我们今日所说的错误或程序中的故障。
Debug
由于程序故障（Bug），所以将排除程序故障的操作叫做Debug。
debug方式
这种使用方式也是很简单，直接在代码中需要断点的地方，直接添加代码debugger即可，当js执行到该语句的时候，会自动暂停，进而可以看到详细的信息，也可以一步步的调试代码。不过后面一定要删除该语句，否则有意外之喜。
Bom的alert
这种很少使用，因为调试体验太差，并且展示的数据不全，当调试数据是Obj的时候，会出现[object Object]，并且各个浏览器弹出的样式还不统一一致；老版IE特别难用。但是使用起来也是很简单。 因此不推荐；
特点
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调试代理工具
浏览器断点
在浏览中断点和在代码中断点的操作原理一样，但是浏览器断电可以省去删除代码中bedugger的方式，F8可以直接跳转到下一个断点，F10可以单步骤调试，F11可以直接进入方法，也相当于单步调试了。
