你的網頁內容在移動設備上的體驗可能和電腦上完全不同。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 已經勾選了：
在你的設備上，會跳出一個警告，告訴你是否要允許在電腦端進行 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 會在你的設備上高亮顯示相關元素。
- 你也可以點擊 審查元素
![inspect-element]()
然後點擊設備的屏幕，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。
在 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。下面是端口轉發的設置頁面。
![chrome-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。下面是端口轉發設置頁面。
![chrome-virtual-host-mapping]()
- 在 Device port 後面輸入你的安卓設備希望監聽的端口號。使用安卓允許的端口，比如 9000.
- 在 Host 處輸入 localhost:XXXX，其中 XXXX 是你的代理服務器佔用的端口號。
- 檢查 Enable port forwarding 是否已經勾選。
- 點擊 Done 來完成設置。
代理服務器的端口轉發
在你的設備上設置代理
你的安卓設備需要和主機上的代理服務器交互。
要在你的設備上設置代理：
- 選擇 設置 > WiFi。
- 長按你當前連接的網絡。
注意：代理設置適用於所有網絡.
- 點擊修改網絡。
- 選擇高級設置。
代理設置頁面如下：
![phone-proxy-settings]()
- 點擊代理菜單並選擇手動。
- 在代理主機名處輸入 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 的勾選。
來源：BootWiki
鏈接：https://www.bootwiki/chromedevtools/chrome-devtools-android-remote-debugging.html
著作權歸作者所有
商業轉載請聯繫作者獲得授權，非商業轉載請註明出處