前言

開(kāi)發(fā)html5頁(yè)面用瀏覽器的調(diào)試模式就非常的方便初婆，在瀏覽器里按F12鍵就可以立即調(diào)試逃呼，找出布局的問(wèn)題，debug以及l(fā)og輸出。現(xiàn)在H5和原生的混合開(kāi)發(fā)（原生內(nèi)嵌H5頁(yè)面）使用非常廣泛琼懊，但是總會(huì)遇到各種兼容問(wèn)題（瀏覽器正常，手機(jī)上異常爬早；安卓或者蘋(píng)果上有兼容問(wèn)題哼丈；或者同一平臺(tái)下不同機(jī)型也有兼容問(wèn)題），此時(shí)就需要在真機(jī)上調(diào)試webView中的頁(yè)面H5頁(yè)面筛严，接下來(lái)看一下如何調(diào)試在Android手機(jī)上調(diào)試Web頁(yè)面醉旦。

目的

? ? ?在app和web頁(yè)面混合開(kāi)發(fā)的程序中，由于web頁(yè)面嵌套在webview中桨啃，尤其遇到一些機(jī)型的適配問(wèn)題時(shí)车胡，必須在真機(jī)運(yùn)行，才能復(fù)現(xiàn)問(wèn)題照瘾，此時(shí)想要查看元素屬性匈棘、頁(yè)面數(shù)據(jù)、網(wǎng)絡(luò)請(qǐng)求析命、debug調(diào)試等主卫，在真機(jī)上并不容易實(shí)現(xiàn)逃默。我們需要能夠找到一種方法，可以連接真機(jī)調(diào)試webview中嵌套的web頁(yè)面队秩。這樣web開(kāi)發(fā)人員和app開(kāi)發(fā)人員都可以方便地進(jìn)行調(diào)試笑旺，定位問(wèn)題所在。

使用inspect

我們知道在Chrome瀏覽器里按F12馍资，使用DevTool很容易就可以開(kāi)啟調(diào)試：檢查頁(yè)面元素筒主、監(jiān)控網(wǎng)絡(luò)請(qǐng)求、查看源碼鸟蟹，打印日志等乌妙。見(jiàn)到iphone手機(jī)WebView的內(nèi)核是Safari，調(diào)試時(shí)在Mac上打開(kāi)Safari瀏覽器建钥，可以達(dá)到和Chrome下調(diào)試web同樣的效果藤韵，那么就好奇了，Android平臺(tái)使用的WebView也是Chrome內(nèi)核熊经，難道Google就不會(huì)考慮到對(duì)WebView的調(diào)試嗎泽艘？

答案是肯定的，Google提供了inspect镐依，inspect是“檢查匹涮、審查”的意思，Google提供它用于支持調(diào)試Android手機(jī)上的webView槐壳，使用方式如下然低。

一 inspect開(kāi)啟步驟

開(kāi)啟手機(jī)上的USB調(diào)試功能，打開(kāi)開(kāi)發(fā)者選項(xiàng)中的usb調(diào)試务唐，連接電腦雳攘；

打開(kāi)Chrome瀏覽器，地址欄輸入：Chrome://inspect枫笛，回車吨灭；

Chrome會(huì)自動(dòng)檢測(cè)手機(jī)上打開(kāi)的App，并列出可調(diào)試的WebView頁(yè)面刑巧，如圖：此時(shí)我們已經(jīng)看到了DevTools沃于，并且看到了連接的手機(jī)和頁(yè)面。

點(diǎn)擊inspect海诲，即可看到和Chrome瀏覽器下調(diào)試web頁(yè)面一樣的效果了，然后檩互，你可以愉快地進(jìn)行調(diào)試了特幔。

二 inspect白板問(wèn)題

上面四步是很理想的狀態(tài)下，順利愉快地進(jìn)入調(diào)試頁(yè)面闸昨，不過(guò)更多情況下蚯斯，你是會(huì)遇到各種各樣的問(wèn)題的薄风。

1. 手機(jī)能鏈接，看不到進(jìn)程（手機(jī)APP未開(kāi)啟webview調(diào)試權(quán)限）

