远程调试 Surface Duo 仿真器入门Get started with remote debugging Surface Duo emulators

本文将介绍从 Microsoft Edge 的桌面版实例远程调试 Surface Duo 仿真程序上 Microsoft Edge 应用的 web 内容。In this article, you walk through the process of remotely debugging your web content in the Microsoft Edge app on a Surface Duo emulator from a desktop instance of Microsoft Edge. 有关在 Surface Duo 设备上进行调试的信息,请遵循远程调试 Android 设备的指南。For information on debugging on a Surface Duo device, follow our guide for remote debugging Android devices.

开始之前Before you begin

运行Surface Duo 仿真程序前,先安装 Surface Duo SDKInstall the Surface Duo SDK before running the Surface Duo emulator. 有关详细信息,请导航到获取 Surface Duo SDKFor more information, navigate to Get the Surface Duo SDK.

步骤 1:导航到 edge://inspectStep 1: Navigate to edge://inspect

打开 Microsoft Edge 的桌面实例,然后导航到 edge://inspectOpen a desktop instance of Microsoft Edge, and navigate to edge://inspect.

桌面上 Microsoft Edge 中的 edge://inspect 页面

备注

如果 edge://inspect 页面无法识别 Surface Duo 仿真程序,请重新启动仿真程序。If the edge://inspect page does not recognize the Surface Duo emulator, restart the emulator.

步骤 2:启动 Surface Duo 仿真程序Step 2: Launch the Surface Duo emulator

启动 Surface Duo 仿真程序Launch the Surface Duo emulator. 请注意,仿真程序显示 2 个在仿真程序上运行的不同屏幕。Notice that the emulator displays 2 different screens running on the emulator.

Surface Duo 仿真程序

步骤 3:在 Surface Duo 仿真程序上将 web 内容载入 Microsoft Edge Step 3: Load your web content in Microsoft Edge on the Surface Duo emulator

在任一屏幕上,将 Surface Duo 仿真程序的“收藏夹托盘”上向上轻扫,以显示“应用抽屉”。On either screen, swipe up on the Favorites Tray of the Surface Duo emulator to display the Apps Drawer. 选择 Edge 以启动 Microsoft Edge 应用程序Choose Edge to launch the Microsoft Edge app.

Surface Duo 仿真程序上的 Microsoft Edge 应用

导航到想要在 Microsoft Edge 应用中调试的网站或 应用。Navigate to the website or app that you want to debug in the Microsoft Edge app.

步骤 4:从 Surface Duo 仿真程序调试 Web 内容Step 4: Debug your web content from the Surface Duo emulator

切换回 Microsoft Edge 的桌面实例。Switch back to the desktop instance of Microsoft Edge. 现在,edge://inspect 页面显示 SurfaceDuoEmulator以及在 Surface Duo 仿真程序上运行的打开的选项卡或 PWAs列表。The edge://inspect page now shows the SurfaceDuoEmulator with a list of the open tabs or PWAs that are running on the Surface Duo emulator.

edge://inspect 页面在模拟器上运行的 Microsoft Edge 应用程序中显示打开选项卡的列表

备注

如果在 edge://inspect 页上未显示 SurfaceDuoEmulator,请尝试在 Surface Duo 仿真程序上的 Microsoft Edge应用程序中打开或关闭选项卡。If SurfaceDuoEmulator is not displayed on the edge://inspect page, try opening or closing tabs in the Microsoft Edge app on the Surface Duo Emulator. 有关其他疑难解答步骤,请导航到 Android 设备的疑难解答部分For additional troubleshooting steps, navigate to troubleshooting section for Android devices.

从模拟器上运行的打开的选项卡列表中,在具有要调试的 Web 内容的选项卡上选择“检查”。From the list of open tabs running on the emulator, choose inspect on the tab that has the web content to be debugged. Microsoft Edge 开发工具将在新窗口中打开。The Microsoft Edge DevTools will open in a new window. 选择“切换截屏视频” (切换截屏视频t),从开发工具窗口中的 Surface Duo 仿真程序查看 Web 内容。Choose Toggle Screencast (Toggle Screencast) to view the web content from your Surface Duo emulator in the DevTools window. 现在可以使用 Microsoft Edge 开发工具在 Surface Duo 仿真程序上调试 Web 内容。You are now able to use the Microsoft Edge DevTools to debug your web content on the Surface Duo emulator.

使用 Microsoft Edge 开发工具在 Surface Duo 仿真程序的 Microsoft Edge 应用程序中调试 Bing

备注

如果 Microsoft Edge 应用在仿真程序中跨两个屏幕,截屏视频将反映应用程序的新尺寸,而不是铰链。If you span the Microsoft Edge app across both screens in the emulator, the screencast will reflect the new size of the app but not the hinge. 若要了解网站如何影响 Web 内容的布局,请使用 Surface Duo 仿真程序 ,而不是截屏视频。To understand how the hinge impacts the layout of your web content, use the Surface Duo emulator instead of the screencast.

其他资源Additional Resources

对于新的可折叠和双屏幕设备类,Web 是一个很好的平台,因为可以编写 HTML、CSS 和 JavaScript 一次,并且可以在单屏、双屏和可折叠设备上显示出色的外观。The web is a great platform for the new class of foldable and dual-screen devices because you may write your HTML, CSS, and JavaScript once and have it look great across single-screen, dual-screen, and foldable devices. 有关更多信息,请导航至以下其他资源,以开始为这些新设备构建 Web 内容。For more information, navigate to the following additional resources to get started building web content for these new devices.

联系 Microsoft Edge 开发工具团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标