How To Test Your Website Layout On Any Screen Size Using Google Chrome Dev Tool [2026 Guide]

I'm going to teach you how to test your website layout on any screen size using Google Chrome's developer tools. If you're a web developer or a curious learner eager to fine-tune your website's appearance across various devices, this guide will walk you through every detail.

First, you need to navigate to the web page you wish to test. Once you're there, open the developer tools panel in Chrome. This can be done easily by pressing F12 on your keyboard.

Don't worry if you're not familiar with the developer tools panel yet. It's incredibly user-friendly and meant to aid you in understanding how your website appears across different devices. If Chrome opens to a blank window instead of DevTools, you can fix a Chrome white screen on Windows and try again.

Chrome DevTools setup

Go to the page you want to test.
Press F12 to open Chrome DevTools.
Confirm the panel is visible at the bottom or side of your browser.

Enter device mode

Look for the icon that resembles a phone and a tablet in the top left corner of the DevTools panel.
Click it to toggle Device Mode.
Your current view transforms to simulate various screen sizes.

If the canvas turns gray while testing, see how to troubleshoot a gray screen in Chrome 139 before continuing.

Resize the viewport

You'll notice that a responsive toolbar has appeared.
By default, it is set to Responsive, which means you can freely manipulate the dimensions of your viewport.
Drag the side handles of the viewport with your mouse to see how your layout adjusts.

Imagine this as resizing a window on your computer screen.
It is intuitive and gives instant feedback on how your layout responds.

Type exact dimensions

If you have specific dimensions in mind, type the exact width and height values into the boxes at the top of the responsive toolbar.
This method is especially useful if you know the particular dimensions you want to verify.

Test with preset devices

If you want to see how your web page would look on specific devices, make use of the preset devices feature.
Click the Responsive drop-down menu located at the top of your screen.
You will find a list of popular devices like iPhone SE or iPad mini.

Select a device from the list and the viewport will instantly adjust to mimic that device's screen size and resolution.
Experimenting with these tools ensures your website looks sharp and works smoothly across devices.
It also empowers you to create a more user-friendly experience for everyone visiting your site.

Why this matters

This is a powerful feature at your fingertips, especially with the multitude of devices people use today.
If you keep encountering a blank page during browsing or testing, here is a quick way to fix the white screen issue in Chrome.

Final thoughts

There you have it, a simple yet thorough walkthrough of how you can test your website layout for any screen size using Google Chrome's developer tools.
Keep exploring, keep testing, and transform your website into a responsive masterpiece.