整理：手機端網頁調試方案

最近更新時間：2015年3月13日
又及，這裏有一個提要ppt

（本文前身是技術分享的ppt，所以有些圖直接是ppt導出的。畫的圖全是原創，轉載請註明，謝謝。）

在手機端網頁開發的特定階段，須要查看手機端的界面、交互與體驗。2011年時，開發時有很大麻煩：

• 相應的靜態文件在測試服務器上，沒有上線，須要綁定hosts
  而手機端直接綁定hosts是須要越獄/root的
• 有的手機瀏覽器根本不認hosts文件，如uc
• 手機端的調試工具匱乏
  斷點調試、查看變量、查看樣式等都很困難
• 在電腦端改變UA和屏幕大小，並不能簡單的模擬手機端的情形。好比觸摸的事件處理

在2012年後，一些成型的方案已經出現，本文將他們整理出來，並畫出了相關架構。涉及：

• 綁定hosts
• 使用chrome、safari、firefox、UC瀏覽器的遠程調試
• 使用weinre構建調試服務器

hosts綁定

hosts綁定有兩種方案：

• root手機，修改手機端hosts文件，鏈接網頁服務器。
• 使用代理，鏈接代理服務器，修改代理服務器的hosts文件以鏈接網頁服務器。

方案1以下圖：

方案2以下圖：

顯然代理方案更優，不須要root手機或者給手機越獄，也規避了某些瀏覽器根本不讀hosts文件的問題。

代理方案要點以下：

端口和ip對應起來便可。

部分瀏覽器遠程調試

各個瀏覽器遠程調試及其所用工具以下表所示：

平臺	瀏覽器	連接方式	使用ADB	調試工具
iOS	Safari (Mac)	數據線	不	Inspector
Android	Android Chrome	數據線	內置	Inspector
	Firefox For Mobile	數據線	是	Firefox原生調試工具
	UC 開發者工具	數據線	是	Inspector

Safari遠程調試

具體步驟：

1. 設備開啓調試，綁定Mac機器，USB鏈接Mac
2. 打開safari，Ctrl + ， > 「高級」> 勾選「在菜單中顯示開發」
3. 菜單 > 開發
4. 找到你的設備，打開inspector

能夠看David的《如何在移動設備上調試網頁》的safari章節以瞭解詳細步驟。

Chrome

具體步驟，見Google Developers：Remote Debugging Chrome on Android

新版自動化了曾經須要的ADB port的步驟，還能夠測試WebView。這裏還容許在調試時自動作port-forwarding，能夠不用刷機，不用改hosts。

若是遇到頁面白板問題，嘗試着將手機和桌面的Chrome都更到最新吧，並嘗試着使用桌面端的chrome://inspect/#devices打開並刷新頁面，而後打開Inspector。

能夠看David的《如何在移動設備上調試網頁》的chrome章節以瞭解詳細步驟。

Firefox

國內有翻譯關於firefox遠程調試的一篇文章，可是這篇文章僅僅介紹了比較早版本的firefox遠程調試，2012年十月份firefox的遠程調試有了些許的升級，比初版的半殘的斷點調試稍微好了一些，可使用console了。

具體步驟，見MDN相關頁面。

Opera

Opera的調試曾經是最便利的，只須要鏈接到同一個無線熱點便可調試。。更新到webkit內核以後，就只能走Webkit的傳統調試方式了。

UC瀏覽器

UC瀏覽器的開發者版本，參考視頻便可調試。

ADB

在使用firefox和UC瀏覽器調試時，須要用USB鏈接設備，並使用adb方式鏈接。
ADB = Android Debug Bridge，即安卓機器的調試橋接工具，我在百度網盤上放了一個副本。

把 adb.exe 及其dll 放入系統路徑中，便可以在CMD/terminal中使用adb命令了。

adb forward = 端口映射，提供透明socket通訊。

ADB的使用中，端口有可能有衝突，windows端的命令以下：

1. 查看使用了5037端口的進程pid：netstat –ano | findstr "5037"
2. 根據pid查看進程：tasklist /fi "pid eq 進程的pid"
3. 強制關閉進程：taskkill /f /pid 進程的pid

騰訊手機助手、360手機助手、豌豆莢等手機管理軟件都會使用adb來進行手機的管理，所以調試前應先關閉這些軟件，節約時間。

ADB的架構以下圖：

構建Weinre調試服務器

在使用webkit內核的移動端瀏覽器（好比海豚瀏覽器等），還可使用Weinre來進行遠程調試，調試方法是構建一個調試服務器並在頁面中嵌入相應代碼。

安裝 Weinre的方法：

npm -g install weinre

Weinre的架構以下圖所示：

Weinre的配置要點以下圖所示：

具體步驟：

http://blog.csdn.net/dojotoolkit/article/details/6280924

另外，Adobe 公司出品的 Adobe Edge 也是掛在 weinre 上的。不過看到其高昂的雲服務費用，就望而卻步了。

模擬器

模擬器我的並不喜歡用，有些體驗沒有辦法模擬，這裏記錄了一下網上提到的模擬器。

• android SDK + Eclipse + ADT Plugin + AVD 模擬器
• iOS模擬器
• Phonegap手機模擬器*
• Opera mobile emulator
  

---

文中沒有列出的參考文章：

• kejun：一次響應性開發實踐
• 「adb forward」端口映射
• 騰訊ISUX：移動終端開發必備知識