Take screenshot in Chrome, Firefox, Edge without any extension

You found something on a web page and you want to take screenshot of the same in your favorite browser(Chrome, Firefox or Edge). Earlier you required to install extension in individual browsers for this job or buy a specialized tool like Snagit. Since browsers have evolved over time this functionality is integrated in the core itself, you just need to know how to access and use it.

Lets start with Chrome, the most used browser.

Take screenshot in Chrome

Open DevTools with keyboard shortcut Ctrl+Shift+I or by clicking three dots and choosing More tools -> Developer tools.

Hit Ctrl+Shift+P to run command

Look for screenshot commands

Capture part of a page

Choose the option “Capture area screenshot” if you want to select the area of the page you want to capture. Selecting this option will change the mouse cursor so that you can select the area and once you release the mouse it will capture and download the shot as png image.
Here is an example of area screenshot

Capture full page with scroll

“Capture full size screenshot” will capture full page with scrolling.
Here is how a full size screenshot looks

Capture node

This option is for advanced users and can be useful if you know how to select a HTML element from Chrome DevTools. First you have to go to Elements panel and select the node. In example below I want to capture the highlighted paragraph.

Once you are done with selection of desired element. Hit Ctrl+Shift+P and choose the “Capture node screenshot” option. Chrome will capture the selected node and download the image as follows:

Capture visible are of the page

The last option “Capture screenshot” will capture only the visible area of the page without scrolling.
Here is an example

Take screenshot in Firefox

Firefox offers simpler option than Chrome as you don’t have to interact with DevTools and all options are integrated in UI itself.

Click … in the address bar and select “Take a screenshot” option from menu

All options to capture different areas of the page are present in the same screen.

Just choose the appropriate option and you are good to go.

Take screenshot in Edge

Once you are on your page. Hit Ctrl+Shift+M or click “Add Notes” icon from menu bar.

This will open a new toolbar with different options to capture, mark or add notes to your page. If you just click save icon, it will capture full page and save to OneNote.

If you want to take capture part of the screen then choose clip option.