Device Emulation in Microsoft Edge Browser [Full Guide]

Testing your website or web app on various devices is essential to ensure it offers a consistent and responsive user experience across different screen sizes. Device emulation in the Microsoft Edge browser allows developers and designers to simulate how their site or application will appear on various devices, including smartphones, tablets, and desktop computers. By emulating devices, you can quickly check for responsiveness, layout issues, and performance across different resolutions without needing to physically test on each device.

In this guide, we’ll walk you through how to use device emulation in Microsoft Edge to streamline your testing process.

What is Device Emulation in Microsoft Edge?

Device emulation in Microsoft Edge allows users to simulate different mobile and tablet devices within the browser. This emulation helps developers and testers understand how their website or application will behave on various devices without needing the actual hardware.

Microsoft Edge's Device Mode mimics the screen size, touch interactions, and other characteristics of popular devices such as smartphones, tablets, and desktops. This enables you to see how your website will adapt to these conditions, including layout adjustments, media query breakpoints, and other mobile-specific behaviors.

Why Use Device Emulation in Microsoft Edge?

Here are a few key reasons why device emulation in Edge is so valuable for web development:

• Responsive Design Testing: Simulate how your site will behave across different screen sizes and resolutions to ensure a good user experience.
• Debugging Mobile Issues: Emulate touch events, screen rotation, and device-specific behaviors to troubleshoot problems.
• Network Simulation: Test how your site performs on various network conditions such as 3G, 4G, or Wi-Fi.
• User Experience (UX) Optimization: Check whether your content, images, and fonts are properly scaled and formatted for mobile devices.
• Efficient Development: Save time and resources by testing device-specific behaviors without needing physical devices for each test.

How to Emulate Devices in Microsoft Edge: Step-by-Step

Follow these steps to emulate devices in Microsoft Edge using the built-in DevTools.

Step 1: Open Microsoft Edge DevTools

1. Launch Microsoft Edge: Open the Edge browser on your device.
2. Open DevTools: Press Ctrl + Shift + I on Windows or Cmd + Option + I on macOS. Alternatively, you can right-click on the webpage and select "Inspect" to open the DevTools panel.

Step 2: Toggle Device Emulation Mode

1. Activate Device Mode: Once DevTools is open, look for the "Toggle Device Emulation" icon in the top-left corner of the DevTools window. It looks like a small phone and tablet icon.
2. Click the Icon: This will activate the device emulation feature.

Alternatively, you can press "Control + Shift + M" on Windows or "Command + Shift + M" on Mac to achieve same result.

Step 3: Choose a Device to Emulate

1. Select a Device: In the device toolbar that appears at the top of the browser window, select the type of device you want to emulate. You can choose from a list of predefined devices like the iPhone, Pixel, Galaxy, or other popular smartphones and tablets.
2. Custom Device: If you want to emulate a custom device, you can add your own dimensions and device pixel ratio by clicking on "Edit" and selecting "Add custom device."

Step 4: Adjust the Screen Size and Orientation

1. Resize the Viewport: You can resize the emulated screen by dragging the viewport handles or entering specific dimensions in the width and height boxes.
2. Orientation: To switch between portrait and landscape modes, click on the "Rotate" icon next to the device name in the toolbar.

You can also preview your site's look and feel across specific devices integrated into Microsoft Edge DevTools. These devices have a wide range of dimensions from an iPhone SE, Samsung Galaxy S5 all the way to Foldable devices like Surface Duo and bigger screens such as an iPad Pro.

Step 5: Test and Interact with the Emulated Device

1. Touch Events: You can simulate touch events such as swipes or taps using the mouse.
2. Test Responsiveness: As you interact with your page, you’ll see how elements such as images, buttons, and forms adapt to different screen sizes.
3. Zoom In/Out: You can zoom in or out on the emulated screen by using the zoom controls at the top of the DevTools window.

Microsoft Edge's Devtools also supports testing pages in different orientations (Landscape and Portrait)

• To rotate the device viewport to landscape orientation, select "Rotate" button as shown.

Step 6: Simulate Network Conditions

1. Network Throttling: In the DevTools panel, go to the "Network" tab and choose from network speed options like Offline, Slow 3G, Fast 3G, or Wi-Fi. This lets you simulate how your site behaves under different connection speeds.
2. Check Performance: Monitor the site’s performance on slower network connections, which helps identify bottlenecks or issues related to slow loading times.

Override Geolocation in Microsoft Edge

If your web application behaves differently based on the location of the end-user, you can emulate various geolocations using the geolocation-overriding UI in Microsoft Edge DevTools. This is particularly useful for testing location-based services or content customization.

Step 1: Open Microsoft Edge DevTools

• Launch Microsoft Edge: Open the Edge browser on your device.
• Open DevTools: Press Ctrl + Shift + I on Windows or Cmd + Option + I on macOS. Alternatively, you can right-click on the webpage and select "Inspect" to open the DevTools panel.

Step 2: Access the Sensors Panel

• Click on the three dots in the top-right corner of DevTools.
• Select More tools and then choose Sensors to open the Sensors panel.

Step 3: Select a Preset Location

• In the Sensors panel, select one of the preset locations from the dropdown menu.

Step 4: Enter a Custom Location

