http://wiki.jikexueyuan.com/project/chrome-devtools/images/rsa-fingerprint.png" alt="rsa-fingerprint" />
提示：如果希望以后不再彈出系那個管提示，勾選 Always allow from this computer

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

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

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

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

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

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

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

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

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

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

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

當你的鼠標懸浮在 Elements 面板中的某個元素上時，DevTools 會在你的設(shè)備上高亮顯示相關(guān)元素。
你也可以點擊 審查元素 http://wiki.jikexueyuan.com/project/chrome-devtools/images/inspect-icon.png" alt="inspect-element" /> 然后點擊設(shè)備的屏幕，DevTools 就會在 Elements 面板中讓選中的元素高亮顯示。

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

調(diào)試提示

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

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

調(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è)置對該應(yīng)用中所有的 WebView 都會生效。

提示： WebView 的調(diào)試并不會受到應(yīng)用中 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 頁面會顯示設(shè)備中所有可調(diào)試的 WebView.

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

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

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

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

實時截屏

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

虛擬主機映射

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

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

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

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

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

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

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

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

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

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

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

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

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

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

常見問題

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

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

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

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

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

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

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

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

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

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

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

需求

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

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

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

在 Chrome 中找到設(shè)備