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、浏览器访问调试
方式二:QQ浏览器调试微信页面
- 1、下载QQ浏览器,安装微信调试工具;
- 2、手机安装tbs,如上;
- 3、手机 usb连接电脑;
- 4、点击QQ浏览器工具栏的微信调试工具 - 网页调试 - 开始调试;
- 5、微信打开页面;
- 6、QQ浏览器面板中点击相应页面开始调试。
多么熟悉的调试面板~
ps:可能需要更改安全性设置
相关链接: