本文將會介紹如何在真機上調試移動端的頁面，和之前的《如何在電腦上測試手機網站》的不同之處在於真機環境。
本會介紹的方法如下：
- UC瀏覽器開發版
- Chrome 遠程調試
- Firefox 遠程調試
- Opera 遠程調試
- Weinre
UC瀏覽器開發版
感謝UC造出這么好用的瀏覽器，同時注重開發者，遠好於國內其他廠商，UC瀏覽器有一個開發版非常贊。
UC開發版的網站上介紹的很清楚，也有很詳細的文檔，這里就不再贅述，簡單記錄下WIFI的調試方法，保證pc和手機在同一個網段，在PC上打開Chrome或Safari，在地址欄輸入：手機IP + :9998，在手機端會彈出確認按鈕，點擊確認后，就可在pc上看到效果了，如此簡單。
Chrome瀏覽器
要先使用Chrome瀏覽器的遠程調試功能需要先翻牆才可以，還需做如下准備：
- 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開發者-遠程鏈接。保證端口號和上面開啟的端口號一致就好了。
如果你沒有其他特別的遠程調試要求，只需要使用默認值。按“確定”。手機端會彈出一個確定按鈕，點擊確定就可以在電腦上調試手機上的網頁了。
這里火狐的實現有一個不好的地方，就是在調試面板里選擇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。
打開命令行輸入如下命令安裝npm
npm -g install weinre #win
sudo 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調試了。
總結
還有一些其他方法還沒有實驗過，只是聽說過，所以就不寫出來了，先挖個坑吧，以后慢慢填。
網上的很多資料都陳舊了，瀏覽器已經改版了，還有些人根本自己都沒有實驗過，就敢寫，上面的方法我都親自實驗過了。如果遇到什么問題，可以給我留言討論。
原文鏈接
http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile/