如何調試移動端網頁

標籤：web   mobile   

本文將會介紹如何在真機上調試移動端的頁面，和之前的《如何在電腦上測試手機網站》的不同之處在於真機環境。

本會介紹的方法如下：

• UC瀏覽器開發版
• Chrome 遠端偵錯
• Firefox 遠端偵錯
• Opera 遠端偵錯
• Weinre

UC瀏覽器開發版

感謝UC造出這麼好用的瀏覽器，同時注重開發人員，遠好於國內其他廠商，UC瀏覽器有一個開發版非常贊。

• UC瀏覽器開發版網址

UC開發版的網站上介紹的很清楚，也有很詳細的文檔，這裡就不再贅述，簡單記錄下WIFI的調試方法，保證pc和手機在同一個網段，在PC上開啟Chrome或Safari，在地址欄輸入：手機IP + :9998，在手機端會彈出確認按鈕，點擊確認後，就可在pc上看到效果了，如此簡單。

Chrome瀏覽器

要先使用Chrome瀏覽器的遠端偵錯功能需要先FQ才可以，還需做如下準備：

• PC Chrome最新版
• 安卓 Chrome最新版
• 資料線一根

插上資料線，開啟手機裡的瀏覽器，然後PC瀏覽器-菜單-更多工具-檢查裝置，就會看到如下介面：

點擊inspect，稍等片刻即可開啟調試介面：

功能和PC一樣，異常強大。

更多資訊請移步這裡。

Firefox瀏覽器

首先，需要如下幾個準備工作：

• PC Firefox 15+
• Android Firefox 15+
• 一根資料線
• adb驅動

上面三個就不多解釋了，adb驅動我們安裝個手機管家什麼的，都可以自動安裝上，開啟命令列中斷，輸入adb命令，如果看到長長的輸出，那麼恭喜你，你已經安裝了adb驅動了。

輸入如下命令可以查看連結的裝置。

adb devices

接下來我們需要用adb在本地開一個介面來做代理接受資料：

adb forward tcp:6000 tcp:6000

接下來就是開啟手機和電腦的遠端偵錯開慣了，預設都是關閉的。

手機端Firefox點擊功能表列的”設定”->”開發人員工具”，勾選”遠端偵錯”。

PC端Firefox開啟about:config，設定devtools.debugger.remote-enabled為True。或者開啟開發人員工具，找到設定面板，開啟裡面的遠端偵錯。

接下來找到案頭端Firefox-菜單-工具-Web開發人員-遠程連結。保證連接埠號碼和上面開啟的連接埠號碼一致就好了。

如果你沒有其他特別的遠端偵錯要求，只需要使用預設值。按“確定”。手機端會彈出一個確定按鈕，點擊確定就可以在電腦上調試手機上的網頁了。

這裡Firefox的實現有一個不好的地方，就是在調試面板裡選擇dom是，手機頁面裡不會跟著變色，這點還需改進。

更多資訊，請移步這裡。

Opera瀏覽器

請下載opera官方瀏覽器，而非中文版，中文版把這個功能閹割了（鄙視一下），在手機瀏覽器地址欄輸入如下命令，會看到所示的資訊。

opera:debug

勾上enable選項，然後在pc上命令列輸入如下命令：

adb forward tcp:9222 localabstract:opera_devtools_remote

然後用基於chrominu的瀏覽器開啟http://localhost:9222，已chrome為例，會看到如下介面：

點擊相應頁面即可進入調試介面，非常方便。

這裡需要注意，可能會出現空白，因為opera的調試頁面使用了不安全的連結被組織了，只需點一下右上方的安全提示按鈕，選擇允許即可，如所示。

其實在chrome瀏覽器的檢索裝置介面，也能看到opera的頁面，但是點擊inspect就會崩潰，無語啊。

更多資訊，請移步這裡。

Weinre

網上關於winner的介紹大多是基於java，很繁瑣，其實基於node+npm會簡單很多，感謝node，感謝npm。

• weinre在npm
• weinre官網
• weinre文檔

開啟命令列輸入如下命令安裝npm

npm -g install weinre #winsudo npm -g install weinre # linux

安裝成功了後，在命令列是輸入

weinre --httpPort 8081 --boundHost -all-

會開到如下的提示，上面的httpPort是指定介面，省略的話會預設8080，boundHost指定為all，才能在遠程裝置訪問（手機）上訪問。

在瀏覽器開啟 http://localhost:8080，會看到weinre的介紹資訊如下：

點擊中的1會進入相應的調試頁面，現在還是空的，後面會有圖，點擊2會進入weinre的文檔。

在需要調試的頁面添加如下js，這個js是開啟的weinre頁面中的js代碼，就可在在pc端調試手機端頁面。

<script src="http://localhost:8081/target/target-script-min.js#anonymous"></script>

假設電腦ip是192.168.0.100，伺服器的連接埠8080，需要將上面代碼中的localhost替換為電腦ip，然後在手機上訪問電腦的上的頁面，就可以通過weinre調試了。

總結

還有一些其他方法還沒有實驗過，只是聽說過，所以就不寫出來了，先挖個坑吧，以後慢慢填。

網上的很多資料都陳舊了，瀏覽器已經改版了，還有些人根本自己都沒有實驗過，就敢寫，上面的方法我都親自實驗過了。如果遇到什麼問題，可以給我留言討論。

如何調試移動端網頁