• To test a custom location, select Other and manually enter the latitude and longitude coordinates of your desired location.

Step 5: Simulate Location Unavailability

• To simulate a scenario where location information is unavailable, select Location unavailable from the dropdown menu.

Set the User-Agent String in Microsoft Edge

Testing your web application based on different User-Agent strings is crucial for ensuring it functions properly across various browsers and devices. You can use Microsoft Edge DevTools to emulate different User-Agent strings and test how your web app behaves with these variations.

Step 1: Open Microsoft Edge DevTools

• Launch Microsoft Edge: Open the Edge browser on your device.
• Open DevTools: Press Ctrl + Shift + I on Windows or Cmd + Option + I on macOS. Alternatively, you can right-click on the webpage and select "Inspect" to open the DevTools panel.

Step 2: Navigate to Network Conditions

• Click on the three dots in the top-right corner of DevTools.
• Go to More tools and select Network conditions.

Step 3: Disable Default User-Agent

• Uncheck the Use browser default checkbox next to the User agent section.

Step 4: Choose a Predefined User-Agent String

• Select Custom from the dropdown menu to choose from a list of predefined User-Agent strings for various browsers and devices.

Step 5: Enter a Custom User-Agent String

• If you need a custom User-Agent string, enter it into the Enter a custom user agent field.

By changing the User-Agent string, you can test how your application behaves across various devices and browsers.

Set User-Agent Client Hints for Device Emulation

User-Agent Client Hints enable developers to simulate specific device characteristics in more detail. This allows for better testing and optimization of web applications based on the precise device and browser characteristics.

Step 1: Open Microsoft Edge DevTools

• Launch Microsoft Edge: Open the Edge browser on your device.
• Open DevTools: Press Ctrl + Shift + I on Windows or Cmd + Option + I on macOS. Alternatively, you can right-click on the webpage and select "Inspect" to open the DevTools panel.

Step 2: Access Device Settings

• In the DevTools panel, go to Settings > Devices.

Step 3: Add a Custom Device

• Click on Add custom device in the Emulated Devices panel and expand the User-agent client hints section.

Step 4: Set Device Name

• Enter a unique name for the device in the Device Name field (e.g., “GeeksforGeeks”).

Step 5: Adjust Device Settings

• Modify the Width, Height, and Device Pixel Ratio as per your testing requirements.

Step 6: Set User-Agent Client Hints

• Complete the following fields:
  • Brand and Version: Example: Edge 117
  • Full Browser Version: Example: 117.0.2045.43
  • Platform and Version: Example: Windows 11.0
  • Architecture: Example: x86
  • Device Model: Example: Galaxy Nexus

Step 7: Add the Device

• Click Add to save your custom device. It will now appear at the top of the Emulated Devices panel.

This feature gives you a granular level of control for testing how your web application behaves on specific devices with precise configurations.

How to Emulate Dual-Screen Devices in Microsoft Edge

Testing for dual-screen devices like the Surface Duo is made easy with Microsoft Edge's device emulation. By simulating dual-screen devices, you can ensure your web application adapts to these devices' unique layouts.

Step 1: Open Microsoft Edge DevTools

• Launch Microsoft Edge: Open the Edge browser on your device.
• Open DevTools: Press Ctrl + Shift + I on Windows or Cmd + Option + I on macOS. Alternatively, you can right-click on the webpage and select "Inspect" to open the DevTools panel.

Step 2: Activate Device Mode

• Click on the Toggle Device Toolbar icon (phone and tablet icon).

Step 3: Choose a Dual-Screen Device

• From the top bar, select a dual-screen device like the Surface Duo.

Step 4: Toggle Dual-Screen Mode

• Click on the Dual-Screen Mode icon in the toolbar to switch between single and dual-screen views.

This allows you to simulate how your web app would look and behave on devices with dual screens, ensuring your design is optimized for such platforms.

How to Emulate Foldable Devices:

1. Open DevTools: Open Microsoft Edge DevTools as described above.
2. Enable Foldable Mode: In the Device Mode, select a foldable device (like Asus Zenbook Fold) from the device list.
3. Adjust Posture: Set the device to Continuous (flat) or Folded (angled) to simulate different screen orientations.

Common Use Cases for Device Emulation

1. Mobile-First Development: Emulate various devices to design websites with mobile-first in mind, ensuring your pages load quickly and are fully responsive.
2. Performance Testing: Simulate network throttling to see how your site performs under slow connections, ensuring your site is optimized for performance across all devices.
3. Cross-Browser Testing: Use emulation to see how your website behaves across different browsers, especially when working on projects that need to be compatible with multiple devices and operating systems.
4. Debugging: Quickly identify and resolve issues related to device-specific behaviors, such as elements that don’t scale correctly or features that don’t work well on mobile.

Conclusion

Device emulation in Microsoft Edge is a powerful tool for web developers and designers, allowing you to efficiently test your website’s responsiveness without switching between physical devices. By using the Device Emulation feature in the Developer Tools, you can quickly simulate different device resolutions, orientations, and network conditions, helping you catch issues early in the development process. Whether you're testing mobile-first designs or making sure your site performs well on tablets and desktops, device emulation can save you time and streamline your web testing in 2025.