轉： Android 設備的遠程調試入門

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

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

圖 1. 遠程調試可讓您從本身的開發計算機上檢查 Android 設備上運行的頁面。

 

第 1 步：發現您的 Android 設備

下面的工做流程適用於大多數用戶。 如需更多幫助，請參閱問題排查：DevTools 檢測不到 Android 設備。

         一、在您的 Android 設備上打開 Developer Options 屏幕。 請參閱配置設備上的開發者選項 {:.external}。

          二、選擇 Enable USB Debugging。

         三、在您的開發計算機上打開 Chrome。

         四、打開 DevTools。

         五、在 DevTools 中，點擊 主菜單，{:.devtools-inline} 而後選擇 More tools > Remote devices。

          圖 2. 經過主菜單打開 Remote Devices 標籤 

       

         六、在 DevTools 中，打開 Settings 標籤。

         七、確保啓用 Discover USB devices 複選框。

         圖 3. 啓用 Discover USB Devices 複選框

         八、使用 USB 電纜將 Android 設備直接鏈接到您的開發計算機。 首次鏈接時，一般會看到 DevTools 檢測到未知設備。 若是您 Android 設備的型號名稱下顯示綠色圓點和 Connected 文本，

               則表示 DevTools 已與您的設備成功創建鏈接。 繼續執行第 2 步。

         圖 4. Remote Devices 標籤顯示成功檢測到待受權的未知設備

         九、若是設備顯示 Unknown，則根據 Android 設備上的權限提示接受 Allow USB Debugging。

問題排查：DevTools 檢測不到 Android 設備

請確保正確安裝硬件：

• 若是是使用 USB 集線器，請嘗試將您的 Android 設備直接鏈接到開發計算機上。
• 嘗試拔出 Android 設備與開發計算機之間的 USB 電纜，而後再將其插回原位 。 在 Android 設備與開發計算機的屏幕未鎖定時，執行此操做。
• 確保您的 USB 電纜正常工做。 您應該可以從本身的開發計算機上檢查 Android 設備上的文件。

請確保正確安裝您的軟件：

• 若是開發計算機運行的是 Windows 系統，請嘗試爲 Android 設備手動安裝 USB 驅動程序。 請參閱安裝原始設備製造商 (OEM) USB 驅動程序。
• 某些 Windows 和 Android 設備（特別是 Samsung）組合須要額外的設置。 請參閱 Chrome DevTools 設備插入時未檢測到設備。

若是您的 Android 設備上未顯示 Allow USB Debugging 提示，請嘗試：

• 當 DevTools 在開發計算機上處於焦點狀態時，斷開並從新鏈接 USB 電纜，此時將會顯示 Android 主屏幕。 換言之，有時若是 Android 設備或開發計算機的屏幕鎖定，則不會顯示此提示。
• 更新您的 Android 設備和開發計算機的顯示設置，以避免其進入休眠狀態。
• 將 Android 的 USB 模式設置爲 PTP。 請參閱 Galaxy S4 未顯示 Authorize USB debugging 對話框。
• 在 Android 設備的 Developer Options 屏幕上選擇 Revoke USB Debugging Authorizations，以將其重置爲新狀態。

若是您發現本節或 Chrome DevTools 設備插入時未檢測到設備中未說起的解決方案， 請在 Stack Overflow 問題下添加答案，或者在 webfundamentals 存儲庫中提出問題！

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

         一、在 Android 設備上打開 Chrome。

         二、在 Remote Devices 標籤中，點擊與您的 Android 設備型號名稱匹配的標籤。 在此頁面的頂部，您會看到您 Android 設備的型號名稱，而後是序列號。

              再往下，您能夠看到設備上運行的 Chrome 的版本，版本號附在括號內。 每一個打開的 Chrome 標籤都有本身的區域。 您能夠從區域與標籤交互。

              若是有任何使用 WebView 的應用，您也會看到針對每一個應用的區域。 在圖 5 中，沒有打開任何標籤或 WebView。

         圖 5. 鏈接的遠程設備

 

         三、在 New tab 文本框中，輸入一個網址，而後點擊 Open。 此頁面將在 Android 設備上的新標籤中打開。

         四、點擊您剛剛打開的網址旁的 Inspect。 新的 DevTools 實例隨即打開。 您的 Android 設備上運行的 Chrome 的版本決定在開發計算機上打開的 DevTools 的版本。

              所以，若是您的 Android 設備正在運行一個很是舊的 Chrome 版本，則 DevTools 實例看上去可能與您經常使用的實例有很大的差異。

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

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

圖 6. 從新加載、聚焦或關閉標籤的菜單

檢查元素

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

您還能夠在 Android 設備屏幕上點按一個元素，以在 Elements 面板中選擇該元素。 點擊您的 DevTools 實例上的 Select Element ， {:.devtools-inline} 而後在您的 Android 設備屏幕上點按此元素。

請注意，Select Element 將在第一次輕觸後停用，所以，每次想要使用此功能時您都須要從新啓用。

將 Android 屏幕抓屏到您的開發計算機上

點擊 Toggle Screencast ，{:.devtools-inline} 以在您的 DevTools 實例中查看 Android 設備的內容。

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

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

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

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