遠程調試 Android 設備使用入門(谷歌翻譯版)

移動前端調試方案（Android + Chrome 實現遠程調試）

• 目錄
• 要求
• 第 1 步：發現您的 Android 設備
• 第 2 步：從您的開發計算機調試 Android 設備上的內容。
  • 更多操做：從新加載、聚焦或關閉一個標籤
  • 檢查元素
  • Android 設備到開發計算機的抓屏
• 反饋

 

 

從 Windows、Mac 或 Linux 計算機遠程調試 Android 設備上的實時內容。 本教程將向您展現如何：

• 設置您的 Android 設備進行遠程調試，並從開發計算機上發現設備
• 從您的開發計算機檢查和調試 Android 設備上的實時內容。
• 將 Android 設備上的內容抓屏到您的開發計算機上的 DevTools 實例中。

 

要求

• 開發計算機上已安裝 Chrome 32 或更高版本。
• 開發計算機上已安裝 USB 驅動程序（若是您使用 Windows）。 確保設備管理器報告正確的 USB 驅動程序
• 擁有一根能夠將您的 Android 設備鏈接至開發計算機的 USB 電纜。
• Android 4.0 或更高版本。
• 您的 Android 設備上已安裝 Chrome（Android 版）。

第 1 步：發現您的 Android 設備

1. 在您的 Android 設備上，選擇 Settings > Developer Options > Enable USB Debugging。 在運行 Android 4.2 及更新版本的設備上，Developer options 默認狀況下處於隱藏狀態。 請參閱啓用設備上的開發者選項以瞭解如何啓用它。

2. 在您的開發計算機上打開 Chrome。您應使用您的一個 Google 賬戶登陸到 Chrome。 遠程調試在隱身模式或訪客模式下沒法運行。

3. 打開 DevTools。

4. 在 DevTools 中，點擊 Main Menu，而後選擇 More tools > Remote devices。

    

5. 在 DevTools 中，點擊 Settings 標籤（若是正在顯示另外一個標籤）。

6. 確保已啓用 Discover USB devices。

    

7. 使用一根 USB 電纜將 Android 設備直接鏈接到您的開發計算機。 請勿使用任何中間 USB 集線器。若是這是您首次將您的 Android 設備鏈接到此開發計算機，您的設備將顯示在 Unknown 中，其下面具備文本 Pending Authorization。

    

8. 若是您的設備顯示爲 Unknown，則在 Android 設備上接受 Allow USB Debugging 權限提示。 Unknown 被替換爲您的 Android 設備的型號名稱。 綠色圓圈和 Connected 文本表示您已大功告成，能夠從開發計算機遠程調試您的 Android 設備。

注：若是您在發現流程中遇到任何問題，您能夠經過在 Android 設備上選擇 Settings > Developer Options > Revoke USB Debugging Authorizations 重啓該流程。

第 2 步：從您的開發計算機調試 Android 設備上的內容。

1. 若是您還沒有在 Android 設備上打開 Chrome，則如今打開它。

2. 返回 DevTools，點擊與設備的型號名稱匹配的標籤。 在此頁面的頂部，您會看到 Android 設備的型號名稱，後面緊跟着其序列號。 在型號名稱下面，您能夠看到在設備上運行的 Chrome 的版本，版本號在括號裏。每一個打開的 Chrome 標籤都會有本身的區域。您能夠今後區域與該標籤交互。 若是有任何使用 WebView 的應用，您也會看到針對每一個應用的區域。 下面的屏幕截圖沒有任何打開的標籤或 WebViews。

    

3. 在 New tab 旁輸入一個網址，而後點擊 Open。此頁面將在 Android 設備上的新標籤中打開。

4. 點擊您剛剛打開的網址旁的 Inspect。這將打開一個新的 DevTools 實例。 您的 Android 設備上運行的 Chrome 的版本決定在開發計算機上打開的 DevTools 的版本。所以，若是您的 Android 設備正在運行一個很是舊的 Chrome 版本，則 DevTools 實例看上去可能與您經常使用的實例有很大的差異。

更多操做：從新加載、聚焦或關閉一個標籤

點擊您要從新加載、聚焦或關閉的標籤旁的 More Options 。

檢查元素

轉到您的 DevTools 實例的 Elements 面板，將鼠標懸停在一個元素上以在 Android 設備的視口中突出顯示它。

您還能夠在 Android 設備屏幕上點按一個元素，以在 Elements 面板中選中它。 點擊您的 DevTools 實例上的 Select Element 

 

，而後在您的 Android 設備屏幕上點按此元素。 請注意，Select Element 將在第一次觸摸後停用，所以，每次想要使用此功能時您都須要從新啓用它。

Android 設備到開發計算機的抓屏

點按 Toggle Screencast ![Toggle Screencast][screencast]{:.devtools-inline} 以在您的 DevTools 實例中查看 Android 設備的內容。

您能夠經過多種方式與抓屏互動：

• 將點擊轉變爲點按，在設備上觸發適當的觸摸事件。
• 將計算機上的按鍵發送至設備。
• 要模擬雙指張合手勢，請按住 Shift 拖動。
• 要滾動，請使用您的觸控板或鼠標滾輪，或者使用您的鼠標指針拋式滾動。

關於抓屏的一些注意事項：

• 抓屏僅顯示頁面內容。抓屏的透明部分表示設備界面，如 Chrome 多功能框、Android 狀態欄或 Android 鍵盤。
• 抓屏會對幀率產生負面影響。在測量滾動或動畫時停用抓屏，以更準確地瞭解頁面的性能。
• 若是您的 Android 設備屏幕鎖定，您的抓屏內容將消失。 將您的 Android 設備屏幕解鎖可自動恢復抓屏。