开启Android手机WebView调试:inspect+Stetho |
您所在的位置:网站首页 › safari调试webview › 开启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 使用 StethoStetho是一个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/ |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |