Set size of browser inner window for screenshots in Chrome

I need to set the size of my browser’s inner window, so that I can take screenshots that fit into a specific area and have consistent dimensions. After doing a bit of searching and experimenting, I found that you can do it nicely with Chrome Developer Tools. This is handy, because Developer Tools are a standard part of the browser. There’s no need for any add-ons.

Here’s how to set the dimensions of the inner window (viewport) in Chrome.

In short

1. Open Chrome Developer Tools.
2. Click the Toggle Device Mode option near top left of the developer tools section.
3. Choose Responsive from the dropdown menu at the top of the screen.
4. Edit the dimensions, which are also at the top of screen, right next to the dropdown.

The longer version

The screenshots show Chrome version 49.0.2623.110 m.

1. Open Chrome Developer Tools.

Press Option+Command+J on a Mac, or Ctrl+Shift+J on Windows, or open Chrome’s hamburger menu and choose More Tools > Developer Tools:

The Chrome Developer Tools panel opens in your browser. By default, it opens either at the right-hand side or at the bottom of your browser window. It can also open as an independent window. I have mine set to open at the bottom.

2. Click the Toggle Device Mode option near top left of the developer tools section.

The icon for Toggle Device Mode looks like a mobile device snuggling up to a larger screen.

3. Choose Responsive from the dropdown menu at the top of the screen.

When you’re in “toggle device” mode, a dropdown menu and editable screen dimensions appear at the top of the window. Make sure the dropdown menu is set to Responsive.

4. Edit the dimensions, which are also at the top of screen.

The dimensions are editable when the dropdown is set to “Responsive.” You can also set the relative size (100% in the screenshot).

That’s it. Happy screenshotting!