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.
- Open Chrome Developer Tools.
- Click the Toggle Device Mode option near top left of the developer tools section.
- Choose Responsive from the dropdown menu at the top of the screen.
- 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!
Posted on 16 April 2016, in technical writing and tagged Chrome developer tools, screenshots, window size. Bookmark the permalink. 7 Comments.
This is so helpful — no more wasting time resizing my browser manually or stretching my screenshots! Thanks for posting.
Thanks Kaitlyn, I’m so glad it’s useful.
How to turn it off ?, When i do inspect element it shows in Toggle Device Mode
You can click the toggle device mode button/icon to turn the device mode off again.
Great tip! Is it possible to set the device orientation e.g. iPad landscape or to i have to enter the dimensions manually?
Thanks so much for this advice – it’s exactly what i needed! 😀
Pingback: איך להכין תמונות לפני שמעלים אותם לאתר - OOHMYWEB