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

Elevenbeans

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

2017-06-06 ｜ # Tech

浏览器兼容性一直以来都是让 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/IOS APP 里的 webview	困难	Webview	真机效果	低
Android 上的 x5 内核（微信等）	困难	Android x5 browser	真机效果，支持单步	低
spy-debugger/vorlon	一般	所有	真机效果，不支持单步调试	最低

详细方法

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” 按钮则可开始调试

IOS APP Webview 同理

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

===================== Updated 2017-06-08 ===================

感谢掘金用户 @夏空君提醒，目前 X5 有 TBS_Studio 这种整体解决方案了

给个传送门吧: TBS开发调试利器——TBS Studio开篇

===================== End ===================

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

前期准备
- 下载 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 安装（示意图）
- *nix 平台 ADB 配置
  - 配置 Android 环境变量 vim ~/.bash_profile
    1
    2
    export ANDROID_TOOLS=/Users/<yourname>/<yourpath>/android-sdk-macosx/platform-tools
    export PATH=$PATH:$ANDROID_TOOLS
  - 输入 source .bash_profile，执行下环境变量；接着在终端输入 adb，看是否已经配置 OK
- Window 平台 ADB 配置
  - 系统环境变量里加入 adb.exe 的文件地址，或者直接将文件复制到 system32 下即可
- USB 连接手机，启动调试模式。终端输入 adb devices，就能看到已经连接的设备。
  有时 adb devices 不能显示连接设备，需要拔掉数据线，多插几次，并且退出终端，然后重新打开，重启adb。
python启动调试服务
- 下载调试包，解压，找到其中的 inspector_client20150401 解压，然后进入
- 执行以下 python 命令，
  1
  2
  python ./inspector.py —abd 你自己的adb路径
  python ./inspector.py --adb /Users/<yourName>/<yourpath>/android-sdk-macosx/platform-tools/adb
- 启动成功，PC 打开 Chrome 浏览器，访问 http://localhost:9222/; 手机打开微信任意 Webview，就能在 Chrome 看到这个页面的选项卡，点进去就是熟悉的调试界面～