移动端调试通过抓包工具代理，让电脑端配置的host在手机端生效

Posted 2023-02-24 ThinkerWing

移动端调试

• 需求分析
• chrome://inspect/#devices
• 用抓包工具让电脑代理手机的请求Charles/whistle
• whistle
• spy-debugger页面调试＋抓包 无需USB连接设备

引用
如何让电脑端配置的host在手机端生效（MVVM项目开发测试）
https://zhuanlan.zhihu.com/p/55073899

需求分析

移动端调试，项目是由nginx代理的，想要调试微信内置浏览器的适配情况

chrome://inspect/#devices

手机打开chrome浏览器和微信打开网页都可以通过DevTools调试

用抓包工具让电脑代理手机的请求Charles/whistle

Mac上使用Charles抓包
https://zhuanlan.zhihu.com/p/26182135

1. ifconfig / ipconfig 查看自己本机网络 IP地址，确保移动端设备和电脑在同一个Wi-Fi环境下

2. proxy settings
   
   

3. 连Wi-Fi，配置代理设置
   
   
   

4. 使用chrome://inspect/#devices调试

whistle

https://zhuanlan.zhihu.com/p/55073899

安装命令：npm install whistle –g

安装完成后验证命令：npm whistle –v

w2 start

spy-debugger页面调试＋抓包 无需USB连接设备

https://github.com/wuchangming/spy-debugger