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!
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:
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.
