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

2018-03-01 18:49 更新

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

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

remote-debug-banner

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

需求

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

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

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

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

設(shè)置安卓設(shè)備

請(qǐng)按照以下說明來設(shè)置安卓設(shè)備：

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

在安卓設(shè)備上，進(jìn)入設(shè)置>開發(fā)者選項(xiàng)。

settings-dev-options-on
設(shè)置頁面的開發(fā)者選項(xiàng)

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

about-phone-build-num

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

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

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

allow-usb-debugging

2. 連接你的設(shè)備

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

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

在 Chrome 中找到設(shè)備

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

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

chrome-discover-usb

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

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

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

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

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

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

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

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

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

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

chrome-inspect-tabs

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

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

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

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

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

調(diào)試提示

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

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

調(diào)試 WebViews

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

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

你的應(yīng)用程序必須允許調(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);
}

該設(shè)置對(duì)該應(yīng)用中所有的 WebView 都會(huì)生效。

提示： WebView 的調(diào)試并不會(huì)受到應(yīng)用中 manifest 文件的 debuggable 標(biāo)簽狀態(tài)的影響。如果你想只有在 debuggable 為 true 時(shí)啟用 WebView 調(diào)試，請(qǐng)?jiān)谶\(yùn)行的時(shí)候測(cè)試該標(biā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 頁面會(huì)顯示設(shè)備中所有可調(diào)試的 WebView.

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

webview-debugging

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

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

實(shí)時(shí)截屏

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

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

開啟截屏?xí)?/h3>

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

screencast-icon-location
Screecast 圖標(biāo)

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

screencast
在你的電腦上與你的安卓設(shè)備實(shí)時(shí)進(jìn)行交互

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

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

使用截屏來與設(shè)備交互

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

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

remote-debug
要模擬一個(gè)縮放手勢(shì)，拖動(dòng)鼠標(biāo)的時(shí)候按住 Shift。要在頁面上滾動(dòng)，使用你的觸控板或者鼠標(biāo)滾輪，也可以拖動(dòng)鼠標(biāo)指針。

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

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

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

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

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

port-forwarding-dialog

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

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

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

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

虛擬主機(jī)映射

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

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

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

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

虛擬主機(jī)映射要求你在主機(jī)上開啟一個(gè)代理服務(wù)器。所有來自你的安卓設(shè)備的請(qǐng)求都會(huì)發(fā)送到這個(gè)代理上。

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

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

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

在你的設(shè)備上設(shè)置代理

你的安卓設(shè)備需要和主機(jī)上的代理服務(wù)器交互。

要在你的設(shè)備上設(shè)置代理：

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

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

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

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

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

常見問題

我在 chrome://inspect 頁面無法看到我的設(shè)備

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

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

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

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

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

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

在我的安卓設(shè)備上我無法訪問 web 服務(wù)器

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

更多信息

遠(yuǎn)程調(diào)試和 ADB

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

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

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

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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)