你的網頁內容在移動設備上的體驗可能和電腦上完全不同。Chrome DevTools 提供了遠程調試功能，這讓你可以在安卓設備上實時調試開發的內容。

安卓遠程調試支持：

在瀏覽器選項卡中調試網站。
在原生安卓應用中調試網頁內容。
將屏幕從你的安卓設備上投影到你的開發機器上。
使用端口轉發和虛擬主機映射來讓安卓設備訪問開發使用的服務器。

需求

要開始遠程調試，你需要：

安裝 Chrome 32 或者之后的版本。
連接安卓設備用的 USB 線纜。
對于通過瀏覽器調試：安卓 4.0 以上并且安裝了Chrome for Android。
對于通過應用調試：安卓 4.4 以上并且應用包括可用于調試的WenView 組件。

提示：遠程調試需要你電腦端的 Chrome 版本要高于安卓端的版本。想更好地使用此功能，請使用電腦端的Chrome Canary（Mac/Windows） 或者Dev channel發行版（Linux）。

如果使用遠程調試的時候出現了問題，請參考Troubleshootling。

設置安卓設備

請按照以下說明來設置安卓設備：

1. 打開 USB 調試選項

在安卓設備上，進入設置>開發者選項。

設置頁面的開發者選項

注意：在安卓 4.2 及以后的版本中，默認情況下開發者選項是隱藏的。要啟用開發者選項，選擇設置>關于手機然后點擊版本號7次。

在開發者選項中，選中USB 調試復選框。

在安卓上啟用 USB 調試

之后會有一個警告，提示你是否要開啟 USB 調試模式。選擇OK。

2. 連接你的設備

將你的安卓設備和電腦用 USB 線連接起來。

注意：如果你在 Windows 下進行開發，那么你需要為你的安卓設備安裝驅動。具體可以參考安卓開發者網站上的OEM USB Drivers

在 Chrome 中找到設備

在安卓設備上設置好遠程調試后，在 Chrome 中找到你的設備。

在電腦端的 Chrome 里，在地址欄輸入chrome://inspect。進入后確認Discover USB devices已經勾選了：

**提示**：你也可以從 Chrome menu > More tools > Inspect Devices 來進入 chrome://inspect

在你的設備上，會跳出一個警告，告訴你是否要允許在電腦端進行 USB 調試。選擇OK。

提示：如果希望以后不再彈出系那個管提示，勾選Always allow from this computer

注意：在遠程調試時， Chrome 會阻止你的設備進入休眠狀態。該特性對于調試相當有用，但在安全性上有所欠缺。所以在調試的時候要注意看好你的手機！

在電腦端，打開選項卡并啟用 WebViews 調試后，chrome://inspect頁面會顯示全部已連接的設備。

從 chrome://inspect 也賣弄查看已連接的設備

如果從 chrome://inspect 頁面查找設備時遇到了問題，請參考Troubleshooting章節。

調試遠程瀏覽器

在頁面chrome://inspect上，你可以加載 DevTools 并且調試你的遠程瀏覽器。

要開始調試，請點擊你希望調試的瀏覽器選項卡下面的inspect。

接著你的電腦會加載新的 DevTools。在新的 DevTools 上，你可以在你的安卓設備上和選中的瀏覽器實時交互。

通過電腦上的 DevTools 來調試安卓手機上的網頁

比如，你可以在你的設備上使用 DevTools 來監審查網頁元素：

當你的鼠標懸浮在Elements面板中的某個元素上時，DevTools 會在你的設備上高亮顯示相關元素。
你也可以點擊審查元素然后點擊設備的屏幕，DevTools 就會在Elements面板中讓選中的元素高亮顯示。

注意：你設備的 Chrome 版本將會決定遠程調試中 DevTools 的版本。由于這個原因，你在遠程調試時使用的 DevTools 可能和你平常使用的不大一樣。

調試提示

下面是使用遠程調試功能的一些提示：

按F5（或者在Mac上Cmd+r）來重新加載遠程頁面。
讓設備的網絡處于打開狀態。使用Network面板來查看實際移動設備的網絡流狀態。
使用Timeline面板來分析提交數據和 CPU 使用狀態。在移動設備上運行的程序通常會比在開發機器上運行的要慢一些。
如果你是在本地的 web 服務器上運行的，使用端口轉發或者虛擬主機映射技術來讓設備訪問你的站點。

