通过

远程调试 Windows 设备

  • 项目

从 Windows 或 macOS 计算机远程调试 Windows 10 或更高版本设备上的实时内容。

本教程介绍以下任务：

  • 设置 Windows 设备进行远程调试，并从开发计算机连接到它。

  • 从开发计算机检查和调试 Windows 设备上的实时内容。

  • 将内容从 Windows 设备截屏到开发计算机上的 DevTools 实例。

步骤 1：设置主机 (debuggee 计算机)

主机或调试对象计算机是要调试的Windows 10或更高版本的设备。 它可能是一个远程设备，你很难以物理方式访问，或者它可能没有键盘和鼠标外围设备，因此很难与该设备上的 Microsoft Edge DevTools 交互。

设置主机 (调试对象) 计算机：

  1. 安装和配置 Microsoft Edge

  2. 从 Microsoft 应用商店安装适用于 Microsoft Edge (Beta) 的远程工具

  3. 激活 开发人员模式 并启用 设备门户

安装和配置 Microsoft Edge

  1. 如果尚未调试，请在要调试的 Windows 10 或更高版本设备上，从此页面安装 Microsoft Edge。

  2. 如果在主机上使用预安装的 Microsoft Edge 版本 (调试对象) 计算机上，请验证是否已Microsoft Edge (Chromium) ，而不是Microsoft Edge (EdgeHTML) 。 检查的快速方法是在浏览器中加载edge://settings/help并确认版本号是否为 75 或更高。

  3. edge://flags转到 Microsoft Edge 中的 。

  4. 在 “搜索标志”中，键入 “通过 Windows 设备门户启用远程调试”。 将该标志设置为 Enabled。 然后，单击“ 重启 ”按钮以重启Microsoft Edge。

设置“通过 Windows 设备门户标志启用远程调试”

安装适用于 Microsoft Edge (Beta) 的远程工具

从 Microsoft 应用商店安装适用于 Microsoft Edge 的远程工具 (Beta 版) 。

如果使用 Windows 10 或更高版本 1809 或更低版本，则可能禁用适用于 Microsoft Edge (Beta) 的远程工具 的“获取”按钮。 若要设置主机 (调试对象) 计算机，它必须运行Windows 10版本 1903 或更高版本。 更新主机 (调试对象) 计算机以获取 远程工具 for Microsoft Edge (Beta) 。

Microsoft Edge 的远程工具 (Microsoft 应用商店中的 Beta 版)

启动 远程工具 for Microsoft Edge (Beta) 并在出现提示时接受应用中的权限对话框。 现在可以关闭 远程工具 for Microsoft Edge (Beta) 无需将其打开，以便将来的远程调试会话。

激活开发人员模式并启用设备门户

如果使用的是 WiFi 网络，请确保网络标记为 “域” 或“ 专用”。 可以通过打开Windows 安全中心应用，选择“防火墙 & 网络保护”并检查网络是否列为“域网络”或“专用网络”来验证状态。

如果网络列为 “公用”，请转到 “设置>网络 & Internet>WI-Fi”，单击网络，然后将“ 网络配置文件 ”按钮切换为 “专用”。

现在，打开 “设置” 应用。 在 “查找设置”中，输入 Developer settings 并选择它。 打开 开发人员模式。 现在，可以通过将“通过局域网连接启用远程诊断”设置为“打开”来打开设备门户。 然后，可以选择打开 “身份验证 ”，以便客户端 (调试器) 设备必须提供正确的凭据才能连接到此设备。

如果通过局域网连接启用远程诊断。以前已打开，则必须将其关闭并再次打开，设备门户才能使用适用于 Microsoft Edge (Beta) 的远程工具。 如果“设置”中未显示“面向开发人员”部分，则设备门户可能已打开，因此请尝试重启Windows 10或更高版本的设备。

配置了开发人员模式和设备门户的“设置”应用

记下“ 连接使用：”下显示的计算机 IP 地址和连接端口。 下图中的 IP 地址为 192.168.86.78 ，连接端口为 50080：

记下“设置”中的 IP 地址和连接端口

在下一部分中输入有关客户端 (调试器) 设备的信息。 在主机上打开Microsoft Edge 和渐进式Web 应用 (PWA) 中的选项卡， (调试对象) 计算机上要从客户端 (调试程序) 计算机进行调试。

步骤 2：设置客户端 (调试器计算机)

