移动端调试方法

移动端调试方法

Vconsole

• Vconsole github地址
• 安装方法：npm install vconsole
• 在项目中使用：import VConsole from 'vconsole'; new VConsole();
• 手机与项目处于同一IP下，通过手机访问项目地址，在Vconsole调试面板中可以进行调试。

Chrome + Android

• chrome中输入 chrome://inspect
• 通过数据线连接你的电脑和 Android 手机，打开USB的调试模式
• 就可以在上面的页面中看到自己的设备
• 和使用谷歌调试pc端一样，可惜ios不适用

Safari + iOS + Mac

• 打开手机点击设置 -> Safari浏览器 -> 高级
• 打开JavaScript和web检查器。
• 在Mac上打开Safari，执行【偏好设置】->【高级】->【在菜单栏中显示“开发”菜单】勾选
• 通过数据线将Mac和iPhone连接，在Mac上的Safari浏览器中执行【开发】->【手机名称】->【正在调试的网站】
• 在Mac上的Safari浏览器中打开网页检查器。
• 就可以按照调试pc端页面的思路来调试ios的页面了。
• app的webview也可以使用这个方法，只需要让客户端同学打包个debug版本。

whistle ——前端调试工具 基于Node实现的跨平台web调试代理工具 可以用来拦截分析请求、包装请求、本地调试和移动端代理开发调试等。

• 该功能比较多，可以mock数据、修改请求延迟时间、修改静态文件等等。前三种基本可以应对真机调试情况。
• 安装方法 npm install -g whistle
• 文档地址：whistle调试工具文档
• 为了让我们的请求被 Whistle 代理，还需配置 HTTP 代理或者 HTTPS 代理到 Whistle，如果使用 Chrome 浏览器，推荐 SwitchyOmega 配置代理，这样更加灵活。
• SwitchyOmega中新建一个情景模式，配置代理服务器。
• 启动whistle调试工具命令：w2 start
• 终端会生成一些调试工具访问地址以及步骤：

 whistle@2.9.30 started
[i] 1. use your device to visit the following URL list, gets the IP of the URL you can access:
       http://127.0.0.1:8899/
       http://192.168.10.58:8899/
       http://169.254.9.166:8899/
       Note: If all the above URLs are unable to access, check the firewall settings
             For help see https://github.com/avwo/whistle
[i] 2. set the HTTP proxy on your device with the above IP & PORT(8899)
[i] 3. use Chrome to visit http://local.whistlejs.com/ to get started

• 打开自己的手机同一wifi设置去配置代理。IP与端口号如本案例：ip：192.168.10.58 端口：8899
• 最后在whistle调试工具可以进行真机调试项目了。

Mobile Debug

• 操作简单，上手比较快，需要跟着引导在手机中配置证书