調試 WebViews

在安卓 4.4 及后續版本中，你可以使用 DevTools 來調試原生安卓應用中的 WebView 的內容。

將 WebViews 配置為可調試狀態

你的應用程序必須允許調試 WebView。要開啟 WebView 調試，在 WebView 類里面調用靜態函數 setWebContentsDebuggingEnabled。

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

該設置對該應用中所有的 WebView 都會生效。

提示： 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頁面會顯示設備中所有可調試的 WebView.

要開始調試，點擊你想調試的 WebView 下面的inspect。接下來就像使用遠程瀏覽器選項卡一樣使用 DevTools。

使用 Chrome DevTools 來調試遠程安卓 Webview

在 WebView 中列出的灰色圖片表示其大小以及相對設備屏幕的大小。如果你的 WebView 有設置名稱，那么其名稱也會列出來。

實時截屏

要在兩個屏幕間不斷轉移注意力是相當不方便的。Screencast 將你設備的屏幕顯示在開發機上的 DevTools 右側。你也可以在 screencast 中與你的設備進行交互。

在 KitKat 4.4.3，screencast 既可以給瀏覽器選項卡使用也可以給安卓 WebView 使用。

開啟截屏會話

要開啟 screecast，點擊遠程調試窗口右側上方的Screencast圖標。

Screecast 圖標

Screencast面板在左側打開并且顯示設備屏幕的實時狀況。

在你的電腦上與你的安卓設備實時進行交互

截屏只會顯示網頁內容。該截屏的透明部分涵蓋了多功能框、設備鍵盤以及其他設備接口。

注意：由于截屏會連續捕獲幀，會造成不小的性能開銷。如果你的測試是對幀速率敏感的，最好禁用截屏。

使用截屏來與設備交互

當你使用截屏來互動的時候，點擊會被轉換為觸屏，會在設備上觸發適當的觸控事件。電腦端的按鍵會發送到設備，這樣就可以避免使用大拇指來打字。

其他的 DevTools 工作也可以在截屏上使用。例如，要檢查元素，點擊Inspect Element然后在截屏內點擊就可以查看網頁源碼中對應部分。

要模擬一個縮放手勢，拖動鼠標的時候按住Shift。要在頁面上滾動，使用你的觸控板或者鼠標滾輪，也可以拖動鼠標指針。

端口轉發

你的手機不一定所有時候都能直接連接到你開發用的服務器。他們可能處于不同的網絡環境下，此外，你也可能在一個受限的企業網絡下進行開發。

Chrome for Android 上的端口轉發使得在移動設備上測試你所開發的站點變得輕松很多。其工作原理是在你的移動設備上創建一個監聽 TCP 端口，該端口映射到你的開發機器上的一個指定 TCP 端口。這些端口之間的流量通過 USB 來傳輸，因此該連接不需要依賴于你的網絡環境。

要啟用端口轉發：

在你開發用的機器上打開chrome://inspect。
點擊Port Forwarding。下面是端口轉發的設置頁面。

在Device port后面輸入你的安卓設備希望監聽的端口號（默認是8080）。
在Host后面輸入你的 web 應用運行環境的 IP 地址（或者主機名稱）以及端口號。
檢查Enable port forwarding是否已經勾選。
點擊Done來完成設置。

端口轉發設置

當端口轉發開啟成功時，chrome://inspect頁面的端口狀態將會顯示為綠色。

使用端口轉發來在你的安卓設備上查看本地網頁

現在你可以打開一個新的 Chrome for Android 選項卡并且在你的設備上查看本地服務器的內容。

虛擬主機映射

當你在 localhost 域名上進行開發的時候，端口轉發非常有效。但是有些情況下你可能需要是喲高自定義的本地域名。

例如，假設你正在使用的第三方 JavaScript SDk 只有在白名單上的域名中才能運行。所以你需要在你的端口文件中加入一個進入點，比如 127.0.0.1 production.com。又或者你需要在你的 web 服務器上通過虛擬主機來設置特定的域名。

如果你想讓你的手機能夠訪問到你自定域名上的內容，你可以結合端口轉發和代理服務器技術。代理會把來自設備上的請求映射到主機上的相應位置。

