移動(dòng)端網(wǎng)站頁面調(diào)試的一些經(jīng)驗(yàn)分享

把靜態(tài)資源指向到本地
Mobile 越來越重要，Hybrid App 越來越流行，在手機(jī)上進(jìn)行網(wǎng)頁的調(diào)試卻并不像電腦上那么容易。大約半年前，我開始轉(zhuǎn)向 Mobile Web 的開發(fā)，在調(diào)試方面做了不少的嘗試，近期慢慢分享給大家。

開發(fā)過程離不開調(diào)試，特別是做前端開發(fā)，幾乎是一邊調(diào)試一邊開發(fā)。

做調(diào)試的第一步：讓瀏覽器/webview直接請(qǐng)求你本地的源碼

PC 端的經(jīng)驗(yàn)
如何實(shí)現(xiàn)目標(biāo)？相信大家在做 PC Web 開發(fā)時(shí)，有接觸過以下一些解決方案：

編輯本地的 hosts 文件，把靜態(tài)資源的域名指向到本地，在本地搭建靜態(tài)資源 HTTP 服務(wù)器，使瀏覽器直接載入本地的源碼。
在本地搭建一個(gè)代理服務(wù)器，設(shè)置瀏覽器的代理到這個(gè)代理服務(wù)器，在代理服務(wù)器中根據(jù)規(guī)則直接讀取本地的源碼返回給瀏覽器。例如有 nproxy 可以滿足此類需求。
使用 Fiddler 的 AutoResponder 的功能。這個(gè)方法實(shí)際上和上一個(gè)是同樣的，F(xiàn)iddler 是一個(gè)非常強(qiáng)大并且免費(fèi)的 GUI 工具，很容易上手。
使用模塊加載器提供的 debug 功能來做線上資源到本地資源的映射，例如 seajs-debug 。
這些方式要完成的任務(wù)都是：讓瀏覽器直接請(qǐng)求你本地的源碼。

只要做到了這一點(diǎn)，我們就可以在編輯器里改完代碼，刷新瀏覽器立即看到改動(dòng)后的效果，避免了部署代碼的繁瑣操作。

移動(dòng)端的方案
在移動(dòng)端，應(yīng)該怎么做呢？

無非要實(shí)現(xiàn)同樣的目標(biāo)：讓手機(jī)瀏覽器/webview 直接載入我們工作電腦上的源碼 。我們先看看 PC 上的這幾種常用方式在手機(jī)上是否還適用。

編輯 hosts 的方案

在 PC 上編輯 hosts 文件的時(shí)候，大家應(yīng)該注意過，在 WIN7/8 系統(tǒng)上，需要管理員權(quán)限，在 Mac/Linux 下，需要 root 權(quán)限。這確實(shí)是一個(gè)很安全敏感的文件。所以在手機(jī)上，要想編輯這些文件同樣需要 root 權(quán)限。這就意味著 iOS 需要越獄，Android 需要 root 。我認(rèn)為這個(gè)方案在手機(jī)上不可取，在手機(jī)上編輯 hosts 困難重重，你還不能保證你的每臺(tái)開發(fā)機(jī)都有 root 權(quán)限，調(diào)試兼容性的時(shí)候，遇到無法 root 的機(jī)器怎么辦？

使用代理的方案（包括自建 proxy server 和 使用 fiddler）

在 iOS 上配置系統(tǒng)的 HTTP 代理服務(wù)器是非常容易的，大部分 Android 機(jī)也可以配置，只是不同機(jī)型配置菜單的位置不一樣。剩下要做的，就是和在 PC 上一樣了，配置規(guī)則來把某些文件代理到本地。

使用這個(gè)方案可能會(huì)遇到的問題是：自建的 proxy server 一般對(duì) HTTPS 的兼容不夠好，對(duì)于 Hybrid App ，可能 native 部分有些請(qǐng)求是 HTTPS 的，webview 里的頁面是 HTTP 的。設(shè)置了 HTTP Proxy 后，所有的請(qǐng)求都要經(jīng)過這個(gè)代理服務(wù)器，如果對(duì) HTTPS 的支持不夠好，可能出現(xiàn)無法登錄等情況發(fā)生。這點(diǎn)要贊 Fiddler 一下，處理的非常好。