如下圖所示拍嵌，手機(jī)打開(kāi)app遭赂，跳轉(zhuǎn)到我們要調(diào)試的web壓面，但是我們?cè)贒evTools里看不到我們要調(diào)試的頁(yè)面地址横辆。這是因?yàn)镚oogle為了安全起見(jiàn)撇他，默認(rèn)情況下WebView是關(guān)閉了debug調(diào)試功能的，開(kāi)啟調(diào)試需要在WebView初始化設(shè)置項(xiàng)時(shí)狈蚤，添加如下代碼：

WebView.setWebContentsDebuggingEnabled(true);

注意：為了安全起見(jiàn)困肩，debug模式一般只在開(kāi)發(fā)測(cè)試時(shí)開(kāi)啟，上線后需要關(guān)閉

2.inspect白板問(wèn)題

當(dāng)看到手機(jī)連接上了脆侮，又看到可以inspect的頁(yè)面時(shí)锌畸，經(jīng)常看到如下404頁(yè)面靖避。這是因?yàn)樾枰絚hrome-devtools下載支持對(duì)應(yīng)手機(jī)瀏覽器的驅(qū)動(dòng)潭枣，服務(wù)器在美國(guó)，所以需要FQ才能正常下載幻捏，科學(xué)上網(wǎng)盆犁，方的利器。

除了FQ下載粘咖，還可以下載離線包【店主收費(fèi)服務(wù)】：https://www.cnblogs.com/slmk/p/9832081.html

PS:為什么不能下載自己手機(jī)的離線包蚣抗，只針對(duì)自己手機(jī)調(diào)試呢？

頻繁覆蓋的問(wèn)題瓮下。合并版太大翰铡，chrome直接清除。專用版只能同時(shí)調(diào)試一款手機(jī)讽坏，會(huì)把前一個(gè)版本覆蓋掉锭魔。

過(guò)期問(wèn)題。chrome會(huì)定時(shí)清除掉離線包路呜，空白了又要重新覆蓋迷捧。

版本問(wèn)題，有的網(wǎng)友使用的Chrome版本和要調(diào)試的WebView不兼容

安卓,蘋(píng)果,Mac,Windows 好用的加速器 刷INS胀葱、訪推特漠秋，完美支持高清1080P視頻，無(wú)任何流量限制,真正免費(fèi)的加速器https://web.lanshuapi.com/aff/nSYY

邀請(qǐng)碼：nSYY

使用 Stetho

Stetho是一個(gè)FaceBook給Android應(yīng)用提供的高級(jí)調(diào)試橋工具抵屿。當(dāng)啟用后庆锦，開(kāi)發(fā)者可以使用Chrome桌面瀏覽器的Chrome開(kāi)發(fā)者工具特性。Stetho官方地址：http://facebook.github.io/stetho/

1. Stetho的集成

Stretho的集成相當(dāng)簡(jiǎn)單轧葛，只需要依賴指定的庫(kù)搂抒，然后調(diào)用初始化方法即可艇搀；

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

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

2.開(kāi)始調(diào)試

Stetho軟件通過(guò)使用客戶端/服務(wù)器協(xié)議實(shí)現(xiàn)了在Chrome開(kāi)發(fā)者工具前端的集成。一旦你的應(yīng)用集成了Stetho求晶，只要在地址欄上輸入chrome://inspect并點(diǎn)擊inspect【有的chrome版本比較低是inspect fallback】就可以開(kāi)始玩兒了焰雕，如下圖所示

可以看到，有Elements芳杏、Console控制臺(tái),Sources源碼目錄,Network網(wǎng)絡(luò)監(jiān)控等矩屁，像在DevTools一樣可以。

在Elements審查頁(yè)面的元素布局蚜锨，右側(cè)可以更改元素屬性档插，手機(jī)可以實(shí)時(shí)看到界面變化，進(jìn)行UI適配亚再；

Console可以進(jìn)行一些打印郭膛，函數(shù)調(diào)用等，查看當(dāng)前界面的一些數(shù)據(jù)氛悬；

