这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
前端开发调试-移动端调试
1、真机调试
（1）IOS
- 使用 Lightning 数据线将 iPhone与 Mac 相连
- iPhone 开启 Web 检查器（设置-> Safari ->高级 ->开启 Web 检查器)
- iPhone使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试〈菜单栏->开发 iPhone 设备名->选择调试页面)
- 在弹出的 Safari Developer Tools 中调试
注：没有iPhone 设备可以在Mac AppStore安装Xcode使用其内置的iOS模拟器
（2）Android
- 使用 USB 数据线将手机与电脑相连
- 手机进入开发者模式，勾选 USB 调试,并允许调试
- 电脑打开Chrome浏览器，在地址栏输入︰ chrome://inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect 按钮
- 进入调试界面
注：直接使用手机扫码查看，体验更佳
2、VConsole
- 日志(Logs)：console.log|info|error|..
- 网络(Network)：XMLHttpRequest,Fetch, sendBeacon
- 节点(Element):：HTML 节点树
- 存储(Storage): Cookies,LocalStorage, SessionStorage
- 手动执行 JS 命令行
- 自定义插件
3、使用代理工具调试
（1）原理
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器
（2）以Charles为例
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts!软件给Mac电脑配Hosts
- 手机访问开发环境页面
注：默认情况下，Charles 无法抓取到HTTPS的请求，需要安装证书。
4、常用代理工具
（1）Charles
Charles:适合查看、控制网络请求，分析数据
（2）Fiddler
Fiddler:与Charles类似.适合windows平台
（3）spy-debugger
spy-debugger:远程调试手机页面抓包
（4）Whistle
Whistle:基于Node实现的跨平台Web调试代理工具
5、Node.js调试
（1）Inspector Protocol + Chrome Devtool
- 执行命令 node - -inspect =8888 index.js
- chrome浏览器访问服务
- 点击绿色node图标打开node调试面板(chrome://inspect/#devices 中配置network target)
- 在node调试面板中使用断点调试
（2）Inspector Protocol + VS Code
- vs Code点击运行
- 添加配置
- 启动调试
- 添加断点
- 查看变量、堆栈
6、常用开发调试技巧
（1）线上及时修改 Overrides
- 打开 Sources 面板下的 Overrides
- 点击 Select folders for Overrides。选择一个本地的空文件夹目录
- 允许授权
- 在 page 中修改代码，修改完成后 command + s 保存
- 打开 devTools，点击右上角的三个小点 -> More tools -> Changes，就能看到所有修改了
（2）利用代理解决开发阶段的跨域问题
（3）启用本地source map
线上不存在source map时可以使用Map Local网络映射功能来访问本地的Source Map文件。
（4）使用代理工具Mock数据
- 右键选中要mock数据的接口，选择save response，保存文件到本地。
- 本地打开保存的文件，编辑想mock的数据并保存。
- 右键选中第一步的接口，选择Map Local, Local Path 选择第二步的文件。
（5）小黄鸭调试大法
一句一句读出来
