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

web 调试技术

课程内容

1. Web 应用使用 Chrome devTools 调试
2. 移动端 H5 调试
3. NodeJs 应用调试
4. 常用代理工具的使用

PC端调试

前端Debug的特点

1. 多平台：浏览器，Hybrid、NodeJS、小程序、桌面应用等
2. 多环境：本地开发环境、线上环境
3. 多工具：Chrome devTools Charles Spy-Debugger Whistle vConsole
4. 多技巧： Console BreakPoint sourceMap 代理等

移动端调试

• 真机调试-IOS

1. 使用Lightning数据线将iPhone与Mac相连
2. iPone开启Web检查器（设置->Safari->高级->开启web检查器）
3. iPone使用Safari浏览器打开要调试的页面
4. Mac打开Safari浏览器调试（菜单栏->开发->iPone设备名->选择调试页面）
5. 在弹出的Safari Developer Tools中调试
   （没有iPone设备可以在Mac App Store安装Xcode 使用其内置的IOS模拟器）

• 真机调试-Android

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

• 使用代理工具进行调试
  原理

1. 电脑作为代理服务器
2. 手机通过HTTP代理连接到带闹闹
3. 手机上的请求都经过代理服务器

以Charles为例：

1. 安装Charles
2. 查看电脑IP和端口
3. 将IP、端口后填入手机HTTP代理
4. Charles允许授权
5. 使用SwitchHosts!软件给Mac电脑配置Hosts
6. 手机访问开发环境页面
   默认情况下，Charles 无法抓取到HTTPS的请求，需要安装证书

• 常用的代理工具

1. Charles:适合查看、控制网络请求、分析数据
2. Fidder:与Charles类似，适合windows平台
3. spy-debugger:远程调试手机页面，抓包
4. Whistle:基于Node实现跨平台Web调试代理工具