移動端前端開發調試

時間 2019-11-13

標籤移動前端開發調試欄目無線简体版

原文原文鏈接

使用 Chrome 遠程調試 Android 設備

手機上瀏覽你的 Web 網頁的感受跟你在桌面版的體驗可能徹底不一樣。Chrome DevTools 的遠程調試功能可讓你用電腦鏈接你的安卓設備進行實時調試。html

安卓遠程調試支持：linux

調試在瀏覽器標籤裏面網站。
在原生安卓應用裏面調試WebView。
能夠實時截取安卓設備屏幕顯示在你電腦上。
能夠經過端口鏈接和虛擬 host 映射來鏈接你的電腦和安卓設備。

必要條件

想要開始遠程調試，你須要：android

Chrome 32 或者更新版。
一根 USB 線，用來鏈接你的安卓設備。
測試瀏覽器時： 安卓 4.0+ 和 Chrome 安卓版。
測試 APP 時：安卓 4.0+ 和通過配置啓用調試的 WebView。

注意：遠程調試要求你桌面版的 Chrome 版本比你安卓設備上的 Chrome 更新。因此最好的選擇是使用 Chrome Canary （Mac/Windows）或者 Chrome Dev channel 發行版（linux）。git

若是你在使用遠程調試的時候遇到問題，能夠參考疑問答疑部分。github

設置你的安卓設備

想要使用遠程調試，先按照下面說明來設置你的安卓設備。web

1，啓用 USB 調試面試

在你的安卓設備上，打開 設置 > 開發者選項。chrome

注意： 在 Android 4.2 及更新版，開發者選項默認隱藏。你須要敲擊 設置 > 關於手機 裏面的 Build number 七次，才能夠啓用開發者選項。瀏覽器

在開發者選項裏面，勾選 USB 調試複選框。bash

會出現一個彈窗詢問你是否容許 USB 調試，選擇 OK。

2，鏈接你的設備

使用 USB 鏈接線把你的安卓設備鏈接到你的電腦上。

注意：若是你在 Windows 系統下開發，須要安裝對應你設備的 USB 驅動程序。詳情請看 Android Developer 網站的 OEM USB Drivers。

在 Chrome 裏面尋找你的設備

在安卓設備上設置好啓用遠程調試以後，在你的 Chrome 裏面尋找設備。

打開你的桌面版 Chrome，在網址欄輸入 chrome://inspect。確認 Discover USB devices 已經被選中：

提示：你也能夠經過 Chrome 菜單 > 更多工具 > 查看設備 來打開 chrome://inspect。

在你的設備上會彈出一個對話框詢問是否容許 USB 調試，點擊 OK。

提示：勾選對此電腦老是容許下次就不會提示了。

這時候在你設備的消息欄就會出現 USB 調試已經鏈接信息。

注意：在遠程調試期間，Chrome 會阻止你設備進入睡眠。這個功能對於調試很是有幫助，可是也會有隱私泄露風險。因此確保你一直盯着你的設備！

在你電腦上，chrome://inspect 會顯示每個鏈接上的設備，以及它們打開了的瀏覽器標籤和啓用調試的 WebViews。

若是你 chrome://inspect 頁面尋找你設備的時候遇到了問題，能夠參考疑問答疑部分。

調試遠程瀏覽器標籤下的內容

在 chrome://inspect 中，你能夠啓用 DevTools 來調試你遠程瀏覽器標籤下的內容。

點擊你想調試標籤下面的 inspect 按鈕來開始調試。

你電腦上會彈出一個新的 Chrome DevTools 窗口。在這個窗口，你能夠實時的調試你設備上的頁面。

舉個例子，使用 DevTools 能夠在你設備上實現以下功能：

在 Elements 面板上把鼠標移動到一個對象上時，DevTools 會在你設備上高亮這個對象。
你也能夠點擊 DevTools 上 Inspect Element 圖標，而後敲擊你設備上屏幕上的某一個地方。DevTools 會在 Elements 面板上高亮你敲擊的對象。

