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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/remote-debug-banner.png" alt="remote-debug-banner" />

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

在瀏覽器選項(xiàng)卡中調(diào)試網(wǎng)站。
在原生安卓應(yīng)用中調(diào)試網(wǎng)頁(yè)內(nèi)容。
將屏幕從你的安卓設(shè)備上投影到你的開(kāi)發(fā)機(jī)器上。
使用端口轉(zhuǎn)發(fā)和虛擬主機(jī)映射來(lái)讓安卓設(shè)備訪問(wèn)開(kāi)發(fā)使用的服務(wù)器。

需求

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

安裝 Chrome 32 或者之后的版本。
連接安卓設(shè)備用的 USB 線纜。
對(duì)于通過(guò)瀏覽器調(diào)試：安卓 4.0 以上并且安裝了 Chrome for Android。
對(duì)于通過(guò)應(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)了問(wèn)題，請(qǐng)參考 Troubleshootling。

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

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

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/settings-dev-options-on.png" alt="settings-dev-options-on" />
設(shè)置頁(yè)面的開(kāi)發(fā)者選項(xiàng)

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/about-phone-build-num.png" alt="about-phone-build-num" />

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/usb-debugging-on.png" alt="usb-debugging-on" />
在安卓上啟用 USB 調(diào)試

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/allow-usb-debugging.png" alt="allow-usb-debugging" />

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

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

注意：如果你在 Windows 下進(jìn)行開(kāi)發(fā)，那么你需要為你的安卓設(shè)備安裝驅(qū)動(dòng)。具體可以參考安卓開(kāi)發(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)勾選了：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-discover-usb.png" alt="chrome-discover-usb" />

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/rsa-fingerprint.png" alt="rsa-fingerprint" />
提示：如果希望以后不再?gòu)棾鱿的莻€(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ī)！

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-inspect-devices.png" alt="chrome-inspect-devices" />
從 chrome://inspect 也賣弄查看已連接的設(shè)備

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

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

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-inspect-tabs.png" alt="chrome-inspect-tabs" />

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/remote-debug-overview.jpg" alt="remote-debug-overview" />
通過(guò)電腦上的 DevTools 來(lái)調(diào)試安卓手機(jī)上的網(wǎng)頁(yè)

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

當(dāng)你的鼠標(biāo)懸浮在 Elements 面板中的某個(gè)元素上時(shí)，DevTools 會(huì)在你的設(shè)備上高亮顯示相關(guān)元素。
你也可以點(diǎn)擊 審查元素 http://wiki.jikexueyuan.com/project/chrome-devtools/images/inspect-icon.png" alt="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）來(lái)重新加載遠(yuǎn)程頁(yè)面。
讓設(shè)備的網(wǎng)絡(luò)處于打開(kāi)狀態(tài)。使用 Network 面板來(lái)查看實(shí)際移動(dòng)設(shè)備的網(wǎng)絡(luò)流狀態(tài)。
使用 Timeline 面板來(lái)分析提交數(shù)據(jù)和 CPU 使用狀態(tài)。在移動(dòng)設(shè)備上運(yùn)行的程序通常會(huì)比在開(kāi)發(fā)機(jī)器上運(yùn)行的要慢一些。
如果你是在本地的 web 服務(wù)器上運(yùn)行的，使用端口轉(zhuǎn)發(fā)或者虛擬主機(jī)映射技術(shù)來(lái)讓設(shè)備訪問(wèn)你的站點(diǎn)。

調(diào)試 WebViews

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

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

你的應(yīng)用程序必須允許調(diào)試 WebView。要開(kāi)啟 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 中打開(kāi) WebView

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/webview-debugging.png" alt="webview-debugging" />

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

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

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

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

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

