How do I screenshot a webpage using Chrome and no plugins

Let's say you want to screenshot an entire web page at a specific size. I often do this to embed them in a device mockup of a laptop or mobile phone to create marketing materials.

But you need to get a decent screenshot of your site and at the right dimensions. Fortunately you can do this in Google Chrome with no additional extensions. 🤗

1. Open the Dev Tools

In the top right of Google Chrome, select the menu, go to More Tools and select Developer Tools. You can of course use the hotkey if you wish.

2. Select the Toggle device toolbar button

When active it will allow you to simulate the responsiveness of your site based on a range of profiles. For us, we can use it to put the website at a specific size and access the screenshot option.

3. Set the size you want your screenshot to be

You can use one of the predefined sizes such as an iPhone, iPad, Galaxy, etc. Or you can select Responsive and enter the specific dimensions you need.

4. Capture Screenshot

In the top right of the preview area is another menu which you can then select Capture screenshot. This will save the file to your computer. You can of course select Capture full size screenshot if you want the entire page including the contents below the scroll.

Now that you have your image, you can use it as you wish. In this case, I can insert it into the placeholder of a device mockup PSD file.

If you want to discover a system to keep your notes in a single place and organise them atomically for easier recall, then consider checking out my book Atomic Note-Taking.