Mobile 越來越重要，Hybrid App 越來越流行，在手機上進行網頁的除錯卻並不像電腦上那麼容易。大約半年前，我開始轉向 Mobile Web 的開發，在除錯方面做了不少的嘗試，近期慢慢分享給大家。
開發過程離不開除錯，特別是做前端開發，幾乎是一邊除錯一邊開發。
做除錯的第一步：讓瀏覽器/webview直接請求你本地的原始碼
PC 端的經驗
如何實現目標？相信大家在做 PC Web 開發時，有接觸過以下一些解決方案：
- 編輯本地的 hosts 檔案，把靜態資源的域名指向到本地，在本地搭建靜態資源 HTTP 伺服器，使瀏覽器直接載入本地的原始碼。
- 在本地搭建一個代理伺服器，設定瀏覽器的代理到這個代理伺服器，在代理伺服器中根據規則直接讀取本地的原始碼返回給瀏覽器。例如有 nproxy 可以滿足此類需求。
- 使用 Fiddler 的 AutoResponder 的功能。這個方法實際上和上一個是同樣的，Fiddler 是一個非常強大並且免費的 GUI 工具，很容易上手。
- 使用模組載入器提供的 debug 功能來做線上資源到本地資源的對映，例如seajs-debug 。
這些方式要完成的任務都是：讓瀏覽器直接請求你本地的原始碼。
只要做到了這一點，我們就可以在編輯器裡改完程式碼，重新整理瀏覽器立即看到改動後的效果，避免了部署程式碼的繁瑣操作。
移動端的方案
在移動端，應該怎麼做呢？
無非要實現同樣的目標：讓手機瀏覽器/webview 直接載入我們工作電腦上的原始碼 。我們先看看 PC 上的這幾種常用方式在手機上是否還適用。
編輯 hosts 的方案
在 PC 上編輯 hosts 檔案的時候，大家應該注意過，在 WIN7/8 系統上，需要管理員許可權，在 Mac/Linux 下，需要 root 許可權。這確實是一個很安全敏感的檔案。所以在手機上，要想編輯這些檔案同樣需要 root 許可權。這就意味著 iOS 需要越獄，Android 需要 root 。我認為這個方案在手機上不可取，在手機上編輯 hosts 困難重重，你還不能保證你的每臺開發機都有 root 許可權，除錯相容性的時候，遇到無法 root 的機器怎麼辦？
使用代理的方案（包括自建 proxy server 和 使用 fiddler）
在 iOS 上配置系統的 HTTP 代理伺服器是非常容易的，大部分 Android 機也可以配置，只是不同機型配置選單的位置不一樣。剩下要做的，就是和在 PC 上一樣了，配置規則來把某些檔案代理到本地。
使用這個方案可能會遇到的問題是：自建的 proxy server 一般對 HTTPS 的相容不夠好，對於 Hybrid App ，可能 native 部分有些請求是 HTTPS 的，webview 裡的頁面是 HTTP 的。設定了 HTTP Proxy 後，所有的請求都要經過這個代理伺服器，如果對 HTTPS 的支援不夠好，可能出現無法登入等情況發生。這點要贊 Fiddler 一下，處理的非常好。
另外 Mac 使用者可能沒有太好的 Fiddler 的替代品，Charles 是收費的，而且沒 Fiddler 好用。
使用模組載入器提供的 debug 功能
一般需要在頁面上輸入一些東西來完成資源對映。在手機上輸入文字太麻煩了，而且螢幕太小，不太好展示這些內容，所以這個方案也不好。
綜上所述，使用代理伺服器的方案是可以從 PC 端沿用到移動端的。
但是上面我們也講了，使用代理伺服器也有一些缺點，那能不能在手機上無痛的實現繫結 hosts 的效果呢？答案是可以的。我們繫結 hosts 只是改變了域名的解析結果，正常情況下，域名是由誰來解析的呢？DNS !
自定義 DNS 的方案
我們只需要在開發電腦上執行一個特殊的 DNS 伺服器，然後把手機網路配置裡的 DNS 改成開發電腦的 IP 。我們在 DNS 伺服器裡做一些手腳，把靜態資源的域名解析到開發電腦上，就可以實現和編輯 hosts 檔案一模一樣的效果了。
而在手機上修改 DNS 伺服器地址，是非常容易的，比修改代理伺服器還要通用。
為了實現這些，我寫了一個非常方便配置的 DNS Server : xdns , 相容 hosts 檔案的語法，同時提供了比 hosts 檔案更高階的語法。
比如，xdns 支援域名使用萬用字元的模式。支援 IP 地址用網路卡介面名來作為佔位符，執行時可以自動替換成該網路卡介面上的 IPv4 地址，這樣當你的開發電腦 IP 變了後就不需要修改配置檔案。
安裝和啟動都非常方便，使用 Node.js 開發，Node 對於前端來說應該很熟悉。npm 安裝後，一個命令就可以啟動。具體請看文件：xdns 。
第一篇就到這裡，如果你有其他方案能方便實現讓瀏覽器/webview直接請求你本地的原始碼檔案，歡迎留言探討。