Edit

Device emulation

  • Article

In the Edge DevTools: Browser tab, the Device Emulation toolbar on the bottom enables you to simulate different environments:

Browser preview in the extension with emulation tool bar showing

To reproduce the UI shown here, see Opening DevTools by right-clicking an HTML file in Opening DevTools and the DevTools browser.

Emulate Devices dropdown menu

In the Emulate devices dropdown menu, you can select from a number of different devices, or the default option of Responsive. When you select a device, the viewport resizes to the correct measurements and simulates the touch interface. For example, there are several emulated iPhone layouts:

Browser preview in the extension showing the web product in an emulated phone layout

Width and Height dropdown menus

To change the viewport dimensions, click the Width and Height Width and Height icons dropdown menus:

Width and Height dropdown menus

Rotate button

Click the Rotate button (The Rotate button) to rotate the viewport between portrait and landscape orientation:

Viewport rotated to landscape orientation

Emulate CSS Media Features button

Use the Emulate CSS media features button (Emulate CSS media features) to:

  • Emulate CSS media queries.
  • Test how your product looks in print mode.
  • Switch between dark and light mode.
  • Emulate forced colors.

Browser preview in the extension showing the web product in forced color mode

Emulate Vision Deficiencies button

Click the Emulate vision deficiencies (The Emulate vision deficiencies button) button to test the user experience of the current webpage with different visual deficiencies. This button lets you test your product in a blurred mode, or in different color deficiencies:

Browser preview in the extension showing the web product in a blurred emulation

See also