您的网络内容在移动设备上的行为方式可能与桌面体验截然不同。使用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设备。
注意：您还可以通过选择Chrome菜单>更多工具>检查设备来访问chrome：// inspect。
注意：可能会有警告提示您允许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也可以使用截屏视频。例如，要检查元素，请单击“ 检查元素” 
图标，然后在屏幕录像内单击。