How to Create a Narrow Chrome Browser Window for Mobile Web Development

My “go-to” desktop browser for doing web development is the Chrome browser. However, it has one annoying problem for people like me who do responsive web development:  It won’t resize down to 320 pixels wide, the width of an iPhone.  With my Chrome browser on Windows, the minimum width is 500px. On Mac, the minimum is 400px.  This makes it a pain to quickly check mobile layouts during development. You can’t make the Chrome browser window thin enough!

How to Create a Narrow Chrome Browser Window for Mobile Web Development

Firefox, on the other hand, will get as thin as I need it to!  But, It’s inconvenient to have to use two different browsers during development.

Here are three ways to make your Chrome browser window narrow!

Solution #1: Launch a Resizable Chrome Window

My solution is to launch a narrow adjustable Chrome browser window in JavaScript. I made a script that does just that.  Just paste in the full URL (including “https://”), and it will launch in a 320px wide browser window!

This works on Chrome for Mac and Windows. During development, I launch this once, and refresh it using the F5 key.

Note, this assumes your browser scroll bar is 17px wide (it varies between browsers, but that’s what it is on default Chrome). The actual browser launched is 320+17px = 337px wide, resulting in a browser window that is 320px wide.

Solution #2: Chrome Dev Tools Mobile Button

Another solution is to use Chrome’s dev tools console and click the “mobile” icon in the upper left corner:

Chrome dev tools showing mobile icon

Click that icon and the corresponding Chrome window will show a narrow browser window. The downside is that it’s not dynamically resizable like the first solution is.

To enable DevTools in Chrome, click the 3-dot menu in the upper right corner of your Chrome window, then select More Tools -> Developer Tools or press the F12 key.

Solution #3 Chrome Developer Tools in Sidebar

Yet another solution using Chrome DevTools window is to bring up the DevTools window in the sidebar of your browser. When you do this, it squishes the website part of the browser and you can make it as thin as you want. Here’s what that looks like:

To move the DevTools window to the sidebar, click the 3-dot menu in the DevTools window, then select the “Dock to Right” icon as shown above.

5/5 - (14 votes)


is Senior Writer DZ-TECH, where he covers the world of technology, hacking, cybersecurity, surveillance and privacy.

Leave a Comment