Appium_调试h5页面_调试app的内部组件_调试app嵌入的webview

=

调试才是开发效率的核心。

感觉现在的工具真心还是难用,虽然是可以用了,也只是“可以用”而以。

=

一、调试h5页面

此种方式最简单,在安卓手机中安装安卓版 chrome,USB 连接 PC,然后在 PC 的 chrome 浏览器中打开 chrome://inspect 即可。 

如果上面太简单,我粘贴一个详细的:

通过Chrome的inspect对手机webview进行调试

前提:
1.PC上安装了最新版的chrome浏览器
2.手机上安装了最新版的chrome浏览器
 注:低版本的需要自己去安装adb,高版本的不用,所以大家还是直接用高版本的chrome吧
 步骤:
1.手机用数据线连接到电脑上
2.手机开启USB调试(在设置的开发者选项里)
3.PC的chrome访问chrome://inspect(访问网址后在手机上会弹出一个确认弹框,点击确认即可,如果不确认的),如果连接成功,就会在chrome下显示出对应的手机的型号,如下图:
Appium_调试h5页面_调试app的内部组件_调试app嵌入的webview
 
Appium_调试h5页面_调试app的内部组件_调试app嵌入的webview
4.在手机上的chrome浏览器内输入要查看页面元素的网址,比如www.baidu.com
5.此时PC上的chrome://inspect页面下会出现可以检查的页面,如下图所示:
Appium_调试h5页面_调试app的内部组件_调试app嵌入的webview
 
Appium_调试h5页面_调试app的内部组件_调试app嵌入的webview说明:手机浏览器上打开了多少个页签,就会显示几条红框中的数据,也可以在上图红框中的输入框内输入url去打开连接。
inspect:点击另弹出一个chrome去显示对应页面,可以用来调试
focus tab:焦点定位到这个页面,手机上会对应打开这个页面
reload:刷新,重新加载
close:关闭这个页面,手机上会对应关闭这个页面
6.点击对应页签下的inspect,另弹出的chrome页面上可以用来调试操作了,具体页面如下:
Appium_调试h5页面_调试app的内部组件_调试app嵌入的webview
 
说明:这个界面大家应该就很熟悉了,可以用来调试,获取元素,或者更改页面元素等操作,也可以在上图红框中输入url跳转页面,也可以操作左侧的界面,手机同步进行操作。
 另外有人遇到过弹出的是一个空的chrome页面,没有获取到页面的情况,有人说第一次打开需要FQ,当然网上也有不用FQ使用inspect的方法,大家如果遇到这种情况自己试验一下吧。
 现在对传统APP的界面,我只会用SDK自带的uiautomatorviewer来查看元素的一些属性,但是不能进行调试,如果大家有什么好的工具或方法也可以推荐给我~

二、调试app的内部组件

使用ANDROID_HOME\tools\uiautomatorviewer工具

三、调试app的webkit的webview

从 Android 4.4 开始,webkit是支持远程调试的,不过需要将app的debug模式打开,可以使用如下代码:

WebView.setWebContentsDebuggingEnabled(true);

由于大部分 App 的 debug 模式是关闭的,即便是内部 App,比如 QQ/微信,要去找一个开启了debug 模式的版本还是比较麻烦的。因此需要使用借助第三方工具来强制开启任何 App 的 Android webview debug模式,使之可以使用 chrome inspect。而这个工具就是 Xposed 

我们已经提供了一份要安装的文件,请首先到 https://github.com/feix760/WebViewDebugHook 下载文件。 

Xposed的具体使用参考:

http://blog.csdn.net/zhulin2609/article/details/51437821

Android4.4及以下低版本使用Xposed:

http://repo.xposed.info/module/de.robv.android.xposed.installer

Android5.0及以上高版本使用Xposed:

https://forum.xda-developers.com/showthread.php?t=3034811

1、root设备

因为涉及到 root 权限,因此需要将手机进行 root。有很多工具可以来 root,比如KingRoot、一键root、360一键root等。如果你安装了QQ电脑管家,可以在“电脑管家-工具箱-其他”列表里面看到KingRoot。 

2、安装xposed框架

在下载文件的hook.zip中,找到 de.robv.android.xposed.installer_v33_36570c.apk,安装之。也可以去 官网 下载。 

3、安装xposed webview debugging模块

在下载文件的hook.zip中,找到 WebViewDebugHook.apk,安装之。 

4、激活Xposed

安装后上述两个apk之后,可以看到手机上面出现了一个叫 Xposed Installer 的图标,点击进去之后会看到提示说Xposed未激活,点击红色字体部分,会切换到另外一条页面,点击“安装/更新”按钮即可。

Appium_调试h5页面_调试app的内部组件_调试app嵌入的webview

但有部分手机会出现类似如下的错误,导致无法点击“安装/更新”,目前已知的是部分版本的MIUI是会出现这个问题的。

Appium_调试h5页面_调试app的内部组件_调试app嵌入的webview

安装完成之后,重启再打开,再点击刚才点击过的地方,切入页面之后,勾选,再重启,重启之后即激活了Xposed。

Appium_调试h5页面_调试app的内部组件_调试app嵌入的webview

Appium_调试h5页面_调试app的内部组件_调试app嵌入的webview

5、关于QQ等(别折腾增了,过时了,请看下一篇文章)

QQ等默认会使用X5内核,把下载文件中的 debug.conf 放在sd卡根目录下就可以强制它使用 Android 自带 webview 。 

  • Tencent QQ use it's X5 kernel, and could not debugging. We can make a file named debug.conf with blow content in the root directory to force it use webview.

result_QProxy=false
    result_systemWebviewForceUsed=true
    setting_forceUseSystemWebview=true

6、测试

手机usb连接电脑,使用 chrome 打开 chrome://inspect ,然后打开任意 App 的 webview ,接下来就是见证奇迹的时候了。

参考:

1.强制开启android webview debug模式使用Chrome inspect

http://blog.csdn.net/zhulin2609/article/details/51437821

2.Google官方文档:https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging 

=

=

=

相关推荐