移动web应用调试汇总

移动web应用手机调试汇总

---

手机远程调试是必不可少的一个调试技能，主要用于调试真实环境、与手机原生有交互的功能、在线调试不能回显的问题；本
文主要分享手机远程调试、微信公众号调试、钉钉web应用调试、fiddler代理调试等各种调试技巧。希望对您有用。

调试要求

• 开发环境安卓桌面版Chrome32+
• 安卓系统须为Android 4.4+
• 一条USB数据线，连接电脑与移动设备，安装相应机型的USB驱动

手机远程调试操作步骤：

• 第一步：开启手机开发者模式
  手机第一次进行调试时，一般需要开启成开发者模式；进入手机【设置】页面，找一下有没有【开发者选项】的按钮，如果没有则需要开启，步骤如下：

• 第二步：用USB数据线连接设备
  驱动装好连接成功后，你可能会在设备上看到一个弹框请求允许使用这台计算机通过usb调试

勾选后点击“确定”。

• 第三步：连接Chrome浏览器调试
  打开Chrome浏览器，在地址栏中输入chrome://inspect；如果USB连接成功，这时候我们可以看到移动设备的型号和设备上运行的页面和
  允许调试的WebView列表
  

• 第四步：点击Webview列表中的inspect按钮进入到需要调试的页面中
  如果首次进入显示的是空白页面，则需要使用翻墙软件进行翻墙后，再次点击
  inspect进入页面进行调试，调试方式和技巧和在线调试是一样的。

微信公众号调试步骤

---

微信端的调试也和手机调试是一样的，需要用USB将chrome和手机连接，只是需要将微信端进行一些设置。

具体步骤如下：

• 第一步：打开微信，找到“微信公众平台”或者随便找一个公众号进入
  在
  输入http://debugx5.qq.com网址后点击发送，在对话框中点击这个
  网址进入页面。

• 第二步：在打开的网页中选择 【信息】->【TBS settings】，勾选 【是否打开 TBS 内核 Inspector 调试功能】
  

• 第三步：提示重启微信，点击重启，就可以进行Chrome调试了

钉钉端调试步骤

---

钉钉端调试，需要下载钉钉调试版以及设置一下，点击钉钉调试版
下载安装，或直接进入钉钉开放平台
进行下载和设置

设置步骤如下：

• 进入“我的”(个人资料页)
• 选择“设置”
• 选择“通用”
• 选择“开发者选项”
• 打开“微应用调试”

fiddler调试

---

fiddler调试主要用于调试客户的生产环境（如生产环境的微信公众号、钉钉web应用），以及ios端调试；原理是fiddler生
产环境中的真实请求替换成本地的文件、数据进行期望值的修改。

调试步骤如下：

• 第一步：电脑开启fiddler软件，并设置监听端口号
  如果对fiddler的用法不是很了解，可以度娘一下；

• 第二步：设置手机WLAN代理

• Android手机设置：长按连接的弹出以下操作
  

• IOS设备设置：
  

• 第三步：设置fiddler的AutoResponder

如果对fiddler的高级设置不是很清楚的，可以参考fiddler高级用法