Get Started with Remote Debugging Surface Duo emulators

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. For information on debugging on a Surface Duo device, follow our guide for remote debugging Android devices.

Before you Begin

Install the Surface Duo SDK before running the Surface Duo emulator. For more information, see Get the Surface Duo SDK.

Step 1: Navigate to edge://inspect

Open a desktop instance of Microsoft Edge, and navigate to edge://inspect.

Figure 1

The edge://inspect page in Microsoft Edge on the desktop The edge://inspect page in Microsoft Edge on the desktop

Note

If the edge://inspect page does not recognize the Surface Duo emulator, restart the emulator.

Step 2: Launch the Surface Duo emulator

Launch the Surface Duo emulator. Notice that the emulator displays 2 different screens running on the emulator.

Figure 2

The Surface Duo emulator The Surface Duo emulator

Step 3: Load your web content in Microsoft Edge on the Surface Duo emulator

On either screen, swipe up on the Favorites Tray of the Surface Duo emulator to display the Apps Drawer. Choose Edge to launch the Microsoft Edge app.

Figure 3

The Microsoft Edge app on the Surface Duo emulator The Microsoft Edge app on the Surface Duo emulator

Navigate to the website or app that you want to debug in the Microsoft Edge app.

Step 4: Debug your web content from the Surface Duo emulator

Switch back to the desktop instance of Microsoft Edge. 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.

Figure 4

The edge://inspect page displays a list of the open tabs in the Microsoft Edge app running on the emulator The edge://inspect page displays a list of the open tabs in the Microsoft Edge app running on the emulator

Note

If you do not see SurfaceDuoEmulator on the edge://inspect page, try opening or closing tabs in the Microsoft Edge app on the Surface Duo Emulator. For additional troubleshooting steps, see the troubleshooting section for Android devices.

From the list of open tabs running on the emulator, choose inspect on the tab that has the web content to be debugged. The Microsoft Edge DevTools will open in a new window. Choose Toggle Screencast Toggle Screencast to view the web content from your Surface Duo emulator in the DevTools window. You are now able to use the Microsoft Edge DevTools to debug your web content on the Surface Duo emulator.

Figure 5

Using the Microsoft Edge DevTools to debug Bing in the Microsoft Edge app on the Surface Duo emulator Using the Microsoft Edge DevTools to debug Bing in the Microsoft Edge app on the Surface Duo emulator

Note

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. To understand how the hinge impacts the layout of your web content, use the Surface Duo emulator instead of the screencast.

Additional Resources

The web is a great platform for the new class of foldable and dual-screen devices because you can write your HTML, CSS, and JavaScript once and have it look great across single-screen, dual-screen, and foldable devices. For more information, see these additional resources to get started building web content for these new devices.