How to take full page screenshot in Chrome without extensions

Learn how to take full page screenshot in Chrome without installing any extensions with built-in Developer Tools.

Earlier, capturing full page screenshot in Chrome was never easy. But, no more! With the latest version of Google Chrome (Chrome 59), you can easily capture full page screenshot in no time with built-in Developer Tools.

Capture full page screenshot using Chrome’s Developer Tools

There are two ways of doing this:

Using Device Mode
Using Command Menu

Using Device Mode

Here’s how to capture full page screenshot using Device Mode:

Make sure you are running the latest version of Chrome (Chrome 59) by selecting Chrome’s Main Menu (three vertical dots) in the top-right corner > Help > About Google Chrome or going to chrome://help. This will force refresh an update. After updating, click Relaunch.
Open DevTools by selecting Chrome’s Main Menu in the top-right corner > More tools > Developer tools. You can also open it by pressing Control+Shift+I in Windows & Linux or Command+Option+I in Mac. Alternatively, you can right-click on any part of the page and select Inspect to open DevTools from the menu displayed.
Toggle device toolbar to enter the responsive Device Mode. You can also press Control+Shift+M in Windows & Linux or Command+Shift+M in Mac while focusing the mouse pointer on DevTools window.
Specify your preferences (such as device type, etc.,) and select Capture full size screenshot in the More options menu.

Full page screenshot in Chrome using Device Mode. — Using Device Mode to capture full page screenshot.

Using Command Menu

Here’s how to capture full page screenshot using Command Menu:

Open Chrome’s DevTools using the above steps.
Press Control+Shift+P in Windows & Linux or Command+Shift+P in Mac to open the Command Menu.
Start typing screenshot and select Capture full size screenshot. That’s it.

Full page screenshot in Chrome using Command Menu. — Using Command Menu to capture full page screenshot.

31 comments:

Joe Smith July 20, 2017 at 6:57 am

If you have any elements that are sized using vh (viewport height), then the screenshot will be messed up.

Vijayakumar Soundararadjou AuthorJuly 21, 2017 at 7:32 pm
Hey Joe, messed up in what way?
Reply
1. Dimitry September 13, 2017 at 2:37 pm
  This way 🙂 https://s26.postimg.org/dwfhb3s5l/screenshot_482.png
  Basically //City photo// section should be sized as every other section. But it stretched 60% of the screen, covered all the sections which follow it and also somehow pushed sections above it off screen so that we do not see the first 40% of the website :S
  Reply
  1. Vijayakumar Soundararadjou AuthorSeptember 13, 2017 at 3:00 pm
    I get it! 🙂 When vh units are used, this won’t work 🙁
    Reply

Aurelio Jargas July 25, 2017 at 5:03 pm

Great post! Ctrl+Shift+P is what I was looking for. Did not know about it.

I should mention that despite appearing a "mobile" tag before the command, it also works to take screenshot in the normal desktop view (not in device mode).

Vijayakumar Soundararadjou AuthorJuly 26, 2017 at 7:59 pm
Thanks, Aurelio! Haha yes, it captures what is in the visible viewport.
Reply

Ar September 7, 2017 at 8:56 pm

Thanks, but actually if u type "screenshot" in console, it not show any capture commands.

Vijayakumar Soundararadjou AuthorSeptember 8, 2017 at 4:06 pm
You should try it in the Command Menu.
Reply
1. Ar September 17, 2017 at 12:53 am
  Thank u, but is the same.
  Reply

Balwant Mahara October 31, 2017 at 6:57 pm

Thanks, It's really helping.

Vijayakumar Soundararadjou AuthorNovember 1, 2017 at 5:30 pm
Glad it helped you! 🙂
Reply

Sally November 7, 2017 at 5:22 pm

NOT WORKING! All you said above only leads to Chrome capturing the VIEWABLE screenshot, and definitely NOT the entire page as you state

Vijayakumar Soundararadjou AuthorNovember 8, 2017 at 3:48 pm
Please read the steps and try again! 🙂
Reply
1. Mariia Chumakova January 26, 2018 at 1:58 am
  I tried it with some websites – it did work. But with utest.com not. It only captures the viewable screenshot and that's it…
  Reply
  1. Vijayakumar Soundararadjou AuthorJanuary 27, 2018 at 8:44 pm
    Maybe that site uses vh units or similar ones!
    Reply

Leon November 10, 2017 at 6:44 pm

Love this tip. I linked to it from this list of resources for people building an online business.
https://yourfirstproduct.com/info/resources

Vijayakumar Soundararadjou AuthorNovember 11, 2017 at 3:25 pm
Thanks! Your collection of resources is super useful 🙂
Reply

sri December 1, 2017 at 4:25 am

this is cool. I have had these browser extensions but it's much simple to capture.

Vijayakumar Soundararadjou AuthorDecember 5, 2017 at 12:28 pm
Yeah, it is! Just one step 🙂
Reply

Arie December 20, 2017 at 4:08 pm

Is it possible to take a screenshot in another format than png?

Vijayakumar Soundararadjou AuthorDecember 24, 2017 at 1:05 am
I am not sure about that. You are free to try online converter to change the format you want 🙂
Reply

sathish December 22, 2017 at 11:11 am

its mobile view
how to take desktop view
bro

Vijayakumar Soundararadjou AuthorDecember 24, 2017 at 1:01 am
For that, you need to click the three dots > Add device type > Desktop.
Reply

george dark January 8, 2018 at 8:07 am

The Ctrl-Shift-P method works, the Device Mode one doesn't; no visible way to "set preferences", no visible way to get the menu shown in the post. Chrome on laptop, haven't tried it on smartphone

Vijayakumar Soundararadjou AuthorJanuary 8, 2018 at 12:54 pm
Can you try it again? You need to select Toggle device toolbar (or Control+Shift+M in Windows & Linux or Command+Shift+M in Mac) to specify preferences and then select the device type from the Responsive drop-down menu.
Reply