移動端調試解決方案-轉載

移動端的方案

手機端的瀏覽器或者 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 作如下設置：

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); }

而後在你的 App 裏打開要調試的頁面，其他步驟和使用 Chrome for Android 同樣，進行遠程調試。

使用 Android 模擬器

鑑於目前 Android 4.4 的手機還比較少，你能夠選擇使用模擬器來進行調試。官方的模擬器太慢，推薦你們使用 genymotion , X86 架構的模擬器，速度和真機沒什麼兩樣了。對於只作 webview 調試的前端來講，只須要使用我的免費版就能夠了。

其餘方式

若是你的調試條件不能知足上面講的任何一種，還可使用 weinre 。只須要在頁面裏插入一段腳本，就能夠進行遠程調試，基本沒其餘限制。可是使用這個也是有明顯的缺點的：

• 不能給 javascript 打斷點，基本只能用 console 來調試
• 不支持查看元素的樣式是寫在 css 第幾行，也不支持顯示在哪一個文件
• 因爲是經過網絡來鏈接的，因此在調試移動網絡的狀況時，很差操做（須要服務端運行在一個移動網絡能夠訪問到的機器上）

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

總結

綜上所述，能夠根據下圖來選擇最優的調試方案：