标签：hub lin cas win 括号 flow 技术 透明 discover
从 Windows、Mac 或 Linux 计算机远程调试 Android 设备上的实时内容。 本教程将向您展示如何：
图 1. 远程调试可以让您从自己的开发计算机上检查 Android 设备上运行的页面。
下面的工作流程适用于大多数用户。 如需更多帮助，请参阅问题排查：DevTools 检测不到 Android 设备。
1、在您的 Android 设备上打开 Developer Options 屏幕。 请参阅配置设备上的开发者选项 {:.external}。
2、选择 Enable USB Debugging。
3、在您的开发计算机上打开 Chrome。
4、打开 DevTools。
5、在 DevTools 中，点击 主菜单
，{:.devtools-inline} 然后选择 More tools > Remote devices。
图 2. 通过主菜单打开 Remote Devices 标签
6、在 DevTools 中，打开 Settings 标签。
7、确保启用 Discover USB devices 复选框。
图 3. 启用 Discover USB Devices 复选框
8、使用 USB 电缆将 Android 设备直接连接到您的开发计算机。 首次连接时，通常会看到 DevTools 检测到未知设备。 如果您 Android 设备的型号名称下显示绿色圆点和 Connected 文本，
则表示 DevTools 已与您的设备成功建立连接。 继续执行第 2 步。
图 4. Remote Devices 标签显示成功检测到待授权的未知设备
9、如果设备显示 Unknown，则根据 Android 设备上的权限提示接受 Allow USB Debugging。
请确保正确安装硬件：
请确保正确安装您的软件：
如果您的 Android 设备上未显示 Allow USB Debugging 提示，请尝试：
如果您发现本节或 Chrome DevTools 设备插入时未检测到设备中未提及的解决方案， 请在 Stack Overflow 问题下添加答案，或者在 webfundamentals 存储库中提出问题！
1、在 Android 设备上打开 Chrome。
2、在 Remote Devices 标签中，点击与您的 Android 设备型号名称匹配的标签。 在此页面的顶部，您会看到您 Android 设备的型号名称，然后是序列号。
再往下，您可以看到设备上运行的 Chrome 的版本，版本号附在括号内。 每个打开的 Chrome 标签都有自己的区域。 您可以从区域与标签交互。
如果有任何使用 WebView 的应用，您也会看到针对每个应用的区域。 在图 5 中，没有打开任何标签或 WebView。
图 5. 连接的远程设备
3、在 New tab 文本框中，输入一个网址，然后点击 Open。 此页面将在 Android 设备上的新标签中打开。
4、点击您刚刚打开的网址旁的 Inspect。 新的 DevTools 实例随即打开。 您的 Android 设备上运行的 Chrome 的版本决定在开发计算机上打开的 DevTools 的版本。
因此，如果您的 Android 设备正在运行一个非常旧的 Chrome 版本，则 DevTools 实例看上去可能与您常用的实例有很大的差别。
点击您要重新加载、聚焦或关闭的标签旁的 More Options 。
图 6. 重新加载、聚焦或关闭标签的菜单
转到您的 DevTools 实例的 Elements 面板，将鼠标指针悬停在一个元素上以在 Android 设备的视口中突出显示该元素。
您还可以在 Android 设备屏幕上点按一个元素，以在 Elements 面板中选择该元素。 点击您的 DevTools 实例上的 Select Element 
， {:.devtools-inline} 然后在您的 Android 设备屏幕上点按此元素。
请注意，Select Element 将在第一次轻触后停用，因此，每次想要使用此功能时您都需要重新启用。
点击 Toggle Screencast 
，{:.devtools-inline} 以在您的 DevTools 实例中查看 Android 设备的内容。
您可以通过多种方式与抓屏互动：
关于抓屏的一些注意事项：
标签：hub lin cas win 括号 flow 技术 透明 discover
原文地址：https://www.cnblogs.com/wind-wang/p/11287690.html