注意：遠程調試的時候使用的 DevTools 版本取決於你設備上的 Chrome 版本。因此，遠程調試的 DevTools 可能看起來跟你平時使用的版本不一樣。

調試技巧

下面試一下調試過程當中的小技巧：

在 DevTools 窗口中使用 F5 （在 Mac 上是 Cmd+r）來刷新遠程頁面。
讓設備在蜂窩網絡上，使用 Network 面板來查看在實際移動網絡的網絡狀況。
使用 Timeline 面板來查看頁面渲染和 CPU 使用狀況。因爲硬件差別，移動端設備一般你比電腦運行慢不少。
若是你運行了一個本地的 web 服務器，使用端口轉接或者虛擬 host 映射讓你的設備能夠訪問本地網站。

調試 WebViews

在 Android 4.4（KitKat）或者更新版，你可使用 DevTools 來調試原生安卓應用中的 WebVies 內容。

配置 WebViews 來啓用調試

必需要在你應用中設置才能夠啓用 WebView 的調試。你能夠調用一個 WebView 類的靜態方法 setWebContentsDebuggingEnabled。

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

這樣就在應用裏面全部的 WebViews 中啓用調試。

提示：WebView 調試並不會被應用 manifest 中 debuggable 標誌符狀態的影響。若是你想僅僅在 debuggable 爲 true 時啓用 WebView 調試，須要判斷一下。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { if (0 != (getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE)) { WebView.setWebContentsDebuggingEnabled(true); } }

在 DevTools 打開一個 WebView

chrome://inspect 頁面中會顯示你設備中啓用調試的 WebViews。

點擊下面的 inspect 來啓用調試。就能夠像調試遠程瀏覽器標籤下內容同樣調試了。

上圖中 WebView 旁邊的灰色圖表示相對於它相對於設備屏幕的尺寸和位置。若是你的 WebView 設置了 title，title 的內容也會列出來。

實時截屏

總是在兩個屏幕中來回看並非很方便。這個功能截取你設備的屏幕顯示在電腦上 DevTools 的左邊。你也能夠操做這個截屏來與你的設備進行交互。

從 KitKat 4.4.3 開始，截屏功能在瀏覽器標籤和安卓 WebViews 下均可以使用。

打開截屏功能

在遠程調試 DevTools 窗口的右上角，點擊 Screencast 圖標便可開啓截屏功能。

截屏面板就會在左邊打開而且返回設備屏幕的實時狀態。

截屏僅僅顯示主體內容。工具欄、鍵盤或者其餘設備上的界面會變成透明狀。

注意：由於截屏會持續的截取屏幕幀，會帶來一些性能方面的影響。若是你的測試對幀速率比較敏感，請禁用截屏功能。

使用截屏功能與你的設備交互

當你操做截屏視圖的時候，單擊會被改變成敲擊，在設備上觸發對應的 touch 時間。敲擊鍵盤也會反映到你的設備上，這樣你就能夠在電腦上往手機上輸入了內容了。

其餘 DevTools 功能也能夠在截屏視圖上有所反應。例如，單擊 Inspect Element 圖標，而後在截屏視圖上也能夠選擇一個元素。

提示：能夠經過按住 Shift 同時拖動來模擬一個捏的操做。使用你的觸摸板或者鼠標滾珠能夠實現滾動。

端口轉移

你的手機不必定每次均可以訪問你的開發環境服務器。它可能在不一樣網絡下使用。更多的，你還有可能在一個公共的公司網絡開發。

Chrome 的端口轉移功能能夠很是簡單的讓你手機測試你開發的網站。工做原理就是在你移動端設備上建立一個監聽的 TCP 端口而後映射到你開發機器上的某個 TCP 端口。兩個端口的數據鏈接經過 USB 鏈接線，因此不會被你的網絡狀況影響。

按照以下操做啓用端口轉接：

