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

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

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

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

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

調試遠程瀏覽器

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

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

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

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

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

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

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

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

調試提示

下面是使用遠程調試功能的一些提示：

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

調試 WebViews

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

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

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

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

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

提示： WebView 的調試并不會受到應用中 manifest 文件的 debuggable 標簽狀態(tài)的影響。如果你想只有在 debuggable 為 true 時啟用 WebView 調試，請在運行的時候測試該標簽的狀態(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 頁面會顯示設備中所有可調試的 WebView.

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

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

使用 Chrome DevTools 來調試遠程安卓 Webview

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

實時截屏

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

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

開啟截屏會話

要開啟 screecast，點擊遠程調試窗口右側上方的 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 面板在左側打開并且顯示設備屏幕的實時狀況。

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

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

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

使用截屏來與設備交互

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

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

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

端口轉發(fā)

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

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

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

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

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

端口轉發(fā)設置

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

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

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

虛擬主機映射

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

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

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

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

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

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

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

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

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

在你的設備上設置代理

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

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

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

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

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

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

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

常見問題

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

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

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

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

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

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

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

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

如果是網絡限制條件導致你的設備無法連接到開發(fā)用的服務器，請嘗試端口轉發(fā)或者虛擬主機映射。

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

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

在安卓設備上使用 Chrome 遠程調試功能

需求

設置安卓設備

1. 打開 USB 調試選項

2. 連接你的設備

在 Chrome 中找到設備