How to use Google Chrome Device Emulation feature

This tutorial will show you how to use Google Chrome Device Emulation feature. This feature will help you to test your responsive designs by emulating different screen sizes and resolutions.

To enable Device Mode

1. Open your website, using Google Chrome browser.

2. Press F12 to open Chrome DevTools.

3. Turn on device mode by pressing the Toggle device mode icon. When device mode is enabled, the icon turns blue and the viewport transforms into a device emulator:

   

4. You can also toggle device mode on/off using the keyboard shortcut:

   Ctrl+Shift+M (or Cmd+Shift+M on Mac).

To use Screen Emulator

The screen emulator helps you test the responsiveness of your website, it has a variety of emulation presets.

1. Select a model from the preset dropdown to emulate a particular device:

   

   Each preset automatically configures device emulation in the following ways (sets the device resolution and pixel ratio, enables touch emulation, etc).

2. Alternate between portrait and landscape views by clicking the ‘Swap Dimensions’ icon. Select the ‘Fit checkbox’ radio button to ensure that the emulated screen remains fully visible inside your browser viewport:

   

3. To emulate a custom screen size, manually set the CSS pixel dimensions of the device in the width and height fields:

   

To Inspect Media queries

Device mode makes media queries readily accessible and easy for you to inspect.

1. To view the media query inspector, click the ‘Media queries’ icon in the upper left corner of the viewport. The DevTools detect media queries in your stylesheets and display them as colored bars in the top ruler:

   

2. Media queries are color-coded as follows:

   

   Blue: Queries targeting a maximum width;

   Green: Queries targeting widths within a range;

   Orange: Queries targeting a minimum width.

3. To preview screen styles, click a media query bar to adjust the emulator resolution and preview styles for the targeted screen sizes:

   

4. Right-click a bar to view where the media query is defined in CSS and jump to the definition in source code:

   

5. To turn off mobile emulation without exiting device mode, click the ‘Reset all overrides’ icon and refresh the page:

   

6. You can even change the Operation System version of mobile device.

   Open the DevTools emulation drawer by clicking the ‘More overrides’ icon in the top right corner of the browser viewport. Then, select ‘Network’ in the emulation drawer:

   

We hope this article was useful for you. Feel free to check our detailed video tutorial below.