另外 Mac 用戶可能沒有太好的 Fiddler 的替代品，Charles 是收費(fèi)的，而且沒 Fiddler 好用。

使用模塊加載器提供的 debug 功能

一般需要在頁面上輸入一些東西來完成資源映射。在手機(jī)上輸入文字太麻煩了，而且屏幕太小，不太好展示這些內(nèi)容，所以這個(gè)方案也不好。

綜上所述，使用代理服務(wù)器的方案是可以從 PC 端沿用到移動(dòng)端的。

但是上面我們也講了，使用代理服務(wù)器也有一些缺點(diǎn)，那能不能在手機(jī)上無痛的實(shí)現(xiàn)綁定 hosts 的效果呢？答案是可以的。我們綁定 hosts 只是改變了域名的解析結(jié)果，正常情況下，域名是由誰來解析的呢？DNS !

自定義 DNS 的方案
我們只需要在開發(fā)電腦上運(yùn)行一個(gè)特殊的 DNS 服務(wù)器，然后把手機(jī)網(wǎng)絡(luò)配置里的 DNS 改成開發(fā)電腦的 IP 。我們?cè)?DNS 服務(wù)器里做一些手腳，把靜態(tài)資源的域名解析到開發(fā)電腦上，就可以實(shí)現(xiàn)和編輯 hosts 文件一模一樣的效果了。

而在手機(jī)上修改 DNS 服務(wù)器地址，是非常容易的，比修改代理服務(wù)器還要通用。

為了實(shí)現(xiàn)這些，我寫了一個(gè)非常方便配置的 DNS Server : xdns , 兼容 hosts 文件的語法，同時(shí)提供了比 hosts 文件更高級(jí)的語法。

比如，xdns 支持域名使用通配符的模式。支持 IP 地址用網(wǎng)卡接口名來作為占位符，運(yùn)行時(shí)可以自動(dòng)替換成該網(wǎng)卡接口上的 IPv4 地址，這樣當(dāng)你的開發(fā)電腦 IP 變了后就不需要修改配置文件。

安裝和啟動(dòng)都非常方便，使用 Node.js 開發(fā)，Node 對(duì)于前端來說應(yīng)該很熟悉。npm 安裝后，一個(gè)命令就可以啟動(dòng)。具體請(qǐng)看文檔：xdns 。

遠(yuǎn)程調(diào)試
PC 端的經(jīng)驗(yàn)
在使用桌面瀏覽器開發(fā)時(shí)，幾乎每種瀏覽器都有自己的開發(fā)者工具，比如大家常用的 firebug , chrome develper tools , safari developer tools . 哪怕是 IE 甚至 IE6，也有自己的開發(fā)者工具。我們利用這些工具來檢查調(diào)試樣式、javascript，查看修改 cookie , 查看網(wǎng)絡(luò)請(qǐng)求 等等。這些大家都非常熟悉了。

移動(dòng)端的方案
手機(jī)端的瀏覽器或者 webview 不可能在手機(jī)上集成一個(gè) developer tools ，因?yàn)槠聊惶?。好在各大廠商還是很關(guān)注開發(fā)者的便利性的，現(xiàn)在有多種遠(yuǎn)程調(diào)試的方案。也就是在手機(jī)上加載頁面，在電腦上來展示調(diào)試工具。下面我們看看目前主流的一些工具。

iOS 平臺(tái)

1.Safari Mobile

safari 支持遠(yuǎn)程調(diào)試，需要做如下的幾步：

在手機(jī)里找到 設(shè)置 -> safari -> 高級(jí) -> Web 檢查器 ，打開此功能。
用數(shù)據(jù)線連接到你的 Mac（沒有 Mac ? 找老板要去?。?。
打開 Mac 下的 safari , 到偏好設(shè)置里，高級(jí)一欄最下部，勾選在菜單欄中顯示“開發(fā)”菜單
用手機(jī) safari 訪問一個(gè)網(wǎng)頁，在Mac上的 safari 開發(fā)菜單里找到你的手機(jī)，二級(jí)菜單里找到這個(gè)網(wǎng)頁
做完這些，我們就進(jìn)入了熟悉的 safari developer tools ，調(diào)試 css , js 網(wǎng)絡(luò)請(qǐng)求等。

