开启Android手机WebView调试:inspect+Stetho

前言

开发html5页面用浏览器的调试模式就非常的方便,在浏览器里按F12键就可以立即调试,找出布局的问题,debug以及log输出。现在H5和原生的混合开发(原生内嵌H5页面)使用非常广泛,但是总会遇到各种兼容问题(浏览器正常,手机上异常;安卓或者苹果上有兼容问题;或者同一平台下不同机型也有兼容问题),此时就需要在真机上调试webView中的页面H5页面,接下来看一下如何调试在Android手机上调试Web页面。

目的

     在app和web页面混合开发的程序中,由于web页面嵌套在webview中,尤其遇到一些机型的适配问题时,必须在真机运行,才能复现问题,此时想要查看元素属性、页面数据、网络请求、debug调试等,在真机上并不容易实现。我们需要能够找到一种方法,可以连接真机调试webview中嵌套的web页面。这样web开发人员和app开发人员都可以方便地进行调试,定位问题所在。

使用inspect

我们知道在Chrome浏览器里按F12,使用DevTool很容易就可以开启调试:检查页面元素、监控网络请求、查看源码,打印日志等。见到iphone手机WebView的内核是Safari,调试时在Mac上打开Safari浏览器,可以达到和Chrome下调试web同样的效果,那么就好奇了,Android平台使用的WebView也是Chrome内核,难道Google就不会考虑到对WebView的调试吗?

答案是肯定的,Google提供了inspect,inspect是“检查、审查”的意思,Google提供它用于支持调试Android手机上的webView,使用方式如下。

一 inspect开启步骤

开启手机上的USB调试功能,打开开发者选项中的usb调试,连接电脑;

打开Chrome浏览器,地址栏输入:Chrome://inspect,回车;

Chrome会自动检测手机上打开的App,并列出可调试的WebView页面,如图:此时我们已经看到了DevTools,并且看到了连接的手机和页面。

点击inspect,即可看到和Chrome浏览器下调试web页面一样的效果了,然后,你可以愉快地进行调试了。

二 inspect白板问题

上面四步是很理想的状态下,顺利愉快地进入调试页面,不过更多情况下,你是会遇到各种各样的问题的。

1. 手机能链接,看不到进程(手机APP未开启webview调试权限)

如下图所示,手机打开app,跳转到我们要调试的web压面,但是我们在DevTools里看不到我们要调试的页面地址。这是因为Google为了安全起见,默认情况下WebView是关闭了debug调试功能的,开启调试需要在WebView初始化设置项时,添加如下代码:

WebView.setWebContentsDebuggingEnabled(true);

注意:为了安全起见,debug模式一般只在开发测试时开启,上线后需要关闭

2.inspect白板问题

当看到手机连接上了,又看到可以inspect的页面时,经常看到如下404页面。这是因为需要到chrome-devtools下载支持对应手机浏览器的驱动,服务器在美国,所以需要FQ才能正常下载,科学上网,方的利器。

除了FQ下载,还可以下载离线包【店主收费服务】:https://www.cnblogs.com/slmk/p/9832081.html

PS:为什么不能下载自己手机的离线包,只针对自己手机调试呢?

频繁覆盖的问题。合并版太大,chrome直接清除。专用版只能同时调试一款手机,会把前一个版本覆盖掉。

过期问题。chrome会定时清除掉离线包,空白了又要重新覆盖。

版本问题,有的网友使用的Chrome版本和要调试的WebView不兼容

安卓,苹果,Mac,Windows 好用的加速器 刷INS、访推特,完美支持高清1080P视频,无任何流量限制,真正免费的加速器https://web.lanshuapi.com/aff/nSYY

邀请码:nSYY

使用 Stetho

Stetho是一个FaceBook给Android应用提供的高级调试桥工具。当启用后,开发者可以使用Chrome桌面浏览器的Chrome开发者工具特性。Stetho官方地址:http://facebook.github.io/stetho/

1. Stetho的集成

Stretho的集成相当简单,只需要依赖指定的库,然后调用初始化方法即可;