開(kāi)啟截屏?xí)?/h3>
要開(kāi)啟 screecast，點(diǎn)擊遠(yuǎn)程調(diào)試窗口右側(cè)上方的 Screencast http://wiki.jikexueyuan.com/project/chrome-devtools/images/icon-screencast.png" alt="icon-screencast" /> 圖標(biāo)。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/screencast-icon-location.png" alt="screencast-icon-location" />
Screecast 圖標(biāo)

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/screencast.png" alt="screencast" />
在你的電腦上與你的安卓設(shè)備實(shí)時(shí)進(jìn)行交互

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

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

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

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

其他的 DevTools 工作也可以在截屏上使用。例如，要檢查元素，點(diǎn)擊 Inspect Element http://wiki.jikexueyuan.com/project/chrome-devtools/images/inspect-icon.png" alt="inspect" /> 然后在截屏內(nèi)點(diǎn)擊就可以查看網(wǎng)頁(yè)源碼中對(duì)應(yīng)部分。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/remote-debug.gif" alt="remote-debug" />
要模擬一個(gè)縮放手勢(shì)，拖動(dòng)鼠標(biāo)的時(shí)候按住 Shift。要在頁(yè)面上滾動(dòng)，使用你的觸控板或者鼠標(biāo)滾輪，也可以拖動(dòng)鼠標(biāo)指針。

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

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

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

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/port-forwarding-dialog.png" alt="port-forwarding-dialog" />

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/port-forwarding-on-device.png" alt="port-forwarding-device" />
使用端口轉(zhuǎn)發(fā)來(lái)在你的安卓設(shè)備上查看本地網(wǎng)頁(yè)

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

虛擬主機(jī)映射

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

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

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

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

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

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

在主機(jī)上安裝代理軟件，比如 Charles Proxy 或者 Squid。
運(yùn)行代理服務(wù)器，要記住該服務(wù)器使用的端口號(hào)。

注意：代理服務(wù)器和你開(kāi)發(fā)用的服務(wù)器必須在不同的端口上運(yùn)行.
在 Chrome 瀏覽器中，進(jìn)入 chrome://inspect。
點(diǎn)擊 Port forwarding。下面是端口轉(zhuǎn)發(fā)設(shè)置頁(yè)面。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-virtual-host-mapping.png" alt="chrome-virtual-host-mapping" />
在 Device port 后面輸入你的安卓設(shè)備希望監(jiān)聽(tīng)的端口號(hào)。使用安卓允許的端口，比如 9000.
在 Host 處輸入 localhost:XXXX，其中 XXXX 是你的代理服務(wù)器占用的端口號(hào)。
檢查 Enable port forwarding 是否已經(jīng)勾選。
點(diǎn)擊 Done 來(lái)完成設(shè)置。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/port-forward-to-proxy.png" alt="port-forward-to-proxy" />
代理服務(wù)器的端口轉(zhuǎn)發(fā)

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

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

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

選擇 設(shè)置 > WiFi。
長(zhǎng)按你當(dāng)前連接的網(wǎng)絡(luò)。
注意：代理設(shè)置適用于所有網(wǎng)絡(luò).
點(diǎn)擊修改網(wǎng)絡(luò)。
選擇高級(jí)設(shè)置。
代理設(shè)置頁(yè)面如下：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/phone-proxy-settings.png" alt="phone-proxy-settings" />
點(diǎn)擊代理菜單并選擇手動(dòng)。
在代理主機(jī)名處輸入 localhost。
在代理端口號(hào)處輸入 9000。
點(diǎn)擊保存。

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/virtual-host-mapping.png" alt="virtual-host-mapping" />
使用虛擬主機(jī)映射技術(shù)來(lái)在安卓設(shè)備上訪問(wèn)特定的本地域名

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

常見(jiàn)問(wèn)題

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

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

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

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

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

我無(wú)法在 chrome://inspect 頁(yè)面中看到我的 WebView

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

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

如果是網(wǎng)絡(luò)限制條件導(dǎo)致你的設(shè)備無(wú)法連接到開(kāi)發(fā)用的服務(wù)器，請(qǐng)嘗試端口轉(zhuǎn)發(fā)或者虛擬主機(jī)映射。

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

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

需求