Device emulation stands as an important feature within the DevTools of modern browsers. It enables developers to replicate various device characteristics and further optimize web applications. In this article, we’ll dive into the subtle details of utilizing device emulation in Microsoft Edge’s DevTools section, offering an innate understanding of its functions and applications.
Through the emulation of various devices, developers can inspect how their websites and apps perform and function on different screen sizes, network speeds, and other specific attributes of a device that contribute to the overall end-user experience. Microsoft’s Edge browser has integrated a robust set of tools for developers to do exactly this for their web apps.
Accessing the Device Emulation in Microsoft Edge DevTools:
- Launch Microsoft Edge and navigate to the webpage you wish to inspect.
- Click on the three-dot icon in the top right corner of the browser.
- A menu will pop up click on the “More Tools” options.
- Click on the Developer Tools option at the bottom.
Alternatively, you can use shortcut key “Control + Shift + I” on Windows or “Command + Shift + I” on Mac to open the Devtools directly.
Toggle Device Toolbar: Click on the “Toggle Device Toolbar” icon in the top-left corner of the DevTools window. This will turn on the device emulation mode.
Alternatively, you can press “Control + Shift + M” on Windows or “Command + Shift + M” on Mac to achieve same result.
Simulate a mobile viewport:
To evaluate the responsiveness of your page on different screen sizes, you can adjust the viewport by dragging the side handles to your desired dimensions. You can also enter specific width and height into the top bar.
Selecting preset device sizes:
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.
Set Orientation of the ViewPort:
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.
Throttle the network and CPU:
Not every visitor of your web app has a good network and fast-enough resources necessarily. As such, Microsoft Edge DevTools facilitates us with the option to render and test your web apps under your desired network and CPU limitations.
To access this feature, choose the throttling section in the top bar as shown below.
You can choose the preset testing situations namely No throttling, Mid-tier mobile, Low-end mobile and Offline.
If you are not able to see “Throttle list“, try expanding the width of your Device Toolbar.
Override Geolocation:
If your web application behaves differently based on the location of the end-user, you can emulate the different geolocations using geolocation-overriding UI.
1. Go to DevTools (…) > More tools > Sensors.
2. On the Sensors panel, to select one of the preset locations from the dropdown menu.
3. To enter a custom location, select Other and enter the coordinates of your custom location.
4. To test how your page behaves when location information is unavailable, select Location unavailable.
Set the user-agent string:
Testing the behavior of your application based on the user agent string of a mobile device, use the Network conditions panel to provide different user agent strings.
1. Select Customize and control DevTools (…) > More tools > Network conditions.
2. Next to User agent, un-check the Use browser default checkbox.
3. Select Custom to select from a list of predefined user agent strings.
4. To enter your own user agent string, enter the string in Enter a custom user agent.
Set user-agent client hints:
If your web application employs user-agent client hints, use the Emulated Devices panel to set user-agent client hints.
1. Right-click in any webpage and then select Inspect.
2. Select Settings > Devices.
3. In the Emulated Devices panel, select Add custom device and expand user-agent client hints.
4. Type a unique name in the Device Name text box such as “GeeksforGeeks“.
5. Accept the default values or change Width, Height, and Device pixel ratio as needed.
6. Set user-agent client hints as specified:
- Brand and Version, such as Edge and 117.
- Full Browser Version such as 117.0.2045.43.
- Platform and Version such as Windows and 11.0.
- Architecture such as x86.
- Device model such as Galaxy Nexus.
There are no mandatory values in user-agent strings. You can change or edit any field you wish to.
7. Lastly, click “Add“. The new device will display at top of Emulated Devices.
Emulate dual-screen and foldable devices:
Microsoft Edge Devtools also supports the emulation of Dual-screen devices and Foldable devices to test and preview different aspects of your web application.
Currently, it supports the following dual-screen and foldable devices:
- Surface Duo
- Samsung Galaxy Fold
1. Simulate the Mobile Viewport in Edge DevTools, as shown above in this article.
2. Under preset device sizes, select “Surface Duo“.
3. When emulated, you can observe that a “seam” (space between two screens) is also rendered for better visualization.
Conclusion
DevTools acts as a useful and resourceful testing suite leaning towards the needs of Developers. Some of the many more tasks you can accomplish using Microsoft Edge’s DevTools are :
- Emulating and testing on other browser environments.
- Display media queries
- Show Rulers on screen for scale of viewport.