移动端调试方案

移动端开发浏览器调试的方式很多,可以参考各种 真机远程调试 方法 汇总

调试工具包括chrome remote device, safari等。

1. Chrome remote device

适用于一般的页面和webview,大部分的浏览器均可调试。通过USB连接电脑即可,谷歌官方有详细的介绍,可以参考远程调试 Android 设备使用入门

QQ browser、钉钉、微信中webview的页面一般无法用chrome remote device进行调试。

不过不是真机调试,算是用Chrome模拟的。

2. Mac Safari

真机测试

在iOS设备上的Safari浏览器中打开要调试的页面,然后切换到Mac的Safari,在顶部菜单栏选择“开发”→找到你的iOS设备名称→右边二级菜单选择需要调试的对应标签页,即可开始远程调试

Simulator

mac系统中通过模拟器可以直接进行真机测试,需要安装Xcode,启动模拟器后选择一个具体的设备,在模拟器中的safari访问页面;然后启动mac中的safari(需要开启开发者选项),重复重复上个步骤。

3. 腾讯TBS

可用于模拟QQ browser、微信等X5内核的浏览器页面,详细可以访问腾讯浏览服务 TBS studio。十分强大的调试工具。

我在开发过程中遇到过手机(锤子 Smartisan M1/ 小米 Mi 4c)无论如何都没法连接到mac TBS studio的问题。后来发现需要手动安装Android adb工具,让手机为电脑授权。

  • 下载Android SDK 命令行工具。下载sdk-tools和sdk-platform-tools,并且配置环境变量。

    ANDROID_SDK_PATH=/Users/lcc/Android/
    export ANDROID_SDK_PATH
    export PATH=$PATH:$ANDROID_SDK_PATH/tools:$ANDROID_SDK_PATH/platform-tools
    
    1
    2
    3
  • 通过usb连接手机后,启动adb的转发服务,也可以自定义端口

    adb forward tcp:9988 tcp:9988
    
    1
  • 在手机弹出的授权页面上为当前电脑授权,然后在TBS studio里即可正常连接。

4. 微信web开发者工具

微信自己推出的调试工具,在微信公众平台有比较详细的介绍。

但是仅适用于能够安装TBS内核的手机。我使用锤子M1手机开发时遇到过无法安装TBS内核的问题。TBS的安装也是一个大坑,建议还是使用腾讯的TBS Studio调试微信。

移动端调试工具

  • v-console 微信团队实现的工具库,在手机端模拟console的信息控制,可以方便的打印调试信息。但是一些代码错误有时候会捕捉不到。