// Gradle dependency on Stetho  dependencies { compile'com.facebook.stetho:stetho:1.5.1'  }

publicclassMyApplicationextendsApplication{publicvoidonCreate() {super.onCreate();Stetho.initializeWithDefaults(this);  }}

2.开始调试

Stetho软件通过使用客户端/服务器协议实现了在Chrome开发者工具前端的集成。一旦你的应用集成了Stetho,只要在地址栏上输入chrome://inspect并点击inspect【有的chrome版本比较低是inspect fallback】就可以开始玩儿了,如下图所示

可以看到,有Elements、Console控制台,Sources源码目录,Network网络监控等,像在DevTools一样可以。

在Elements审查页面的元素布局,右侧可以更改元素属性,手机可以实时看到界面变化,进行UI适配;

Console可以进行一些打印,函数调用等,查看当前界面的一些数据;

Sources可以查看源码,进行debug断点调试【和浏览器直接调试不同的是,断点时需要在手机上点下一步】;

Network可以监控网络请求,网络资源的加载等;

但是此时你看到的Network可能是空白的,为什么呢?因为Stetho将Network Inspection作为一个可选项进行抽离,需要单独接入。

3.监控Network

根据官方文档介绍,你需要依赖以下库中的一个(根据自己的网络请求框架决定)

  dependencies { compile'com.facebook.stetho:stetho-okhttp3:1.5.1'  } or:  dependencies { compile'com.facebook.stetho:stetho-okhttp:1.5.1'  } or:  dependencies { compile'com.facebook.stetho:stetho-urlconnection:1.5.1'  }

添加网络请求的拦截器

//For OkHttp 2.xOkHttpClientclient=newOkHttpClient();client.networkInterceptors().add(newStethoInterceptor());//For OkHttp 3.xnewOkHttpClient.Builder().addNetworkInterceptor(newStethoInterceptor()).build();

如果你使用HttpURLConnection,那么你可以使用StethoURLConnectionManager来帮助你进行网络监视,虽然用这个方法时要留意下一些警告信息。值得一提的是,你必须显示添加Accept-Encoding: gzip到请求头中,并手动处理压缩后的响应,以便Stetho报告压缩载荷大小。

再次启动你的app,打开web页面,再次进入inspect页面,选择Network,此时已经可以正常查看web页面的网络请求了。

适用范围

app内集成了Stetho之后,web开发人员,app开发人员,都可以在Chrome浏览器中打开chrome://inspect很方便的借助DevTools查看页面数据,查看网络请求,调试真机中的webview内嵌页面。

其它问题

1. inpect页面404

这是需要到https://chrome-devtools-frontend.appspot.com/serve_rev/@293f9bc46ce2af24bdbc1f632a37e87fa5247385/inspector.html去下载对应手机内核的驱动,293f9bc46ce2af24bdbc1f632a37e87fa5247385是对应的手机内核版本驱动编号。

解决方案:需要FQ

提供一个免费工具

安卓,苹果,Mac,Windows 好用的加速器 刷INS、访推特,完美支持高清1080P视频,无任何流量限制,真正免费的加速器https://web.lanshuapi.com/aff/nSYY

邀请码:nSYY

2. Chrome版本问题

我发现我电脑上可以调试,其它同事电脑没有inspect fallback的按钮,查看chrome浏览器-设置-关于chrome,我的版本是“版本 71.0.3578.98(正式版本) (64 位)”,同事的版本是“版本 89.0.4389.82(正式版本) (64 位)”,在他电脑上只有inspact和pause按钮,访问inspect后404页面。

我的旧版的上面有inspact和inspect fallback,其中inspect fallback可以正常使用,inspect还是404需要翻墙;之后我升级了和同事一样最新版本,发现没有inspect fallback了,这样和上一个问题一样,也需要FQ下手机驱动。

好在只需要下载完手机驱动就可以了,短时间内偶尔F一下还可以接受的。

参考

Sthetho 官方文档:http://facebook.github.io/stetho/

你可能感兴趣的:(开启Android手机WebView调试:inspect+Stetho)