前端开发调试之移动端H5调试

这是我参与第五届青训营 伴学笔记创作活动的第11天。

课程重点

1. 真机调试
2. 代理调试
3. Node.js调试
4. 常用开发调试技巧

详细知识点

真机调试

ios

1. 使用Lightning数据线将iphone与Mac相连。
2. iPhone开启Web检查器（设置->Safari->高级->开启Web检查器）。
3. iPhone使用Safari浏览器打开要调试的页面。
4. Mac打开Safari浏览器调试(菜单栏->开发->iPhone设备名->选择调试页面)。
5. 在弹出的Safari Developer Tools中调试。

Android

1. 使用USB数据线将手机与电脑相连。
2. 手机进入开发者模式，勾选USB调试，并允许调试
3. 电脑打开Chrome浏览器，在地址栏输入：chrome://inspect/#devices 并勾选Discover USB devices选项。
4. 手机允许远程调试，并访问调试页面
5. 电脑点击inspect按钮
6. 进入调试界面

使用代理工具调试

原理：

• 电脑作为代理服务器
• 手机通过HTTP代理连接到电脑
• 手机上的请求都经过代理服务器

常用的代理工具：

• Charles:适合查看，控制网络请求，分析数据
• Fiddler:与Charles类似，适合windows平台

Node.js调试

Inspector Protocol + Chrome Devtool

1. 执行命令 node --inspect=8888 index.js
2. chrome浏览器访问服务
3. 点击绿色node图标打开node调试面板(在chrome://inspect/#devices中配置network target)
4. 在node调试面板中使用断点调试 VS Code 点击运行，添加配置，启动调试，添加断点，查看变量、堆栈。

常用开发调试技巧

线上即时修改Overrides

1. 打开Sources面板下的Overrides
2. 点击Select folders for Overrides。选择一个本地的空文件夹目录。
3. 允许授权。
4. 在Page中修改代码，修改完成后command+s保存
5. 打开devTools,点击右上角的三个小点->More tools->Changes，就能看到所有修改了。