这是我参与「第五届青训营 」伴学笔记创作活动的第10天
概述
本节课程主要分为四个方面：
- Web 应用使用 Chrome devTools 调试
- 移动端 H5 调试
- NodeJs 应用调试
- 常用代理工具的使用
课前
- 安装 Chrome 浏览器
- 【可选】 安装代理工具
- 安装 Charles
PC端
任何一个浏览器的DevTools 是最常用的调试工具。
1.console系列
在代码中添加了console系列后,就可以直接在控制台看到所需要打印的数据，但是有一个比较麻烦的地方，就是需要反复添加删除。
- console.log() ,包含占位符%s %c %d %f %o
- console.warn()
- console.error()
- console.info()
- console.time()，以及配对的console.timeEnd()
- console.table()
- console.trace() 追踪当前代码在堆栈中调用路径
- console.dir() 对象是个obj，打印这个的详情
2.Bom的alert
这种很少使用，因为调试体验太差，并且展示的数据不全，当调试数据是Obj的时候，会出现[object Object]，并且各个浏览器弹出的样式还不统一一致；老版IE特别难用。但是使用起来也是很简单。 因此不推荐；
3.代码debugger
这种使用方式也是很简单，直接在代码中需要断点的地方，直接添加代码debugger即可，当js执行到该语句的时候，会自动暂停，进而可以看到详细的信息，也可以一步步的调试代码。不过后面一定要删除该语句，否则有意外之喜。
4.浏览器断点
在浏览中断点和在代码中断点的操作原理一样，但是浏览器断电可以省去删除代码中bedugger的方式，F8可以直接跳转到下一个断点，F10可以单步骤调试，F11可以直接进入方法，也相当于单步调试了。
课后
- 调试技巧实践
- Chrome devtools 各 tab 的运用实践
- 常用代理工具的实践
