如何在移動裝置上除錯html5開發的網頁
阿新 • • 發佈:2018-12-17
如何在移動裝置上除錯html5開發的網頁
在我們用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點選【開發】選單,就會看到如下圖所示(點選檢視大圖):
3.3 點選2.2中的網站名就會在電腦上開啟Safari的控制檯,如下圖(點選檢視大圖):
3.除錯網頁
如上3.3圖所示,此時你可以檢視手機網頁的DOM結構,並且和電腦端網頁除錯無異,當滑鼠滑過這些DOM節點的時候手機上的相應佈局也會高亮起來,如下圖(點選檢視大圖):
二、Android + Chrome
1.設定手機
1.1【設定】>【關於手機】>【版本號(Build number)】,對版本號這一項連點7下(這是官方文件裡的說法)就會提示“你已成為開發者”。
1.2 再返回【設定】>【開發者選項】>【USB除錯】開啟手機USB除錯。