You want to see how a page will look on a phone, but you're sitting at a laptop or desktop. Chrome's Device mode gives you a mobile viewport right inside the browser, no second device needed.
Open the page, go to the three-dot menu, choose More tools, then Developer tools, and click Toggle device toolbar. Pick a preset width or drag the Responsive edge, and turn the toolbar off when you're done.
In this guide, I have covered:
Contents
Watch the Video Guide
Prefer watching to reading? The video below runs through the same steps on a computer.
View the Mobile Site Layout on a Computer
You want to see how a page behaves at phone width, but you’re working on a desktop. Chrome can show you that without a second device. Device mode in Developer tools narrows the viewport and lets the responsive layout respond the way it would on a smaller screen.
To enable mobile site view in Google Chrome on the computer, open the page first, then work through these steps:
- Open the website you want to test in Google Chrome on your computer.
- Click the three-dot
menu in the top-right corner of Chrome. - Hover over More tools.
- Select Developer tools.
Developer tools opens beside the page. - Click the device icon in the DevTools action bar. Its tooltip reads Toggle device toolbar.
The page appears in the emulated device viewport.
You’ll know it worked when the page narrows and the DevTools toolbar shows the Dimensions control next to zoom. Chrome opens Device mode with Responsive already selected, so you can start dragging right away.
Choose a Responsive Width or Device Preset
Dragging the edge tells you how a layout flexes. A preset tells you what a specific screen width does. Which one you reach for depends on whether you’re exploring a design or reproducing a bug report.
When you only need to check how the layout responds, leave Dimensions on Responsive and drag the edge of the viewport. For a repeatable test, choose one of Chrome’s built-in viewport presets instead.
- Use Mobile S for a 320px-wide viewport.
- Choose Mobile M at 375px for a common phone width.
- Select Mobile L at 425px for a wider phone view.
- Try Tablet at 768px for a larger screen.
- Use Laptop at 1024px for a desktop-sized viewport.
A preset fixes the emulated width for that test. Switch back to Responsive when you want to drag the width freely again.
TIP: Switching between presets doesn’t reload the page. You can compare several widths against the same page load.
Adjust the Emulated Device and Test Conditions
Width is only part of the story. A page can behave differently under touch input, in landscape, or on a slow connection, and the same Device mode panel controls all three for the current tab.
- Set Device type to Mobile, Mobile (no touch), Desktop, or Desktop (touch).
- Turn on Show device frame to place the page inside a visual device border.
- Enable Show rulers to display measurements around the viewport.
- Click Rotate to change the emulated device to landscape.
- Turn on Show media queries to see where the page’s CSS breakpoints apply.
- Choose a CPU or network throttling preset to test the page under slower conditions.
Device mode is an approximation of mobile, not a phone. The page code still runs on your computer, so check touch-specific features and real-world performance on an actual device before you ship.
Return to the Normal Desktop View
Finished testing? Getting back to the normal view takes one click.
Click Toggle device toolbar again, or close Developer tools. Either one ends the emulation session and the page renders at full desktop width again.
Nothing reloads as a separate desktop version. The same page simply lays itself out at full width.
How This Differs From Chrome’s Desktop Site Option
Device mode and the Desktop site setting sound like opposites, and in practice they are.
The mobile viewport in desktop Chrome and the Desktop site setting on a phone solve different tasks. Device mode previews how a page renders in an emulated viewport. Desktop site asks the site for a desktop version on a mobile device.
Google’s Chrome help page on the Desktop site setting explains the mobile control. To make a page show its desktop layout on an Android phone, follow View Desktop Site layout in Google Chrome on Android.
On an iPhone or iPad the option sits in a different spot, so use View Desktop Site layout in Chrome on iPhone & iPad instead.
Device mode only changes the previewed viewport. It doesn’t touch browser permissions or a site’s stored data. If your problem is access rather than layout, start with the site information panel for that page.
Frequently Asked Questions
How do I enable mobile view in Google Chrome on a computer?
Open the three-dot menu, choose More tools, then Developer tools, and click Toggle device toolbar. Device mode starts with Dimensions set to Responsive.
Does Chrome’s mobile view load the actual mobile website?
No. Device mode emulates mobile dimensions and device conditions inside the desktop browser, but the code still runs on your computer. Use a real phone for final checks of touch-specific features and mobile performance.
How do I choose a specific phone width in Chrome’s device toolbar?
Use the Dimensions control to choose Mobile S (320px), Mobile M (375px), or Mobile L (425px). Keep Responsive selected if you want to drag the viewport width instead.
How do I turn off mobile view in Chrome?
Click Toggle device toolbar again, or close Developer tools. The page returns to normal desktop rendering and doesn’t reload as a separate desktop site.
Can I test touch behavior with Chrome’s device toolbar?
Set Device type to Mobile or Mobile (no touch) to compare touch and non-touch behavior. A physical device is still the only way to verify real gestures and device-specific features.
Hello! I use a device that is ran by an administrator, and am unable to access the “Developer Tools” section. Is there another way that I could access a mobile version?
The easiest way is to resize the browser window to adjust the resolution to mobile size.
First, exit the full screen or expanded mode, then drag the browser window’s left or right side to adjust it to the desired width.
How stop mobile version when clicking on hyperlink in Excel?
I have a set of facebook profiles listed in my Excel spreadsheet, the problem is that when I click on any profile, it opens up with both mobile version and the web version. I need to stop the mobile version so that when I click on the profile it only opens the web version.
P.S :
I tried different browsers (chrome, Mozilla, Opera, ets), but it’s all the same. I also tried to delete m.facebook.com/… from Chrome setting, but unfortunately this trick did not work.
Please note that this problem only happen with facebook profiles, but when trying other sites like google or any other site, it opens normally and only with web version.
please help me fix this problem!
Use www.facebook instead of m.facebook for desktop version.
So, there’s no way to stay on mobile mode without an extention app switcher? The code on the right gets in the way. But I see you can click the 3 dots in the DevTools area and click ‘undock into separate window’.
Yes – we can undock and continue mobile view in a separate window. However, the developer window will still be active. Maybe minimizing or hiding it should help from distraction.
I did exactly like this now want disable. Could you white about How to DISABLE Mobile Site View in Chrome Computer?
Click on the same device toggle button that enabled the mobile site view. Else, you can also close the developer tools window to turn off Mobile Site View in Chrome computer.