Appium_Debug h5 page_Debug the internal components of the app_Debug the webview embedded in the app

=

Debugging is the core of development efficiency.

I feel that the current tools are really difficult to use. Although they can be used, they are only "available".

=

1. Debug h5 page

This is the easiest way to install the Android version of chrome on the Android phone, connect to the PC via USB, and then open chrome://inspect in the PC's chrome browser. 

 

If the above is too simple, I paste a detailed:

Debug the mobile webview through Chrome's inspect

premise:

1. The latest version of the chrome browser is installed on the PC

2. The latest version of chrome browser is installed on the phone

  Note: The low version needs to install adb by yourself, the high version does not need it, so you should use the high version of chrome directly.

  step:

1. Connect the mobile phone to the computer with a data cable

2. Turn on USB debugging on the phone (in the developer options in the settings)

3. Visit chrome://inspect in chrome of PC (a confirmation pop-up box will pop up on the mobile phone after visiting the website, click to confirm, if not confirmed), if the connection is successful, the corresponding mobile phone will be displayed under chrome model, as shown below:

 

4. Enter the URL of the page element you want to view in the chrome browser on your phone, such as www.baidu.com

5. At this time, a page that can be inspected will appear under the chrome://inspect page on the PC, as shown in the following figure:

 

Note: How many tabs are opened on the mobile browser, several pieces of data in the red box will be displayed, or you can enter the url in the input box in the red box above to open the connection.

Inspect: Click another chrome to pop up to display the corresponding page, which can be used for debugging

focus tab: The focus is positioned on this page, and this page will be opened on the phone accordingly

reload: refresh, reload

close: close this page, the mobile phone will correspondingly close this page

6. Click inspect under the corresponding tab, and the chrome page that pops up can be used to debug operations. The specific page is as follows:

 

Description: This interface should be familiar to everyone. It can be used to debug, get elements, or change page elements. You can also enter the url in the red box above to jump to the page, or you can operate the interface on the left to synchronize with your phone. to operate.

  另外有人遇到过弹出的是一个空的chrome页面，没有获取到页面的情况，有人说第一次打开需要FQ，当然网上也有不用FQ使用inspect的方法，大家如果遇到这种情况自己试验一下吧。

  现在对传统APP的界面，我只会用SDK自带的uiautomatorviewer来查看元素的一些属性，但是不能进行调试，如果大家有什么好的工具或方法也可以推荐给我~

http://www.tuicool.com/articles/BZR3imU

 

http://www.iunbug.com/archives/2013/06/05/817.html

 

 

二、调试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未激活，点击红色字体部分，会切换到另外一条页面，点击“安装/更新”按钮即可。

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

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

 

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 

=

=

=