Copyright © 2019 GSA Pte Ltd. All rights reserved.

Taking a Pixel-Perfect Screenshot on Chromebook

Updated: Mar 26, 2018




An old saying goes - "A picture is worth a 1,000 words." - couldn't be more relevant. We have all experienced the frustration of trying to explain how something isn't looking right or not working on the screen. Inevitably you will contact the Technical Helpdesk to explain the problem or issue and a common response is: "Can you send us a screenshot?". Alternatively, you might want to capture part of a screen that you might want to include in your email or document to further elaborate on something.


"Screenshot" is the term used to describe the action of capturing your computer desktop or anything shown on your computer screen to a static image file.


Screenshots can be very helpful when you want to demonstrate something that would be difficult to explain in words.


Here are just a few examples of situations where a screenshot can be useful:

  • Describing steps to perform a certain actions

  • Focusing on certain areas that you would like to comment on

  • In technical support troubleshooting to show an error message or software issues

Screenshots are also useful to save snippets of anything you have on your screen that cannot be easily printed. You can use this feature for things you want to refer to later, but you won't necessarily need a printed copy of the image or information.


You don't need special software to take a picture of your screen because screenshot functionality is already built into Chromebooks.


CAPTURING SCREENSHOTS


Let’s say you need to take a snap of your entire screen. To do this you press the ‘Ctrl’ and ‘Window Switcher’ keys at the same time:

If you just want to capture a specific area of the screen just add shift to the key CAPTURING SCREENSHOTS, like so:

COPYING SCREENSHOTS

Chrome OS doesn’t save screenshots to the clipboard like Windows does when the “Print screen” button is pressed. If you’d like to simply copy a screenshot (for insertion into an image editor, for example), watch the notification that appears above the system clock. Click the “Copy to clipboard” button, then press Ctrl+V when you want to paste it.

FINDING YOUR SCREENSHOTS


Once the image is captured, you can find the image saved in your “Downloads” folder under the “Files” App. Typically the file will be named.

EDITING SCREENSHOTS

The screenshots captured by Chrome OS are ready to share, but if you want to do a little more with them, you should familiarize yourself with Chrome OS’s built-in image editor.

Open the Downloads folder, double-click your screenshot to open it in the image viewer, then click the pen icon in the bottom right corner of the window to enter edit mode. Tools for cropping, rotation, and brightness adjustments will appear at the bottom of the window.

When you’re done, click the pen icon again to finalize your edits. If you do not want to overwrite the original image, make sure you uncheck the checkbox at the bottom left hand corner called “Overwrite Original”. Any edits you make will then be saved in a separate file.


FULL WEBPAGE SCREENSHOTS

Say you would like to capture an entire web page, you won’t be able to do so using the regular steps describe previously. To do so, you’ll need to install a Chrome Extension from the Chrome Web store.


Step 1: Go to the Chrome Web store and search for "Fireshot" in the search box.


Step 2: Select the "Take Webpage Screenshots Entirely - Fireshot" extension and install it by clicking on the blue “Add to Chrome” button.


Step 3: After installation, click on the Screen Capture button on the Chrome toolbar and select Capture Whole Page or use the keyboard shortcut, Ctrl+Alt+H.


Step 4: You'll see Chrome scrolling down to capture the whole page and once finished, an options bar will display above the Web page that allows annotations, sharing, and saving the capture.


Step 5: Similar to the previous methods described in this article, the captured image can be found in the downloads folder.


Extra Tips for Developers

In Chrome Version 62,You can now take a screenshots or of a specific HTML node using the Chrome Developer Tools.


To take a screenshot of a specific HTML node:

  1. Select an element in the Elements panel.Figure 1. In this example, the goal is to take a screenshot of the blue header that contains the text Tools. Note that this node is already selected in the DOM Tree of the Elements panel.

  2. Open the Command Menu.

  3. Start typing node and select Capture node screenshot. DevTools downloads a screenshot of the selected node.

  4. Figure 2. The result of the Capture node screenshot command