Hands up if you have ever needed to take a screenshot of an entire webpage, not just what’s immediately visible on your monitor. Keep your hands up if you then proceeded to take screenshots of the webpage in sections, then used a photo editing program to stitch them together. Read on for a time-saving tip!
Google Chrome full-screen mode hides distractions on your desktop, including the bookmarks bar, menu buttons, open tabs, and the operating system clock and taskbar. When you use full-screen mode, Chrome occupies all the space on the screen. Follow me on twitch!A returning subject on this blog, how to automate device screenshots with Node.js and Chrome. This post will cover installation and running the script on either Mac OS or Linux. If you’re brave, you can use Windows too ? Update: A Chrome update actually broke the code for full page screenshots using Continue reading 'Taking Full Page Screenshots with Headless Chrome'. If you have a webpage that’s particularly difficult to take a full-screen screenshot of, even with the best extensions available in the Chrome Web Store, the console tool might be your best chance. While the tool isn’t the most convenient to access, you can rely on keyboard shortcuts to get to the console for the most part. I think it’s worth noting that you can also take full page screenshots in Chrome using the new Command Menu (you first need to have Dev Tools open to be able to open the Command Menu) by starting to type screenshot into the Command Menu and then select the option Capture full size screenshot from the auto completed list.
If you aren’t already aware, there are a number of options that will make this tedious task easier, such as using a standalone screenshot tool, a browser extension or a third-party web-based tool. While, all these options have their merits, they can cost you money or take just as much time as the first method.
Thankfully, there is a much quicker method. Instantaneous, in fact. And it doesn’t involve having to install browser extensions. It uses built-in browser tools, available in Firefox and Chrome.
Capture full page screenshot using Chrome’s Developer Tools
As of Chrome version 59, the Capture full size screenshot tool is included in the Developer Tools. There are two ways to access the tool:
- Using the Command Menu: this allows you to take a full page screenshot at the current desktop size.
- Using Device Mode: this allows you emulate various preset mobile devices or set a custom screen size that you can then take a full page screenshot of.
Using the Command Menu
Here’s how to instantly capture a full page screenshot using the Command Menu in Chrome:
- Open the Developer Tools.
You can do this by clicking the More icon (3 dots in the top right of the browser), then clicking More tools > Developer tools.
Alternatively, you can use the shortcut Alt + Command + I on a Mac or Ctrl + Shift + I on Windows/Linux/Chrome OS. - Open the Command Menu.
Click Command+Shift+P on a Mac or Control+Shift+P on Windows/Linux/Chrome OS. - Type “screenshot” in the Command Menu.
You will see the “Capture full size screenshot” option in the menu. - Select Capture full size screenshot.
Chrome will automatically save a full page screenshot in PNG format to your default downloads folder.
![Screenshot Screenshot](https://getalltech.com/wp-content/uploads/2020/01/Chrome-Full-Page-Screenshot-Images2.jpg)
Using Device Mode
Ultracompare 20 00 0 16 kilograms. Here’s how to instantly capture a full page screenshot using Device Mode in Chrome:
- Open the Developer Tools using the steps above.
- Turn on Device Mode.
You can do this by clicking on the Toggle device toolbar icon in the Developer Tools Toolbar
Alternatively, you can use the shortcut Command+Shift+M on a Mac or Control+Shift+M on Windows/Linux/Chrome OS. - Choose your device preferences (device type, dimensions and zoom level) in the Device Toolbar.
- Click on the More Options icon (3 dots in the Device Toolbar), then select Capture full size screenshot.
Chrome will automatically save a full page screenshot in PNG format to your default downloads folder.
Capture full page screenshot using Developer Tools in Firefox
Available since Firefox version 32, the Take a screenshot of the entire page tool has been available to capture full page screenshots. Here’s how to use it:
Chrome Screenshot Full Page Console Commands
- Open the Developer Toolbox.
You can do this by clicking the Open Menu icon (Hamburger icon in the top right of the browser), then clicking Web Developer > Toggle Tools.
Alternatively, you can use the shortcut Alt + Command + I on a Mac or Ctrl + Shift + I on Windows/Linux/Chrome OS. - Enable the Take a screenshot of the entire page option.
Do this by clicking on the Customize Developer Tools and Get Help icon (ellipsis icon on the right-hand side of Developer Tools), selecting Settings from the menu, then ticking the “Take a screenshot of the entire page” option under the Available Toolbox Buttons options.
This adds a camera icon to the developer tools. - Click on the camera icon in the Toolbox to take a screen capture of the entire page.
Firefox will automatically save a full page screenshot in PNG format to your default downloads folder.