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

（本文前身是技術分享的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：移動終端開發必備知識