?

在我們用phoengap+html5做的移動app中，經常遇到的問題就是 本地網頁兼容但是到了app出現不兼容的情況，原因是手機端頁面，大多運行在webkit內核的瀏覽器上，但還是會因平臺、廠商的不同而有種種兼容性問題。

?

下面就介紹一下在iOS和Android兩個平臺上如何在真機上對頁面進行調試。這里要說明的是，iOS平臺只能用自帶的Safari瀏覽器來調試，而Android平臺也只能用google Chrome瀏覽器來調試。當然，我目前只發現這么兩種手段，如果你還有其他方法可調試更多的瀏覽器，希望你能留言告訴我。

一、iOS + Safari

1、打開手機web檢查器。

通過【設置】>【Safari】>【高級】>【Web檢查器】打開。見下圖（點擊查看大圖），并且你會看到該選項下面對電腦操作的相應描述，照做就好。

2.鏈接電腦（Mac）

2.1 先在手機Safari中打開你想調試的網頁，并用數據線連接到電腦（我這里是Mac）

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

3.3 點擊2.2中的網站名就會在電腦上打開Safari的控制臺，如下圖（點擊查看大圖）：

?

3.調試網頁

如上3.3圖所示，此時你可以查看手機網頁的DOM結構，并且和電腦端網頁調試無異，當鼠標滑過這些DOM節點的時候手機上的相應布局也會高亮起來，如下圖（點擊查看大圖）：

?

二、Android + Chrome

1.設置手機

?

1.1【設置】>【關于手機】>【版本號（Build number）】，對版本號這一項連點7下（這是官方文檔里的說法）就會提示“你已成為開發者”。

?

1.2 再返回【設置】>【開發者選項】>【USB調試】打開手機USB調試。

?

2.設置電腦（Mac）

這塊比較麻煩，因為要裝一下Android的SDK。

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

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

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

?

3.鏈接電腦

3.1 在手機上的Chrome里打開想要調試的網頁，用數據線連接手機和電腦（我的是Mac。唉～我只是強調平臺的不同，不要誤會）。

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

?

4.調試網頁

4.1 你可以點擊圖3.2中檢測到的設備上正在運行的網站下面那個【inspect】，或者在瀏覽器中輸入 localhost:9222 打開手機正在瀏覽的網頁列表，如下圖：

?

4.2 點擊上圖中的網站縮略圖，就會跳轉到Google的一個代理鏈接（鏈接可能被墻……，掛代理）就會打開如下圖所示的控制臺（點擊查看大圖）：

?

4.3 這就和電腦上網頁調試沒什么差別了，鼠標經過DOM節點，手機上的布局同樣也會高亮起來：

嗯嗯嗯,over

轉載于:https://www.cnblogs.com/520BigBear/p/7839229.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。