2.iOS webview

iOS APP 里的 webview 同樣支持遠(yuǎn)程調(diào)試，不過限制更多一點(diǎn)。這個(gè) APP 必須是自己編譯安裝進(jìn)手機(jī)的，也就是你必須要有 iOS 開發(fā)者賬號(hào)。對(duì)于做 Hybrid APP 開發(fā)的來說，這不是什么難事，團(tuán)隊(duì)肯定有開發(fā)者賬號(hào)。你需要做的是了解一點(diǎn) iOS 開發(fā)基礎(chǔ)，起碼能自助把代碼編譯安裝到你的手機(jī)。

對(duì)于自己編譯進(jìn)去的 APP ，只需要在 APP 里載入你要調(diào)試的頁面，其他步驟和 safari 的遠(yuǎn)程調(diào)試一樣。

Android 平臺(tái)

1.Chrome Mobile

Chrome for android 32 以及之后的版本具有遠(yuǎn)程調(diào)試的功能，你需要做的是：

開啟 Android 的 USB 調(diào)試功能。
用 USB 先連接到你的電腦（windows 用戶需要安裝 Android 驅(qū)動(dòng)）。
在 Chrome for android 上打開你要調(diào)試的網(wǎng)頁。
在電腦上打開 chrome （同樣最低需要 32 版本），進(jìn)入 菜單 -> 工具 -> 檢查設(shè)備 頁面，確保 Discover USB devices 被勾選
如果設(shè)置正確的話，現(xiàn)在就可以看到你手機(jī)上打開的頁面了，點(diǎn)擊 inspect 進(jìn)入我們熟悉的 Chrome develper tools 。

由于 Android 手機(jī)各種各樣，如果遇到麻煩，請(qǐng)仔細(xì)閱讀 官方文檔

2.Android Webview

Android 4.4 開始，默認(rèn)的瀏覽器已經(jīng)是 chrome 了，所以 webview 也是 chrome 了，這就給了 webview 遠(yuǎn)程調(diào)試的能力。我們需要在 Android 里針對(duì) Webview 做以下設(shè)置：

然后在你的 App 里打開要調(diào)試的頁面，其余步驟和使用 Chrome for Android 一樣，進(jìn)行遠(yuǎn)程調(diào)試。

3.使用 Android 模擬器

鑒于目前 Android 4.4 的手機(jī)還比較少，你可以選擇使用模擬器來進(jìn)行調(diào)試。官方的模擬器太慢，推薦大家使用 genymotion , X86 架構(gòu)的模擬器，速度和真機(jī)沒什么兩樣了。對(duì)于只做 webview 調(diào)試的前端來說，只需要使用個(gè)人免費(fèi)版就可以了。

4.其他方式

如果你的調(diào)試條件不能滿足上面講的任何一種，還可以使用 weinre 。只需要在頁面里插入一段腳本，就可以進(jìn)行遠(yuǎn)程調(diào)試，基本沒其他限制。但是使用這個(gè)也是有明顯的缺點(diǎn)的：

不能給 javascript 打斷點(diǎn)，基本只能用 console 來調(diào)試
不支持查看元素的樣式是寫在 css 第幾行，也不支持顯示在哪個(gè)文件
由于是通過網(wǎng)絡(luò)來連接的，所以在調(diào)試移動(dòng)網(wǎng)絡(luò)的情況時(shí)，不好操作（需要服務(wù)端運(yùn)行在一個(gè)移動(dòng)網(wǎng)絡(luò)可以訪問到的機(jī)器上）
總之，weinre 僅僅適用于你沒辦法使用 Safari 或者 Chrome 進(jìn)行遠(yuǎn)程調(diào)試的情況下，聊勝于無，調(diào)試 Android hybrid APP 時(shí)，經(jīng)常會(huì)遇到這個(gè)情況。

總結(jié)

綜上所述，可以根據(jù)下圖來選擇最優(yōu)的調(diào)試方案：

由于我目前只接觸了 iOS 和 Android 平臺(tái)的開發(fā)調(diào)試，其他的移動(dòng)平臺(tái)不了解，所以本文沒涉及到 windows phone 等平臺(tái)。歡迎大家留言或者 email 交流各種遠(yuǎn)程調(diào)試方案。