客户端或调试器计算机是要从中调试的设备。 此设备可能是你的日常开发计算机，也可能只是在家工作时的电脑或 MacBook。

  1. 若要) 计算机设置客户端 (调试器，请 从此页面 安装 Microsoft Edge（如果尚未安装）。

  2. 如果在主机上使用预安装的 Microsoft Edge 版本 (调试对象) 计算机上，请验证是否已Microsoft Edge (Chromium) ，而不是Microsoft Edge (EdgeHTML) 。 检查的快速方法是在浏览器中加载edge://settings/help并确认版本号是否为 75 或更高。

  3. 转到 edge://inspect Microsoft Edge 中的页面。 默认情况下，应位于 “设备 ”部分。

  4. 在 “连接到远程 Windows 设备”下，按照以下模式在文本框中输入主机 (调试对象) 计算机的 IP 地址和连接端口：http://IP address：connection port。

  5. 单击“ 连接到设备”。

    客户端上的“edge://inspect”页

  6. 如果为主机 (调试对象) 计算机设置身份验证，系统会提示你输入客户端 (调试器) 计算机的用户名和密码，以便成功连接。

使用 https 而不是 http

如果要连接到主机 (使用 而不是 http调试对象) 计算机https：

  1. 在客户端 (调试器) 计算机上的 Microsoft Edge 中转到 http://IP address:50080/config/rootcertificate 。 这会自动下载名为 的安全 rootcertificate.cer证书。

  2. 选择 rootcertificate.cer。 这会打开 Windows 证书管理器工具。

  3. 单击“ 安装证书...”，确保“ 当前用户 ”处于打开状态，然后单击“ 下一步”。

  4. 单击“ 将所有证书放入以下存储区” ，然后单击“ 浏览...”。

  5. 选择 “受信任的根证书颁发机构” 存储，然后单击“ 确定”。

  6. 单击“下一步”，然后单击“完成”。

  7. 如果出现提示，请确认要将此证书安装到 受信任的根证书颁发机构 存储区。

  8. 现在，当使用 edge://inspect 页面从客户端 (调试程序) 计算机连接到主机 (调试对象) 计算机时，必须使用其他 connection port 值。 默认情况下，对于桌面 Windows，设备门户使用 50080 作为 connection port 。http 对于 https，设备门户使用 50043 ，因此遵循以下模式：https://IP address：50043 在 edge://inspect 页面上。 详细了解设备门户使用的默认端口。

默认端口

的默认端口 http 为 50080 ，默认端口为 https50043，但并非始终如此，因为桌面上的 Device Portal 声明临时范围内的端口 (>50,000) ，以防止与设备上的现有端口声明发生冲突。 若要了解详细信息，请参阅 Windows 桌面版设备门户的 “端口设置” 部分。

步骤 3：从客户端调试主机上的内容

如果客户端 (调试程序) 计算机成功连接到主机 (调试对象) 计算机， edge://inspect 则客户端上的页面现在会显示Microsoft Edge 中的选项卡列表以及主机上任何打开的 PWA。

客户端上的“edge://inspect”页显示主机上Microsoft Edge 和 PWA 中的选项卡

确定要调试的内容，然后单击“ 检查”。 Microsoft Edge DevTools 将在新选项卡中打开，并将主机 (调试对象) 计算机的内容截屏到客户端 (调试器) 计算机。 现在可以在客户端上使用 Microsoft Edge DevTools 的全部功能来获取主机上运行的内容。 在此处详细了解如何使用 Microsoft Edge DevTools。

客户端上的 Microsoft Edge DevTools 在主机上调试 Microsoft Edge 中的选项卡

检查元素

例如，尝试检查 元素。 转到客户端上 DevTools 实例的 元素 工具，将鼠标悬停在某个元素上以在主机设备的视区中突出显示它。

还可以点击主机设备屏幕上的元素，以在 “元素 ”工具中选择它。 在客户端上的 DevTools 实例上 选择“选择元素 ”，然后点击主机设备屏幕上的元素。

选择“元素 ”在第一次触摸后被禁用，因此每次想要使用此功能时都需要再次打开它。

重要

“元素”工具中的“事件侦听器”窗格在版本 1903 Windows 10为空。 这是一个已知问题，团队计划修复Windows 10版本 1903 的服务更新中的“事件侦听器”窗格。

步骤 4：将主机屏幕截屏到客户端设备

默认情况下，客户端上的 DevTools 实例已启用截屏，这样就可以在客户端设备上的 DevTools 实例中查看主机设备上的内容。 单击“ 切换截屏” 以打开或关闭此功能。

客户端上Microsoft Edge DevTools 中的“切换截屏”按钮

可以通过多种方式与截屏视频交互：

  • 单击将转换为点击，在设备上触发适当的触摸事件。
  • 计算机上的击键将发送到设备。
  • 若要模拟收缩手势，请在拖动时按住 Shift 。
  • 若要滚动，请使用触控板或鼠标滚轮，或者用鼠标指针滑动。

有关截屏视频的说明：

  • 截屏视频仅显示页面内容。 截屏视频的透明部分表示设备接口，例如Microsoft边缘地址栏、Windows 10或更高版本的任务栏，以及Windows 10或更高版本的键盘。

  • 截屏对帧速率产生负面影响。 在测量滚动或动画时禁用截屏，以便更准确地了解页面的性能。

  • 如果主机设备屏幕锁定，则截屏视频的内容将消失。 解锁主机设备屏幕以自动恢复截屏。

已知问题

  • “元素”工具中的“事件侦听器”窗格在版本 1903 Windows 10为空。 团队计划修复服务更新中的“事件侦听器”窗格，以Windows 10版本 1903。

  • Windows 10版本 1903 上，“应用程序”面板中的“Cookie”窗格为空。 团队计划将服务更新中的 Cookie 窗格修复为版本 1903 Windows 10。

  • “审核”工具、3D 视图工具、“设置”中的“模拟设备”部分和“元素”工具中的“辅助功能”树窗格当前未按预期工作。

  • 远程调试时，文件资源管理器不会从 “源 ”工具或 “安全 ”面板中的 DevTools 启动。