Chrome開發(fā)工具 在安卓設備上使用 Chrome 遠程調(diào)試功能

2018-03-01 18:49 更新

在安卓設備上使用 Chrome 遠程調(diào)試功能

你的網(wǎng)頁內(nèi)容在移動設備上的體驗可能和電腦上完全不同。Chrome DevTools 提供了遠程調(diào)試功能，這讓你可以在安卓設備上實時調(diào)試開發(fā)的內(nèi)容。

remote-debug-banner

安卓遠程調(diào)試支持：

需求

要開始遠程調(diào)試，你需要：

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

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

如果使用遠程調(diào)試的時候出現(xiàn)了問題，請參考 Troubleshootling。

設置安卓設備

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

1. 打開 USB 調(diào)試選項

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

settings-dev-options-on
設置頁面的開發(fā)者選項

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

about-phone-build-num

在開發(fā)者選項中，選中 USB 調(diào)試復選框。

usb-debugging-on
在安卓上啟用 USB 調(diào)試

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

allow-usb-debugging

2. 連接你的設備

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

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

在 Chrome 中找到設備

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

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

chrome-discover-usb

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

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

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

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

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

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

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

調(diào)試遠程瀏覽器

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

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

chrome-inspect-tabs

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

remote-debug-overview
通過電腦上的 DevTools 來調(diào)試安卓手機上的網(wǎng)頁

比如，你可以在你的設備上使用 DevTools 來監(jiān)審查網(wǎng)頁元素：

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

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

調(diào)試提示

下面是使用遠程調(diào)試功能的一些提示：

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

調(diào)試 WebViews

在安卓 4.4 及后續(xù)版本中，你可以使用 DevTools 來調(diào)試原生安卓應用中的 WebView 的內(nèi)容。

將 WebViews 配置為可調(diào)試狀態(tài)

你的應用程序必須允許調(diào)試 WebView。要開啟 WebView 調(diào)試，在 WebView 類里面調(diào)用靜態(tài)函數(shù) setWebContentsDebuggingEnabled。

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

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

提示： WebView 的調(diào)試并不會受到應用中 manifest 文件的 debuggable 標簽狀態(tài)的影響。如果你想只有在 debuggable 為 true 時啟用 WebView 調(diào)試，請在運行的時候測試該標簽的狀態(tài)。

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

在 DevTools 中打開 WebView

chrome://inspect 頁面會顯示設備中所有可調(diào)試的 WebView.

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

webview-debugging

使用 Chrome DevTools 來調(diào)試遠程安卓 Webview

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

實時截屏

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

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

開啟截屏會話

要開啟 screecast，點擊遠程調(diào)試窗口右側(cè)上方的 Screencast icon-screencast 圖標。

screencast-icon-location
Screecast 圖標

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

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

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

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

使用截屏來與設備交互

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

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

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

端口轉(zhuǎn)發(fā)

你的手機不一定所有時候都能直接連接到你開發(fā)用的服務器。他們可能處于不同的網(wǎng)絡環(huán)境下，此外，你也可能在一個受限的企業(yè)網(wǎng)絡下進行開發(fā)。

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

要啟用端口轉(zhuǎn)發(fā)：

  1. 在你開發(fā)用的機器上打開 chrome://inspect。
  2. 點擊 Port Forwarding。下面是端口轉(zhuǎn)發(fā)的設置頁面。
    chrome-port-forwarding
  3. 在 Device port 后面輸入你的安卓設備希望監(jiān)聽的端口號（默認是8080）。
  4. 在 Host 后面輸入你的 web 應用運行環(huán)境的 IP 地址（或者主機名稱）以及端口號。
  5. 檢查 Enable port forwarding 是否已經(jīng)勾選。
  6. 點擊 Done 來完成設置。

port-forwarding-dialog

端口轉(zhuǎn)發(fā)設置

當端口轉(zhuǎn)發(fā)開啟成功時，chrome://inspect 頁面的端口狀態(tài)將會顯示為綠色。

port-forwarding-device
使用端口轉(zhuǎn)發(fā)來在你的安卓設備上查看本地網(wǎng)頁

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

虛擬主機映射

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

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

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

在代理上使用端口轉(zhuǎn)發(fā)

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

要在代理上使用端口轉(zhuǎn)發(fā)：

  1. 在主機上安裝代理軟件，比如 Charles Proxy 或者 Squid。
  2. 運行代理服務器，要記住該服務器使用的端口號。
    注意：代理服務器和你開發(fā)用的服務器必須在不同的端口上運行.
  3. 在 Chrome 瀏覽器中，進入 chrome://inspect。
  4. 點擊 Port forwarding。下面是端口轉(zhuǎn)發(fā)設置頁面。
    chrome-virtual-host-mapping
  5. 在 Device port 后面輸入你的安卓設備希望監(jiān)聽的端口號。使用安卓允許的端口，比如 9000.
  6. 在 Host 處輸入 localhost:XXXX，其中 XXXX 是你的代理服務器占用的端口號。
  7. 檢查 Enable port forwarding 是否已經(jīng)勾選。
  8. 點擊 Done 來完成設置。

port-forward-to-proxy
代理服務器的端口轉(zhuǎn)發(fā)

在你的設備上設置代理

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

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

  1. 選擇 設置 > WiFi。
  2. 長按你當前連接的網(wǎng)絡。
    注意：代理設置適用于所有網(wǎng)絡.
  3. 點擊修改網(wǎng)絡。
  4. 選擇高級設置。
    代理設置頁面如下：
    phone-proxy-settings
  5. 點擊代理菜單并選擇手動。
  6. 在代理主機名處輸入 localhost。
  7. 在代理端口號處輸入 9000。
  8. 點擊保存。

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

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

virtual-host-mapping
使用虛擬主機映射技術(shù)來在安卓設備上訪問特定的本地域名

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

常見問題

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

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

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

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

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

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

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

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

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

更多信息

遠程調(diào)試和 ADB

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

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

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

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號