这是我参与「第五届青训营」笔记创作活动的第6天。
本笔记对应的是青训营关于前端必须知道的开发调试知识课程（2）—— 移动端部分。
1 课程内容概括
在软件开发中，难免会遇到各种bug，如何通过调试debug是非常重要的。本课程针对前端开发中在移动端的开发调试知识做出了介绍。
2 iOS真机调试
- 使用Ligtning数据线连接iPhone与mac
- 在iPhone操作开启Web检查器，操作步骤：设置 - Safari - 高级 - 开启Web检查器
- 在iPhone中用safari打开需要调试的页面
- 在mac操作打开safari浏览器调试功能，操作步骤： 菜单 - 开发 - iPhone设备名 - 选择调试页面。
- 弹出safari开发者工具，在开发者工具中完成调试
3 Android真机调试
- 通过USB数据线将手机连接至电脑
- 在Android手机中开启开发者模式，并在开发者模式中打开USB调试，允许计算机调试
- 在电脑端打开chrome，输入chrome://inspect/#devices ，勾选discover USB devices 选项
- 在手机允许远程调试，访问调试页面
- 电脑操作inspect
- 进入调试页面
4 VConsole
支持日志、网络、节点、存储、手动执行JS命令行、自定义插件的操作。
5 代理工具调试
原理是将电脑作为代理服务器使用，手机通过HTTP代理与电脑相连接，手机的请求都经过代理服务器。
Charles是一个常见的代理工具。
需要注意的是这类工具一般是无法默认完成对HTTPS请求的抓取的，要进行HTTPS请求的抓取，则需要安装证书。
在Windows平台与Charles类似的软件是Fiddler。
还有其他工具，如用于远程调试手机页面、抓包的spy-debugger；基于Node实现的跨平台调试工具Whistle等。
6 总结与思考
本笔记涉及到在移动端使用浏览器调试的方法，是前端调试的基础。
移动端的调试可以使用真机调试，针对iOS和Android双平台，有一定的操作差异，但总体均为将手机连接至电脑、开启远程调试、进入调试页面的操作。
还可以使用代理工具调试，注意HTTPS需要安装证书方可解密HTTPS流量供抓取。
