Notion app logo
Struggling to stay organized and effective? Learn to master your time and tasks with the Effectively Notion course!

Full Page Webpage Screenshots with Chrome DevTools

Learn how to take full page screenshots of a webpage using Chrome DevTools


Taking full-length screenshots of a webpage is useful for client work, keeping historical references of a website or when you want to have a webpage round-up gallery to show sites that you've found around the web.

In the past, if you needed to do this, you likely did it incrementally and stitched it together or installed a separate extension in your browser (most had varying results).

Recently when I was doing some mobile web development and checking how my site looked for various devices with Chrome DevTools, I noticed that Chrome has a baked in way of taking a full length screenshot!

  1. Open DevTools. In the application menu click "View", then "Develop", then Developer Tools (Alternatively you can save some clicks with cmd+option+i on a Mac). You should have a new pane that has tabs for "Elements", "Console", "Sources" and more and below that you will likely see the HTML of the page you're currently on.

How to open Chrome DevTools

  1. Toggle Device Toolbar. In the top left corner of the new pane, click the second icon from the left for "Toggle Device Toolbar". A new toolbar should open at the top of the browser's window with options to change the page to be emulate displaying different devices.

How to toggle device toolbar

  1. Take The Screenshot. In the new device toolbar, click the "More Options" button (3 vertical dots) in the far right corner and click "Capture Full Size screenshot".

Now to take a full-screen screenshot of a website with Chrome DevTools

Now you can take full size screenshots with ease and natively in the browser!

Photo of Chase Adams

Hey, I'm Chase. I help aspiring entrepreneurs and makers turn their ideas into digital products and apps.


Vector Arrow Scribbles
banner image for figma vector arrows scribbles

A figma community project of vectorized hand-drawn arrows.

Go To Figma
Vector Line Scribbles
banner for figma vector line scribbles

A figma community project of vectorized hand-drawn lines.

Go To Figma
Vector Shape Scribbles
banner image of figma vector shapes scribbles

A figma community project of vectorized hand-drawn shapes.

Go To Figma

Subscribe to my Newsletter

Every other week I publish the Curiously Crafted newsletter.

In it, I explore the intersection of curiosity and craft: the people who make stuff, what they make and the way they pursue the craft of making.


I'm on almost all social media as @curiouslychase.

The curious logo of Chase Adams: glasses and a bow tie.stay curious.