How to take screenshots in Google Chrome

PublishedAugust 16, 2022

•1 min read

How to take screenshots in Google Chrome

I am 17 years old and a young passionate and self-taught frontend web developer and have an intention to become a successful developer. I usually write about JavaScript and Web Development and share some tips in the articles.

Originally published on my blog

Do you know, that Google Chrome has an impressive hidden feature that will blow your mind?

Today, we will look into taking screenshots of specific elements and long screenshots of the whole web page.

Now no need for any third-party extensions for taking screenshots in Google Chrome.

Do you know, that Google Chrome has a hidden command menu?

Command meun

Screenshot of a specific element

Right-click and inspect the element that you wish.
Press cmd + shift + p or ctrl + shift + p
Search screenshot
Click Capture node screenshot

Capture node screenshot

Long screenshot of the whole page

Right-click and inspect the element that you wish.
Press cmd + shift + p or ctrl + shift + p
Search screenshot
Click Capture full-size screenshot

Area selection screenshot

Right-click and inspect the element that you wish.
Press cmd + shift + p or ctrl + shift + p
Search screenshot
Click Capture full-size screenshot

Thank you for reading

Follow me on Twitter

Liked my content? Buy me a coffee to fuel my work. Thanks for reading!

#chrome-extension #tutorial #accessibility

8 views

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

What is a slug and how to create one?

A slug is a piece of text that is attached to the end of a URL (after the backslash "/") that is unique and locates the specific page of a website. The use of a slug can provide dual benefits for a website. Firstly, it can improve the website's SEO p...

May 18, 20233 min read65

What is a slug and how to create one?

How to read a CSV file in Python using Pandas?

To read a CSV file in Python using pandas, we need to use read_csv the method in Pandas. Step 1: Import pandas to the file import pandas as pd Step 2: Use read_csv method to read a CSV file df = pd.read_csv('file_name.csv') Tada! You have s...

May 18, 20231 min read8

How to read a CSV file in Python using Pandas?

No JavaScript Required: Adding Dark Mode to Your Website with CSS

Dark mode has become an essential accessibility feature for websites, providing a visually comfortable experience for users in low-light environments. In this article, we will guide you on how to add dark mode to your website using CSS without the ne...

Mar 8, 20231 min read20

No JavaScript Required: Adding Dark Mode to Your Website with CSS

Debugging Front-end Apps: Make It Easier with These Simple Techniques

The term "debugging" indicates that it involves eliminating or getting rid of "bugs" and errors in the code. Debugging is a crucial step in building software that involves identifying and resolving the bugs in the software’s source code. Debugging ca...

Feb 25, 20236 min read60

Debugging Front-end Apps: Make It Easier with These Simple Techniques

Style number likes Social media with Javascript

All the big social media sites format their numbers like 12.3M or 1.2B: To format the numbers from 19223324 to 19M, we don't need to use any third-party API, or npm package, we just need to write the following: Just joking, we won't be using this h...

Nov 21, 20221 min read15

Style number likes Social media with Javascript

D

Dhairya Shah

119 posts

How to take screenshots in Google Chrome