If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

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.

How to use Google Chrome Device Emulation feature

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:

    How to use Google Chrome Device Emulation feature_1

  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:

    How to use Google Chrome Device Emulation feature_2

    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:

    How to use Google Chrome Device Emulation feature_3

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

    How to use Google Chrome Device Emulation feature_4

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:

    How to use Google Chrome Device Emulation feature_5

  2. Media queries are color-coded as follows:

    How to use Google Chrome Device Emulation feature_6

    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:

    How to use Google Chrome Device Emulation feature_7

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

    How to use Google Chrome Device Emulation feature_8

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

    How to use Google Chrome Device Emulation feature_9

  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:

    How to use Google Chrome Device Emulation feature_10

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

How to use Google Chrome Device Emulation feature