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:

Chrome 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.

Chrome Developer Tools

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.

Chrome Developer Tools

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).

Chrome Developer Tools

That’s it. Happy screenshotting!

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 16 April 2016, in technical writing and tagged , , . Bookmark the permalink. 2 Comments.

  1. This is so helpful — no more wasting time resizing my browser manually or stretching my screenshots! Thanks for posting.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: