Take full-size screenshots of websites without any tools in Chrome
If you’re a web developer, you might have come across a situation where you need to take a full-size screenshot of a website. For instance, you might want to take a screenshot of a website to show it to your client or your team members.
Usually, you may reach for a browser extension or a tool to take a full-size screenshot of a website. But, what if you don’t want to install any extension or tool?
Well, you can take a full-size screenshot of a website without any tools in Chrome. Here’s how.
Taking screenshots using DevTools
To take a full-size screenshot of a website in Chrome, you need to follow these steps.
- Open the website in Chrome.
- Open the developer tools by pressing F12 or by right-clicking on the page and selecting the
Inspectoption or by pressing Ctrl + Shift + I.
- Next, in the developer tools, press Ctrl + Shift + P or Cmd + Shift + P to open the command palette.
screenshotin the command palette and select the
Capture full size screenshotoption.
Once you do that, you’ll see a full-size screenshot of the website in the
There are a bunch of other options available in the command palette as well. For example, you can take a screenshot of the current viewport, the visible viewport, the selected element, and so on.
Remember, this works best when you detach the developer tools from the browser window. Otherwise, you’ll end up with a screenshot that is not in your desired viewport.
👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!