移动端浏览器调试方法汇总

浏览器兼容性一直以来都是让 Web 前端开发人员头疼的问题。虽然移动端其内核趋于统一（webkit），兼容问题也不再像 PC 端那么严重。但在生产环境当中，考虑到第三方浏览器在内核上面的 “优化”，如（wechat、UC、QQ、360 等），兼容问题依旧是无法忽略。

本文汇总一下目前比较常见的 Web 移动端调试方法。

总览

方法分类	调试难度	可调试目标	调试效果	建议使用优先级
Chrome 模拟器	简单	所有	模拟效果，基本能调试 UI 及标准 JS 所有问题	极高
Android 上的 Chrome	一般	Android Chrome	真机效果，支持单步	较高
IOS 上的 Safari	一般，需要 Mac	IOS Safari	真机效果，支持单步	高
Android 上的 UC	困难，需要 adb 辅助工具	Android UC	真机效果，支持单步	中等
Android APP里的 webview	困难	Android Webview	真机效果	低
Android 上的 x5 内核（微信等）	困难	Android x5 browser	真机效果, 支持单步	低
spy-debugger	一般	所有	真机效果，不支持单步调试	最低

详细方法

Chrome 模拟器

在 PC 上打开 Chrome 浏览器，打开想要调试的页面，然后右上角设置中打开开发人员工具(More Tools –> Developer Tools), 或者:
- 点击鼠标右键点击“检查” (inspect)，即可开始调试
- 使用快捷键: Windows 是 Ctrl + shift + I, Mac 为 option + command + I
默认在页面左侧顶部可以看到设备选择下拉菜单 Device, 右侧会有 HTML、CSS 的调试界面，右下侧会有 JS 的 console 面板

Android 上的 Chrome （需要梯子）

在 Android 和 PC 设备上均需安装 Chrome 浏览器。在 Android 上安装对应的设备驱动（如果找不到，豌豆荚是首选辅助工具）
用 USB 线连接 Android 和 PC 设备，开启当前 Android 设备的 USB 调试。
在 PC 上的 Chrome 地址栏输入 chrome://inspect 然后回车，或通过菜单图标→工具→检查设备，进入调试界面
在移动设备任何时候弹出的“是否允许远程调试”上，选择“允许”
PC 的 inspect 页面列表将展示已在 Android 上的 Chrome 中打开的页面。点击对应的 “inspect” 按钮则可开始调试

IOS 上的 Safari

在 IOS 设备上打开允许调试：设置 –> Safari –> 高级 –> 打开 “web检查器”
在 MAC 上打开 Safari 的开发菜单：顶部菜单栏 “Safari” –> 偏好设置 –> 高级 –> 打开在菜单栏中显示“开发”菜单 (show develop menu in menu bar)
在 IOS 设备上的 Safari 浏览器中打开要调试的页面，然后切换到 MAC 的 Safari，在顶部菜单栏选择 “开发” –> 找到你的 IOS 设备名称 –> 右边二级菜单选择需要调试的对应标签页，即可开始远程调试

Android 上的 UC

早前一篇有过详细描述，具体请戳 → Here

Android APP 里的 Webview （类似 Android 上的 Chrome, 需要梯子）

通过修改代码，在APP内设置允许远程调试（安卓 >= 4.4）, 具体方法在这里。然后安装 APP
在 PC 上安装 Chrome 浏览器（版本>=32）和对应的 Android 设备驱动（如果找不到，可以豌豆荚大法）
用 USB 线连接 Android 设备，开启当前 Android 设备的 USB 调试，在 PC 上的chrome地址栏输入 chrome://inspect 然后回车进入调试界面
在移动设备上弹出的是否允许远程调试上，选择“允许”
PC 的 inspect 页面列表将展示已在 Android webview 中打开的页面。点击对应的 “inspect” 按钮则可开始调试

Android 上的 x5 内核（主要针对微信等）

过程略繁琐，但是这个方案应该是目前调试webview最强大的工具，支持断点调试、控制台打印等。以下步骤以微信举例：

前期准备
- 下载 TbsSuiteNew.apk 安装到手机
- 打开微信，进入任意聊天界面，输入框内输入 //deletetbs，点发送
- 打开 TbsSuiteNew，安装本地 tbs 内核
  应用包名微信：com.tencent.mm，qq：com.tencent.mobileqq，qq 空间：com.qzone，本例中选择微信即可
- 启动应用，用微信访问一个页面，停留1分钟左右，目的是让微信来静默安装刚导入进去的tbs_xxxx_inspector.apk 包
- 一分钟过后打开TbsSuiteNew 检查是否安装成功。
  这里还需要在检查下打开微信随便进入一个 webview 页面然后长按页面文字是否有水滴，若有则成功
ADB安装
- 官网下载 android-sdk ，执行tools文件夹下面的 android，然后选择 android sdk platform tools 安装（示意图）
- 配置android环境变量 vim ~/.bash_profile
```
export ANDROID_TOOLS=/Users/sherlock/dev/android-sdk-macosx/platform-tools
export PATH=$PATH:$ANDROID_TOOLS
```
- 输入source .bash_profile，执行下环境变量；接着在终端输入 adb，看是否已经配置ok；
- usb连接手机，启动调试模式。终端输入adb devices，就能看到已经连接的设备。
  有时 adb devices不能显示连接设备，需要拔掉数据线，多插几次，并且退出终端，然后重新打开，重启adb。
python启动调试服务
- 下载调试包，解压，找到其中的 inspector_client20150401 解压，然后进入
- 执行以下 python 命令，
```
python ./inspector.py —abd 你自己的adb路径
python ./inspector.py --adb /Users/sherlock/dev/android-sdk-macosx/platform-tools/adb
```

启动成功，PC 打开 Chrome 浏览器，访问 http://localhost:9222/; 手机打开微信任意 webview，就能在 Chrome 看到这个页面的选项卡，点进去就是熟悉的调试界面～

有图有真相：

spy-debugger （最后的大招, Github repo）

集成并简化了 weinre 繁琐的配置过程。通过代理的方式拦截所有html自动注入weinre所需的js代码。

安装
Windows: npm install spy-debugger -g
Mac: sudo npm install spy-debugger -g
手机和 PC 保持在同一网络下（比如同时连到一个Wi-Fi下）
命令行输入spy-debugger, 按命令行提示用浏览器打开相应地址。
设置手机的 HTTP 代理，代理 IP 地址设置为 PC 的 IP 地址，端口为s py-debugger的启动端口。
用手机浏览器访问你要调试的页面即可。

下图是亲测 QQ 浏览器的调试：

At last

如果觉得文章对你有帮助的话，去 Github Repo 给个 star 吧亲～