How to Use Device Mode in Google Chrome

Device Mode is a responsive design testing tool built into Google Chrome and other Chromium-based web browsers such as Microsoft Edge and Opera.

Responsive design is the technique of making sure that websites work well on all screen sizes, screen densities, web browsers (all versions on all operating systems), and with all input methods (e.g. touch, mouse, keyboard, and screen reader). Responsive design must also take users’ preferences into account (e.g. their light/dark mode preference and reduced motion preference) and the quality of their internet connection.

Google Chrome’s Device Mode makes it easier for web developers to test most of these. Let’s see how.

Opening Device Mode

Unlike Firefox, which allows users to open ‘Responsive Design Mode’ with a single keyboard shortcut, Chrome requires users to open DevTools first (ctrl + shift + I on Windows or command + option + I on macOS). You can also open DevTools from the main menu by navigating to “Customize and control Google Chrome → More Tools → Developer Tools”).

DevTools will dock to the right by default, giving you more vertical space to work with. This is ideal because you’ll likely be focusing on mobile testing.

Next, click on the “Toggle device toolbar” (ctrl + shift + M on Windows or command + shift + M) icon in the DevTools panel to open Device Mode.

Choosing a Device Preset

As you can see from the Device Mode toolbar, the first option is a dropdown that lets you choose a specific device to simulate. Choosing a device from this dropdown will make Device Mode simulate the device’s width, height, and Device Pixel Ratio (DPR). When a device isn’t being simulated, the “Responsive” option becomes active.

If there’s a device that you’d like to simulate and it doesn’t appear in the list of options, click on “Edit…” at the bottom of the list.

A panel where you’ll be able to customise which options appear in the list will appear on the right, replacing DevTools.

Alternatively, you can also click on the tabs under the Device Mode toolbar to quick-resize the viewport to common screen widths such as “Mobile S - 320px”, “Tablet - 768px”, and “Laptop - 1024px”.

Specifying Custom Viewport Dimensions

If you’d like to specify custom viewport dimensions, you can do so by typing them into the “Width” and/or “Height” input fields. When focused on either of these fields, you can use the up and down arrow keys to increment/decrement the value by 1px (hold shift to increment/decrement the value by 10px). If the Height field is left empty, the height will expand to fill any available vertical space (this is useful for when you only want to test websites on various screen widths).

If you’d rather test on various screen sizes by resizing the viewport manually, simply drag its bottom side, right side, or bottom-right corner handles. With this method, you’re essentially trading specificity for speed and convenience.

Quick-resizing and dragging are the two methods that you’ll likely use the most, due to how easy they are.

Adjusting the Zoom Level

After the Width and Height input fields, the next option is the “Zoom” level. The options are 50%, 75%, 100%, 125%, and 150%. You’ll want to use smaller zoom levels (e.g. 50% and 75%) when testing on larger screen sizes so that you can observe the entire viewport unobstructed (however, when the “Auto-adjust zoom” option is checked, you probably won’t need to change the zoom level manually).

Simulating Slow Devices

After the zoom options there's the throttling options, which should say “No throttling” by default. Throttling is used to simulate websites on devices with slower CPUs and internet connections. Chrome’s Device Mode is easier to work with than Firefox’s Responsive Design Mode in this regard, offering just 3 simple options — “Mid-tier mobile”, “Low-end mobile”, and “Offline” (the latter of which mostly applies to Progressive Web Apps, of course).

Switching Device Orientation

And finally, the last option in the Device Mode toolbar is “Rotate”, which toggles the orientation of the viewport. This feature will not only swap the width and height of the viewport, it’ll also respect any orientation-based CSS media queries that’ve been set.

Although not many users use websites in landscape orientation, it doesn’t hurt to optimise websites for landscape anyway (just in case).

More Options

Additionally, there’s a “More options” icon at the right-most end of the Device Mode toolbar. Although these options aren’t as common, they’re still very useful. Let’s take a look at what they do and when to use them.

Show Device Frame

The first option in the list is “Show device frame”. Not all devices have frames, but for the ones that do, this option will wrap the viewport inside a visualisation of the device for added realism when testing.

Show Rulers

“Show rulers'' will reveal pixel-based rulers that run alongside the top and left sides of the viewport, ideal for measuring things when the need arises. This is particularly useful for optimising the area above the fold, which is a critical region on most web pages due to how impatient users are today.

Add Device Pixel Ratio

“Add device pixel ratio” adds the “DPR” setting to the Device Mode toolbar. Unless your device is set to “Responsive”, this setting can’t be customised — otherwise, the options are “1”, “2”, or “3”.

Use this option to test DPR-related media queries, and more importantly, check that images are being served at the correct resolution. For example, devices with a DPR of 2 (that can squeeze 2 pixels into every point, for better display quality) will require images to be served at double-size (sometimes referred to as “2x” or “@2x”). You’ll know when they’re not because the images will appear blurry.

Add Device Type

“Add device type” also adds new options to the Device Mode toolbar. These options include “Mobile”, “Mobile (no touch)”, “Desktop”, and “Desktop (touch)”, which essentially enable us to switch between mouse and touch simulation. These options affect both JavaScript events and CSS states (e.g. CSS’s :hover pseudo element won’t work when touch simulation is active).

Capture Screenshot

If you’ve ever wanted to screenshot a live website for any reason, “Capture screenshot” is the best way to do it. It’s especially useful for screenshotting bugs and other concerns that you can then document so that they can be addressed by you or somebody else later, using the screenshot for added visual context.

“Capture screenshot” only captures the viewport.

Capture Full Size Screenshot

“Capture full size screenshot” captures the entire webpage, including the area below the fold.

Reset to Defaults

“Reset to defaults” will reset all Device Mode settings. This is useful for when too many settings have been set and you’d simply like to start from scratch.

Close DevTools

“Close DevTools” will close Device Mode, but also DevTools as well. The only way to close Device Mode without closing DevTools is by using the keyboard shortcut (ctrl + shift + M on Windows or command + shift + M on macOS) or by clicking on the “Toggle device toolbar” icon in DevTools.

Conclusion

Chrome’s Device Mode is a terrific tool for testing responsive websites. Although it’s somewhat comparable to Firefox’s Responsive Design Mode (RDM), Google Chrome has a larger market share and allows web developers to rapidly switch between common screen widths such as “Mobile S - 320px”, which gives it a slight edge over its competitors.

However, Polypane and Sizzy are both decent options too. Both of these web browsers are specifically designed to help web developers test responsive websites, and have a number of features that other web browser’s don’t. They’re both worth a look, at least.

Either way, remember to test in all web browsers — Firefox, Edge, Opera, and of course Google Chrome — since they all interpret front-end code in different ways. This includes all relevant web browser versions across all relevant operating systems.

Responsive design testing helps to provide a great experience for all users, and doesn’t require as much work as you’d think.

Frequently Asked Questions

Are website builders easy to use?

One of the easiest ways to build a website is with a website builder. Using a website builder doesn't require any programming and coding skills.

What are the hosting options with a website builder?

Most website builders offer a free plan with a free domain, but your name will go after the company's name. To get any address you like, you will need to purchase the domain name on your own.

How do I choose a design for my website?

One of the most important things when creating a website for your art is the design. Even though your pieces of art might be amazing, people will leave if your site is hard to navigate. This is why it’s important that the site is easy on the eyes and easy to navigate.

What are the best web builder tools?

Some of the best web builder tools are Wix, Squarespace, Weebly, Webnode, Webflow, Jimdo, Duda, GoDaddy Websites, Strikingly, Site123, Webstarts, and much more!