在你開發機器上打開 chrome://inspect。
點擊 Port Forwarding。會出現配置菜單
在 Device port 表單，輸入你想要你安卓設備監聽的端口號。（默認端口 8080）
在 Host 表單，填寫你 Web 應用的 IP 地址（或者主機名）和端口號。這個地址能夠是任何你開發機器可訪問的本地地址。固然，端口號必須在 1024 - 65535 之間。
點擊 Enable port forwarding。
點擊 Done。

當端口轉移正常工做的時候，chrome://inspect 頁面中端口狀態顯示器會顯示成綠色。

如今你能夠打開一個新的標籤，而後在你的設備上查看你本地服務器上的內容。

虛擬 host 映射

當你在 localhost 本地開發的時候，端口轉接正常工做。可是當你使用自定義本地域名的時候，可能就會遇到一些問題。

舉個例子，你須要的第三方 JavaScript SDK 只能工做在某個白名單域名列表裏面，這樣你須要添加綁定一條相似 127.0.0.1 production.com 這樣的域名到你的 hosts 文件裏面。或者是你在你的 Web 服務器（MAMP）使用虛擬 hosts 功能設置了一個自定義域名。

若是你須要讓你的手機能訪問自定義域名的內容，你可使用域名轉接和代理服務器實現。這個代理服務器將你設備的請求映射到你正確的 Host 主機上面。

設置端口轉接到一個代理服務

虛擬 host 映射須要你在 host 機器上運行一個代理服務器。全部你安卓設備的請求都會被轉移到這個代理上。

按照以下步驟來設置端口轉移到一個代理服務器上：

在 host 機器上，安裝代理軟件，例如 Charles 或者 Squid。
啓用代理服務器而且注意啓用的端口是否被佔用。 注意：這個代理服務器和你本地開發服務器必須運行在不一樣的端口上。
打開 chrome://inspect 頁面。
點擊 Port forwarding。配置端口轉移設置。
在 Device port 表單，輸入你想要你安卓設備監聽的端口號。要使用一個安卓容許的端口，好比 9000。
在 Host 表單，輸入 localhost:xxxx，xxxx 就是你代理服務器運行的端口號。
勾選 Enable port forwarding。
點擊 Done。

Host 機器上的代理服務器會代替你的安卓設備發起請求。

在你設備上配置代理選項

你的安卓設備須要鏈接你 host 機器上的代理服務器。

按照以下步驟在你設備上設置代理：

找到 設置 > Wi-Fi。
長按你如今鏈接的網絡。注意：代理設置會對每一個網絡都啓用。
敲擊 Modify network。
勾選 Advanced options。打開代理設置選項。
敲擊 Proxy 選項而後選擇 Manual。
在 Proxy hostname 表單，輸入 localhost。
在 Porxy port 表單，輸入 9000.
敲擊 Save。

設置完以後，你的設全部的請求都會被轉移到 host 機器的代理服務器上。這個代理服務器表明了你的設備，因此對你自定義域名的請求就被正確的返回了。

如今你就能夠像在本地打開同樣，在安卓的 chrome 上面打開一個本地的域名。

提示：想要恢復設備正常的瀏覽，記住在與 host 斷開鏈接後在你設備上恢復代理設置。

疑問解答

在 chrome://inspect 頁面沒法看到個人設備。

若是你基於 Windows 開發，檢查你是否安裝了你設備對應的 USB 驅動。詳情見 Android Developers 網站上的 OEM USB Drivers。
檢查設備是否直接鏈接到你的電腦，避免經過集線器鏈接。
檢查 USB debugging 是否在你的設備上啓用了。別忘了在你設備上彈出的是否容許 USB 調試對話框上點擊確認。
在你桌面版瀏覽器上打開 chrome://inspect 頁面並檢查是否勾選 Discover USB devices。
遠程調試須要你桌面版的 Chrome 版本要比你安卓設備上的 Chrome 更新。試試 Chrome Canary（Mac/Windows）或者 Chrome Dev channel 桌面發行版（Linux）。