在代理上使用端口轉發

虛擬主機映射要求你在主機上開啟一個代理服務器。所有來自你的安卓設備的請求都會發送到這個代理上。

要在代理上使用端口轉發：

在主機上安裝代理軟件，比如Charles Proxy或者Squid。
運行代理服務器，要記住該服務器使用的端口號。

---

注意：代理服務器和你開發用的服務器必須在不同的端口上運行.

---

在 Chrome 瀏覽器中，進入chrome://inspect。
點擊Port forwarding。下面是端口轉發設置頁面。

在Device port后面輸入你的安卓設備希望監聽的端口號。使用安卓允許的端口，比如 9000.
在Host處輸入localhost:XXXX，其中XXXX是你的代理服務器占用的端口號。
檢查Enable port forwarding是否已經勾選。
點擊Done來完成設置。

代理服務器的端口轉發

在你的設備上設置代理

你的安卓設備需要和主機上的代理服務器交互。

要在你的設備上設置代理：

選擇設置 > WiFi。
長按你當前連接的網絡。

---

注意：代理設置適用于所有網絡.

---

點擊修改網絡。
選擇高級設置。
代理設置頁面如下：

點擊代理菜單并選擇手動。
在代理主機名處輸入localhost。
在代理端口號處輸入 9000。
點擊保存。

通過這些設定，你的設備會將它所有的請求都發給代理服務器。該代理代表你的設備發出新的請求，故而對你本地特定域名的請求會被合理地解析。

現在你就可以像在主機上那樣在 Chrome for Android 上加載本地域名了。

使用虛擬主機映射技術來在安卓設備上訪問特定的本地域名

提示：要恢復正常的瀏覽模式，在斷開連接后將設備上的代理設置還原就可以了。

常見問題

我在 chrome://inspect 頁面無法看到我的設備

如果你在Windows下進行開發，請確認你是否安裝好了你的設備所對應的驅動。安卓開發者網站上的OEM USB Drivers可供參考。
確認你的設備是否直接或者通過集線器連接到了你的主機上。
確認設備上USB 調試模式有沒有打開。記得在提示是否允許 USB 調試的時候選擇是。
在電腦上打開chrome://inspect并確認Discover USB devices有沒有勾選。
遠程調試要求你電腦上的 Chrome 版本高于安卓設備的。盡量使用Chrome Canary（Mac/Windows）或者Dev channel發行版（Linux）。

如果你仍然無法看到你的設備，請斷開設備與主機的連接。然后在你的設備上，打開設置 > 開發者選項。選擇撤銷 USB 調試授權。然后重新嘗試設置設備以及在 Chrome 中查找設備。

在 chrome://inspect 頁面中我無法看到我的瀏覽器選項卡

在你的設備中，打開 Chrome 瀏覽器并進入到你想調試的頁面。然后刷新chrome://inspect頁面。

我無法在 chrome://inspect 頁面中看到我的 WebView

確認WebView 調試模式在你的應用中已經啟用。
在你的設備上，啟動應用并打開你想調試的 WebView。然后，刷新chrome://inspect頁面。

在我的安卓設備上我無法訪問 web 服務器

如果是網絡限制條件導致你的設備無法連接到開發用的服務器，請嘗試端口轉發或者虛擬主機映射。

最后，如果遠程調試仍然無法工作，你可以使用 Android SDK 中的 adb 二進制包將你的工作流恢復到最近的狀態。

更多信息

遠程調試和 ADB

在遠程調試瀏覽器選項卡以及 WebView 的時候你不要設置 ADB 或者 ADB 插件。Android 上的遠程調試現在是標準 Chrome DevTools 的一部分。在所有的操作系統上它都可以使用：Windows，Mac，Linux 以及 Chrome OS。

如果你在使用遠程調試的時候遇到了問題，你可以嘗試通過 Android SDK 提供的 adb 二進制包來使用傳統工作流。

---

注意：你的安卓設備和 Chrome 之間的連接可能會中斷 adb 連接。在建立 adb 連接前，取消chrome://inspect上對Discover USB devices的勾選。

總結

以上是生活随笔為你收集整理的[转] 在安卓设备上使用 Chrome 远程调试功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。