?

在我們用phoengap+html5做的移動(dòng)app中，經(jīng)常遇到的問題就是 本地網(wǎng)頁兼容但是到了app出現(xiàn)不兼容的情況，原因是手機(jī)端頁面，大多運(yùn)行在webkit內(nèi)核的瀏覽器上，但還是會(huì)因平臺(tái)、廠商的不同而有種種兼容性問題。

?

下面就介紹一下在iOS和Android兩個(gè)平臺(tái)上如何在真機(jī)上對(duì)頁面進(jìn)行調(diào)試。這里要說明的是，iOS平臺(tái)只能用自帶的Safari瀏覽器來調(diào)試，而Android平臺(tái)也只能用google Chrome瀏覽器來調(diào)試。當(dāng)然，我目前只發(fā)現(xiàn)這么兩種手段，如果你還有其他方法可調(diào)試更多的瀏覽器，希望你能留言告訴我。

一、iOS + Safari

1、打開手機(jī)web檢查器。

通過【設(shè)置】>【Safari】>【高級(jí)】>【W(wǎng)eb檢查器】打開。見下圖（點(diǎn)擊查看大圖），并且你會(huì)看到該選項(xiàng)下面對(duì)電腦操作的相應(yīng)描述，照做就好。

2.鏈接電腦（Mac）

2.1 先在手機(jī)Safari中打開你想調(diào)試的網(wǎng)頁，并用數(shù)據(jù)線連接到電腦（我這里是Mac）

2.2 再在電腦上打開Safari點(diǎn)擊【Develop】菜單，就會(huì)看到如下圖所示（點(diǎn)擊查看大圖）：

3.3 點(diǎn)擊2.2中的網(wǎng)站名就會(huì)在電腦上打開Safari的控制臺(tái)，如下圖（點(diǎn)擊查看大圖）：

?

3.調(diào)試網(wǎng)頁

如上3.3圖所示，此時(shí)你可以查看手機(jī)網(wǎng)頁的DOM結(jié)構(gòu)，并且和電腦端網(wǎng)頁調(diào)試無異，當(dāng)鼠標(biāo)滑過這些DOM節(jié)點(diǎn)的時(shí)候手機(jī)上的相應(yīng)布局也會(huì)高亮起來，如下圖（點(diǎn)擊查看大圖）：

?

二、Android + Chrome

1.設(shè)置手機(jī)

?

1.1【設(shè)置】>【關(guān)于手機(jī)】>【版本號(hào)（Build number）】，對(duì)版本號(hào)這一項(xiàng)連點(diǎn)7下（這是官方文檔里的說法）就會(huì)提示“你已成為開發(fā)者”。

?

1.2 再返回【設(shè)置】>【開發(fā)者選項(xiàng)】>【USB調(diào)試】打開手機(jī)USB調(diào)試。

?

2.設(shè)置電腦（Mac）

這塊比較麻煩，因?yàn)橐b一下Android的SDK。

2.1 下載Android SDK，并解壓，我把整個(gè)adt目錄放在了?/Users/David/adt/ 這里。

2.2 設(shè)置環(huán)境變量 。打開終端在David路徑下（形如 DaviddeMacBook-Pro:~ David$）輸入?open .bash_profile，如果文件存在則會(huì)打開，如果不存在則再輸入touch .bash_profile?創(chuàng)建并打開這個(gè)文件。在文件里輸入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools?，關(guān)閉保存。最后在終端里輸入?source .bash_profile?來更新環(huán)境變量使其生效。終端里輸入?adb?出現(xiàn)命令幫助信息就是成功了。

2.3 在終端里輸入?adb forward tcp:9222 localabstract:chrome_devtools_remote? 。

?

3.鏈接電腦

3.1 在手機(jī)上的Chrome里打開想要調(diào)試的網(wǎng)頁，用數(shù)據(jù)線連接手機(jī)和電腦（我的是Mac。唉～我只是強(qiáng)調(diào)平臺(tái)的不同，不要誤會(huì)）。

3.2 打開電腦上的Chrome，在地址欄里輸入?about:inspect?選中 【Discover USB Devices】前面的復(fù)選框。出現(xiàn)下圖畫面（點(diǎn)擊查看大圖）：

?

4.調(diào)試網(wǎng)頁

4.1 你可以點(diǎn)擊圖3.2中檢測到的設(shè)備上正在運(yùn)行的網(wǎng)站下面那個(gè)【inspect】，或者在瀏覽器中輸入 localhost:9222 打開手機(jī)正在瀏覽的網(wǎng)頁列表，如下圖：

?

4.2 點(diǎn)擊上圖中的網(wǎng)站縮略圖，就會(huì)跳轉(zhuǎn)到Google的一個(gè)代理鏈接（鏈接可能被墻……，掛代理）就會(huì)打開如下圖所示的控制臺(tái)（點(diǎn)擊查看大圖）：

?

4.3 這就和電腦上網(wǎng)頁調(diào)試沒什么差別了，鼠標(biāo)經(jīng)過DOM節(jié)點(diǎn)，手機(jī)上的布局同樣也會(huì)高亮起來：

嗯嗯嗯,over

轉(zhuǎn)載于:https://www.cnblogs.com/520BigBear/p/7839229.html

超強(qiáng)干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的如何在移动设备上调试html5开发的网页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。