前言
開發(fā)html5頁面用瀏覽器的調(diào)試模式就非常的方便，在瀏覽器里按F12鍵就可以立即調(diào)試，找出布局的問題，debug以及l(fā)og輸出?，F(xiàn)在H5和原生的混合開發(fā)（原生內(nèi)嵌H5頁面）使用非常廣泛，但是總會遇到各種兼容問題（瀏覽器正常，手機上異常；安卓或者蘋果上有兼容問題；或者同一平臺下不同機型也有兼容問題），此時就需要在真機上調(diào)試webView中的頁面H5頁面，接下來看一下如何調(diào)試在Android手機上調(diào)試Web頁面。
目的
? ? ?在app和web頁面混合開發(fā)的程序中，由于web頁面嵌套在webview中，尤其遇到一些機型的適配問題時，必須在真機運行，才能復(fù)現(xiàn)問題，此時想要查看元素屬性、頁面數(shù)據(jù)、網(wǎng)絡(luò)請求、debug調(diào)試等，在真機上并不容易實現(xiàn)。我們需要能夠找到一種方法，可以連接真機調(diào)試webview中嵌套的web頁面。這樣web開發(fā)人員和app開發(fā)人員都可以方便地進行調(diào)試，定位問題所在。
使用inspect
我們知道在Chrome瀏覽器里按F12，使用DevTool很容易就可以開啟調(diào)試：檢查頁面元素、監(jiān)控網(wǎng)絡(luò)請求、查看源碼，打印日志等。見到iphone手機WebView的內(nèi)核是Safari，調(diào)試時在Mac上打開Safari瀏覽器，可以達到和Chrome下調(diào)試web同樣的效果，那么就好奇了，Android平臺使用的WebView也是Chrome內(nèi)核，難道Google就不會考慮到對WebView的調(diào)試嗎？
答案是肯定的，Google提供了inspect，inspect是“檢查、審查”的意思，Google提供它用于支持調(diào)試Android手機上的webView，使用方式如下。
一 inspect開啟步驟
開啟手機上的USB調(diào)試功能，打開開發(fā)者選項中的usb調(diào)試，連接電腦；
打開Chrome瀏覽器，地址欄輸入：Chrome://inspect，回車；
Chrome會自動檢測手機上打開的App，并列出可調(diào)試的WebView頁面，如圖：此時我們已經(jīng)看到了DevTools，并且看到了連接的手機和頁面。
點擊inspect，即可看到和Chrome瀏覽器下調(diào)試web頁面一樣的效果了，然后，你可以愉快地進行調(diào)試了。
二 inspect白板問題
上面四步是很理想的狀態(tài)下，順利愉快地進入調(diào)試頁面，不過更多情況下，你是會遇到各種各樣的問題的。
1. 手機能鏈接，看不到進程（手機APP未開啟webview調(diào)試權(quán)限）
如下圖所示，手機打開app，跳轉(zhuǎn)到我們要調(diào)試的web壓面，但是我們在DevTools里看不到我們要調(diào)試的頁面地址。這是因為Google為了安全起見，默認情況下WebView是關(guān)閉了debug調(diào)試功能的，開啟調(diào)試需要在WebView初始化設(shè)置項時，添加如下代碼：
WebView.setWebContentsDebuggingEnabled(true);
注意：為了安全起見，debug模式一般只在開發(fā)測試時開啟，上線后需要關(guān)閉
2.inspect白板問題
當(dāng)看到手機連接上了，又看到可以inspect的頁面時，經(jīng)?？吹饺缦?04頁面。這是因為需要到chrome-devtools下載支持對應(yīng)手機瀏覽器的驅(qū)動，服務(wù)器在美國，所以需要FQ才能正常下載，科學(xué)上網(wǎng)，方的利器。
除了FQ下載，還可以下載離線包【店主收費服務(wù)】：https://www.cnblogs.com/slmk/p/9832081.html
PS:為什么不能下載自己手機的離線包，只針對自己手機調(diào)試呢？
頻繁覆蓋的問題。合并版太大，chrome直接清除。專用版只能同時調(diào)試一款手機，會把前一個版本覆蓋掉。
過期問題。chrome會定時清除掉離線包，空白了又要重新覆蓋。
版本問題，有的網(wǎng)友使用的Chrome版本和要調(diào)試的WebView不兼容
安卓,蘋果,Mac,Windows 好用的加速器 刷INS、訪推特，完美支持高清1080P視頻，無任何流量限制,真正免費的加速器https://web.lanshuapi.com/aff/nSYY
邀請碼：nSYY
使用 Stetho
Stetho是一個FaceBook給Android應(yīng)用提供的高級調(diào)試橋工具。當(dāng)啟用后，開發(fā)者可以使用Chrome桌面瀏覽器的Chrome開發(fā)者工具特性。Stetho官方地址：http://facebook.github.io/stetho/
1. Stetho的集成
Stretho的集成相當(dāng)簡單，只需要依賴指定的庫，然后調(diào)用初始化方法即可；
// Gradle dependency on Stetho? dependencies { compile'com.facebook.stetho:stetho:1.5.1'? }
publicclassMyApplicationextendsApplication{publicvoidonCreate() {super.onCreate();Stetho.initializeWithDefaults(this);? }}
2.開始調(diào)試
Stetho軟件通過使用客戶端/服務(wù)器協(xié)議實現(xiàn)了在Chrome開發(fā)者工具前端的集成。一旦你的應(yīng)用集成了Stetho，只要在地址欄上輸入chrome://inspect并點擊inspect【有的chrome版本比較低是inspect fallback】就可以開始玩兒了，如下圖所示
可以看到，有Elements、Console控制臺,Sources源碼目錄,Network網(wǎng)絡(luò)監(jiān)控等，像在DevTools一樣可以。
在Elements審查頁面的元素布局，右側(cè)可以更改元素屬性，手機可以實時看到界面變化，進行UI適配；
Console可以進行一些打印，函數(shù)調(diào)用等，查看當(dāng)前界面的一些數(shù)據(jù)；
Sources可以查看源碼，進行debug斷點調(diào)試【和瀏覽器直接調(diào)試不同的是，斷點時需要在手機上點下一步】；
Network可以監(jiān)控網(wǎng)絡(luò)請求，網(wǎng)絡(luò)資源的加載等；
但是此時你看到的Network可能是空白的，為什么呢？因為Stetho將Network Inspection作為一個可選項進行抽離，需要單獨接入。
3.監(jiān)控Network
根據(jù)官方文檔介紹，你需要依賴以下庫中的一個（根據(jù)自己的網(wǎng)絡(luò)請求框架決定）
? 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'? }
添加網(wǎng)絡(luò)請求的攔截器
//For OkHttp 2.xOkHttpClientclient=newOkHttpClient();client.networkInterceptors().add(newStethoInterceptor());//For OkHttp 3.xnewOkHttpClient.Builder().addNetworkInterceptor(newStethoInterceptor()).build();
如果你使用HttpURLConnection，那么你可以使用StethoURLConnectionManager來幫助你進行網(wǎng)絡(luò)監(jiān)視，雖然用這個方法時要留意下一些警告信息。值得一提的是，你必須顯示添加Accept-Encoding: gzip到請求頭中，并手動處理壓縮后的響應(yīng)，以便Stetho報告壓縮載荷大小。
再次啟動你的app，打開web頁面，再次進入inspect頁面，選擇Network，此時已經(jīng)可以正常查看web頁面的網(wǎng)絡(luò)請求了。
適用范圍
app內(nèi)集成了Stetho之后，web開發(fā)人員，app開發(fā)人員，都可以在Chrome瀏覽器中打開chrome://inspect很方便的借助DevTools查看頁面數(shù)據(jù)，查看網(wǎng)絡(luò)請求，調(diào)試真機中的webview內(nèi)嵌頁面。
其它問題
1. inpect頁面404
這是需要到https://chrome-devtools-frontend.appspot.com/serve_rev/@293f9bc46ce2af24bdbc1f632a37e87fa5247385/inspector.html去下載對應(yīng)手機內(nèi)核的驅(qū)動，293f9bc46ce2af24bdbc1f632a37e87fa5247385是對應(yīng)的手機內(nèi)核版本驅(qū)動編號。
解決方案：需要FQ
提供一個免費工具
安卓,蘋果,Mac,Windows 好用的加速器 刷INS、訪推特，完美支持高清1080P視頻，無任何流量限制,真正免費的加速器https://web.lanshuapi.com/aff/nSYY
邀請碼：nSYY
2. Chrome版本問題
我發(fā)現(xiàn)我電腦上可以調(diào)試，其它同事電腦沒有inspect fallback的按鈕，查看chrome瀏覽器-設(shè)置-關(guān)于chrome，我的版本是“版本 71.0.3578.98（正式版本） （64 位）”，同事的版本是“版本 89.0.4389.82（正式版本） （64 位）”，在他電腦上只有inspact和pause按鈕，訪問inspect后404頁面。
我的舊版的上面有inspact和inspect fallback，其中inspect fallback可以正常使用，inspect還是404需要翻墻；之后我升級了和同事一樣最新版本，發(fā)現(xiàn)沒有inspect fallback了，這樣和上一個問題一樣，也需要FQ下手機驅(qū)動。
好在只需要下載完手機驅(qū)動就可以了，短時間內(nèi)偶爾F一下還可以接受的。
參考
Sthetho 官方文檔：http://facebook.github.io/stetho/