Sources可以查看源碼则剃，進(jìn)行debug斷點(diǎn)調(diào)試【和瀏覽器直接調(diào)試不同的是，斷點(diǎn)時(shí)需要在手機(jī)上點(diǎn)下一步】如捅；

Network可以監(jiān)控網(wǎng)絡(luò)請(qǐng)求棍现，網(wǎng)絡(luò)資源的加載等；

但是此時(shí)你看到的Network可能是空白的镜遣，為什么呢己肮？因?yàn)镾tetho將Network Inspection作為一個(gè)可選項(xiàng)進(jìn)行抽離，需要單獨(dú)接入悲关。

3.監(jiān)控Network

根據(jù)官方文檔介紹谎僻，你需要依賴以下庫(kù)中的一個(gè)（根據(jù)自己的網(wǎng)絡(luò)請(qǐng)求框架決定）

? 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ò)請(qǐng)求的攔截器

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

如果你使用HttpURLConnection，那么你可以使用StethoURLConnectionManager來(lái)幫助你進(jìn)行網(wǎng)絡(luò)監(jiān)視寓辱，雖然用這個(gè)方法時(shí)要留意下一些警告信息艘绍。值得一提的是，你必須顯示添加Accept-Encoding: gzip到請(qǐng)求頭中秫筏，并手動(dòng)處理壓縮后的響應(yīng)诱鞠，以便Stetho報(bào)告壓縮載荷大小。

再次啟動(dòng)你的app这敬，打開(kāi)web頁(yè)面航夺，再次進(jìn)入inspect頁(yè)面，選擇Network崔涂，此時(shí)已經(jīng)可以正常查看web頁(yè)面的網(wǎng)絡(luò)請(qǐng)求了敷存。

適用范圍

app內(nèi)集成了Stetho之后，web開(kāi)發(fā)人員，app開(kāi)發(fā)人員锚烦，都可以在Chrome瀏覽器中打開(kāi)chrome://inspect很方便的借助DevTools查看頁(yè)面數(shù)據(jù)，查看網(wǎng)絡(luò)請(qǐng)求帝雇，調(diào)試真機(jī)中的webview內(nèi)嵌頁(yè)面涮俄。

其它問(wèn)題

1. inpect頁(yè)面404

這是需要到https://chrome-devtools-frontend.appspot.com/serve_rev/@293f9bc46ce2af24bdbc1f632a37e87fa5247385/inspector.html去下載對(duì)應(yīng)手機(jī)內(nèi)核的驅(qū)動(dòng)，293f9bc46ce2af24bdbc1f632a37e87fa5247385是對(duì)應(yīng)的手機(jī)內(nèi)核版本驅(qū)動(dòng)編號(hào)尸闸。

解決方案：需要FQ

提供一個(gè)免費(fèi)工具

安卓,蘋(píng)果,Mac,Windows 好用的加速器 刷INS彻亲、訪推特，完美支持高清1080P視頻吮廉，無(wú)任何流量限制,真正免費(fèi)的加速器https://web.lanshuapi.com/aff/nSYY

邀請(qǐng)碼：nSYY

2. Chrome版本問(wèn)題

我發(fā)現(xiàn)我電腦上可以調(diào)試苞尝，其它同事電腦沒(méi)有inspect fallback的按鈕，查看chrome瀏覽器-設(shè)置-關(guān)于chrome宦芦，我的版本是“版本 71.0.3578.98（正式版本） （64 位）”宙址，同事的版本是“版本 89.0.4389.82（正式版本） （64 位）”，在他電腦上只有inspact和pause按鈕调卑，訪問(wèn)inspect后404頁(yè)面抡砂。

我的舊版的上面有inspact和inspect fallback，其中inspect fallback可以正常使用恬涧，inspect還是404需要翻墻注益；之后我升級(jí)了和同事一樣最新版本，發(fā)現(xiàn)沒(méi)有inspect fallback了溯捆，這樣和上一個(gè)問(wèn)題一樣丑搔，也需要FQ下手機(jī)驅(qū)動(dòng)。

好在只需要下載完手機(jī)驅(qū)動(dòng)就可以了提揍，短時(shí)間內(nèi)偶爾F一下還可以接受的啤月。

參考

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