前言
开发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/