Android调试

国内Android系统用户大都使用 UC 浏览器、百度浏览器以及 QQ 手机浏览器等,由于Android的版本和设备的碎片化问题,加上国内特殊的用户和设备环境,这些浏览器通常使用的WebView是改造的内核,复杂程度要比iOS大的多。而 Chrome 作为最强大的浏览器,在它上面测试通过并不表示在当前 Android 的内置浏览器正常,通常内置浏览器功能会比较弱。

此外国内用户也有一定的比例使用微信、手机QQ等的内置浏览器来访问网页,使用的是webview根据app的版本差异webview机制也不相同,这些都造成了 Android 下面移动端调试的难度和复杂度。

目前Android系统的调试主要依赖Chrome的inspect功能,Chrome调试安卓

Inspect功能要求:

  • Chrome浏览器版本 >= 32
  • 安卓系统版本 > 4.0(webview调试 > 4.4)
  • 翻墙的网络环境。

步骤:

  • 手机和电脑连接同一网段,手机通过USB连接电脑
  • 手机打开usb调试模式,一般:设置 -> 其他高级设置 -> 开发者选项 -> USB调试
  • 手机访问页面(浏览器或webview),PC中Chrome浏览器打开chrome://inspect
  • 选择调试的页面开始调试

浏览器

系统浏览器

如上,系统版本 > 4.0 使用 chrome://inspect

UC浏览器

  • Android设备上安装UC浏览器开发版

  • 调试有两种连接模式:

    • (1) Wifi 连接模:Wi-Fi 模式下,保证手机与 PC 处于同一个无线网段即可。

      • 手机和PC处于同一网段,获取手机的IP(如小米2A,获取方式为:设置->WLAN->高级设置->IP地址)

      • 先手机访问IP:9998,在出现的弹窗中点击“确定”(之前一直看官方教程没有提到这点,导致尝试很久都没有成功),再次刷新页面会出现提示。

  • PC访问IP:9998,选择调试的页面,进入后调试元素,在UC开发版手机端将看到变化的效果

  • (2) USB 连接模式:USB 连接模式需要搭建 Android SDK 开发环境或安装 adb 工具。

百度浏览器

未提供自己的开发者工作,调试方法见下一节iOS&Android。

QQ手机浏览器

见下一节iOS&Android或此节中 腾讯X5 Webview。

Webview

点评&美团

4.4以下

jsHybugger 是一个用于调试安卓设备(2.3.3以上)上web applications和hybrid apps的工具,目测需要app代码支持。

  • 见下一节iOS&Android
4.4及以上
  • 点评app:切换到debug模式 chrome://inspect
  • 美团app:debug版 chrome://inspect

腾讯X5 Webview

微信6.1版本以上的android用户,都是使用的QQ浏览器的X5内核。5.4-6.1之间的版本,若用户安装了QQ浏览器就是使用的X5内核,若用户未安装浏览器,使用的是系统内核。

TBS & ADB
  • TBS:腾讯浏览服务(Tencent Browser Service),集成腾讯底层技术、内容框架、广告体系以及大数据等多方面能力,提供给了企业们一个一揽子的升级浏览解决方案。

    安装方式:

    ps:如何确认已安装tbs?打开任意一个微信网页,长按文字会出现如下图所示的水滴状复制按钮,下拉出现"QQ浏览器X5内核提供技术支持字样"。

  • ADB:Android Debug Bridge,就是调试桥的作用,借助这个工具,我们可以管理设备或手机模拟器的状态 ,还可以进行以下的操作:

    • (1)快速更新设备或手机模拟器中的代码,如应用或Android系统升级;
    • (2)在设备上运行Shell命令;
    • (3)管理设备或手机模拟器上的预定端口;
    • (4)在设备或手机模拟器上复制或粘贴文件。
调试方式
方式一:python本地服务器调试

  • 1、安装TBS;
  • 2、安装ADB,配置android环境变量;
  • 3、安装python,下载调试包,解压进入目录python,启动调试服务;
  • 4、浏览器访问调试

相关教程:屌爆了,完美调试 微信webview(x5)

方式二:QQ浏览器调试微信页面

  • 2、手机安装tbs,如上;
  • 3、手机 usb连接电脑;
  • 4、点击QQ浏览器工具栏的微信调试工具 - 网页调试 - 开始调试;
  • 5、微信打开页面;
  • 6、QQ浏览器面板中点击相应页面开始调试。

多么熟悉的调试面板~

ps:可能需要更改安全性设置

相关链接:

results matching ""

    No results matching ""