Mobile Web 除錯指南（2）：遠端除錯

第一篇中講解了如何讓手機來請求我們開發電腦上的原始碼，做到了這步後，我們可以改完程式碼立即看到效果，但是對於除錯還是遠遠不夠的。這篇文章我們繼續講目前常用的幾種 Developer tools。

PC 端的經驗

在使用桌面瀏覽器開發時，幾乎每種瀏覽器都有自己的開發者工具，比如大家常用的 firebug , chrome develper tools , safari developer tools . 哪怕是 IE 甚至 IE6，也有自己的開發者工具。我們利用這些工具來檢查除錯樣式、javascript，檢視修改 cookie , 檢視網路請求 等等。這些大家都非常熟悉了。

移動端的方案

手機端的瀏覽器或者 webview 不可能在手機上整合一個 developer tools ，因為螢幕太小。好在各大廠商還是很關注開發者的便利性的，現在有多種遠端除錯的方案。也就是在手機上載入頁面，在電腦上來展示除錯工具。下面我們看看目前主流的一些工具。

iOS 平臺

Safari Mobile

safari 支援遠端除錯，需要做如下的幾步：

• 在手機裡找到 設定 -> safari -> 高階 -> Web 檢查器 ，開啟此功能。
• 用資料線連線到你的 Mac（沒有 Mac ? 找老闆要去！）。
• 開啟 Mac 下的 safari , 到偏好設定裡，高階一欄最下部，勾選在選單欄中顯示“開發”選單
• 用手機 safari 訪問一個網頁，在Mac上的 safari 開發選單裡找到你的手機，二級選單裡找到這個網頁

做完這些，我們就進入了熟悉的 safari developer tools ，除錯 css , js 網路請求等。

iOS webview

iOS APP 裡的 webview 同樣支援遠端除錯，不過限制更多一點。這個 APP 必須是自己編譯安裝進手機的，也就是你必須要有 iOS 開發者賬號。對於做 Hybrid APP 開發的來說，這不是什麼難事，團隊肯定有開發者賬號。你需要做的是瞭解一點 iOS 開發基礎，起碼能自助把程式碼編譯安裝到你的手機。

對於自己編譯進去的 APP ，只需要在 APP 裡載入你要除錯的頁面，其他步驟和 safari 的遠端除錯一樣。

Android 平臺

Chrome Mobile

Chrome for android 32 以及之後的版本具有遠端除錯的功能，你需要做的是：

• 開啟 Android 的 USB 除錯功能。
• 用 USB 先連線到你的電腦（windows 使用者需要安裝 Android 驅動）。
• 在 Chrome for android 上開啟你要除錯的網頁。
• 在電腦上開啟 chrome （同樣最低需要 32 版本），進入 選單 -> 工具 -> 檢查裝置 頁面，確保 Discover USB devices 被勾選

如果設定正確的話，現在就可以看到你手機上開啟的頁面了，點選 inspect 進入我們熟悉的 Chrome develper tools 。

由於 Android 手機各種各樣，如果遇到麻煩，請仔細閱讀 官方文件

Android Webview

Android 4.4 開始，預設的瀏覽器已經是 chrome 了，所以 webview 也是 chrome 了，這就給了 webview 遠端除錯的能力。我們需要在 Android 裡針對 Webview 做以下設定：

然後在你的 App 裡開啟要除錯的頁面，其餘步驟和使用 Chrome for Android 一樣，進行遠端除錯。

使用 Android 模擬器

鑑於目前 Android 4.4 的手機還比較少，你可以選擇使用模擬器來進行除錯。官方的模擬器太慢，推薦大家使用 genymotion , X86 架構的模擬器，速度和真機沒什麼兩樣了。對於只做 webview 除錯的前端來說，只需要使用個人免費版就可以了。

其他方式

如果你的除錯條件不能滿足上面講的任何一種，還可以使用 weinre 。只需要在頁面裡插入一段指令碼，就可以進行遠端除錯，基本沒其他限制。但是使用這個也是有明顯的缺點的：

• 不能給 javascript 打斷點，基本只能用 console 來除錯
• 不支援檢視元素的樣式是寫在 css 第幾行，也不支援顯示在哪個檔案
• 由於是通過網路來連線的，所以在除錯行動網路的情況時，不好操作（需要服務端執行在一個行動網路可以訪問到的機器上）

總之，weinre 僅僅適用於你沒辦法使用 Safari 或者 Chrome 進行遠端除錯的情況下，聊勝於無，除錯 Android hybrid APP 時，經常會遇到這個情況。

總結

綜上所述，可以根據下圖來選擇最優的除錯方案：

由於我目前只接觸了 iOS 和 Android 平臺的開發除錯，其他的移動平臺不瞭解，所以本文沒涉及到 windows phone 等平臺。歡迎大家留言或者 email 交流各種遠端除錯方案。