檢查移動Web應用程式的元素
您的網路內容在移動裝置上的行為方式可能與桌面體驗截然不同。使用Chrome DevTools進行遠端除錯可讓您除錯Android裝置上的實時內容。
在本章中，我們將學習如何使用Chrome DevTools在Android裝置上實時除錯網站以及如何檢查移動Web應用程式的元素。
Chrome DevTools幫助我們實現以下目標：
- 在瀏覽器選項卡中除錯網站。
- 在本機Android應用程式中除錯WebView。
- 抓屏活到您的開發機器從你的Android裝置。
要求
要開始使用Chrome DevTools，您需要：
- Chrome 32或更高版本安裝在您的開發計算機上。
- 用於連線Android裝置的USB線。
- 對於瀏覽器除錯：裝置上的Android 4.0+和Android版Chrome
注意：遠端除錯要求您的桌面Chrome版本比您裝置上的Android版Chrome更新。為獲得最佳效果，請使用Chrome Canary（Mac / Windows）。
先決條件
在Chrome中發現裝置
裝置與機器連線後，請執行以下步驟：
1）在桌面Chrome瀏覽器上，導航至chrome：//檢查並確認已選中Discover USB裝置。
注意：
注意：可能會有警告提示您允許USB除錯，只需選擇確定即可繼續。
2）現在在裝置上開啟Chrome瀏覽器，然後重新整理計算機上的Chrome視窗。這將顯示已開啟的Chrome瀏覽器在裝置上的條目。鍵入www.toolsqa.wpengine.com在給定的空間，並點選開啟。
3）注意網站現在在裝置中開啟。
4）同樣顯示在機器上的Chrome瀏覽器上。現在單擊inspect 連結。
5）檢查，將允許調查在連線裝置上開啟的網站的HTML元素。Chrome DevTools的新例項將在計算機上啟動。在此例項中，您可以實時與裝置上選定的瀏覽器選項卡進行互動。
注意：當滑鼠懸停在“ 元素”面板中的元素上時，DevTools會突出顯示裝置上的元素。您還可以單擊DevTools中的Inspect Element圖示，然後點選您的裝置螢幕。DevTools突出顯示“ 元素”面板中的tapped元素。
如何在Chrome中進行Screencasting
我知道很難在螢幕之間轉移你的注意力，但Chrome Screencast功能會在機器上顯示裝置的螢幕和DevTools。但不僅如此，通過截圖視訊與附加裝置上的內容進行互動也是一個很酷的功能。
開始截圖視訊會議
要開始螢幕錄影，請單擊遠端除錯DevTools視窗右上角的Screencast 
圖示。
該截圖面板開啟左側，顯示裝置的螢幕的實時取景。
使用截圖視訊與您的裝置進行互動
當您與截圖視訊進行互動時，點選會轉換為點選，在裝置上觸發正確的觸控事件。計算機上的擊鍵被髮送到裝置，因此您可以避免用拇指鍵入。
其他DevTools也可以使用截圖視訊。例如，要檢查元素，請單擊“ 檢查元素” 
圖示，然後在螢幕錄影內單擊。