How To Take Pixel-Perfect Screenshots (no extensions required!)
Tags: todayilearned, beginners, webdev, coding
Published: 2020-05-17 20:31:01


Today, let me show you how to take pixel-perfect screenshots...just using your browser!

{% youtube 1zvLGf7pWjU %}

There are multiple times in your daily job that you might take screenshots of a given website. 

Sometimes, you need the full-size version of the website. 
Other times, you might want a pixel perfect version of a given element in that website.

What if you want to take a screenshot of the navbar or that cute button that you found on a website?

One option could be to add one (or more) of these Chrome Extensions that let you take screenshots of a given website. 
Most of the time, they only consider one of the use cases, so you might end up with multiple extensions in your browser.


Well...

##### What if I tell you that you don't need any extensions for taking pixel-perfect screenshots and the tools you need are already available in your browser?

_Yes, your browser has already the tools you need._

Let me show you how you can do it using your Chrome DevTools.

1. **Open the Chrome DevTools**
2. **Open the Command Menu** in the Chrome DevTools
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o2yku46lj1wh965w4b4v.png)
3. **Write "Screenshot"**: some options will appear to be selected.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nylf9s00kzqxy8dm16by.png)

4. Select **Capture full-size screenshot** or **Capture Node Screenshot** based on if you want the screenshot of the entire webpage or just an element of it.

That's it! No third-party extensions, no downloads, just your browser and you can take pixel-perfect screenshots!

I hope this video was useful to you and if so, click that like button and subscribe to my Youtube Channel! <3


{% youtube 1zvLGf7pWjU %}

⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀
### ABOUT THE AUTHOR
Domenico is a tech lead and software developer with a passion for design, psychology, and leadership. 
If you need help with software development, you need consultancy for your technical challenges or you need a leader for your software team or just want to collaborate online, feel free to contact me!

![Follow me](https://images.unsplash.com/photo-1576259222107-6c9767685742?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80)


### FOLLOW ME

Do you know that I have a YouTube channel? [Subscribe!](http://bit.ly/YT_DOMENICOSOLAZZO)

Where can you find me?

**Youtube:** [Domenico Solazzo's Channel](http://bit.ly/YT_DOMENICOSOLAZZO)
**Instagram**: [domenicosolazzo](https://www.instagram.com/domenicosolazzo/)
**Linkedin**: [solazzo](https://www.linkedin.com/in/solazzo/)
**Medium**: [domenicosolazzo](https://medium.com/@domenicosolazzo)
**Facebook**: [domenicosolazzo](https://www.facebook.com/domenicosolazzo.labs/)
**Twitter**: [domenicosolazzo](https://twitter.com/domenicosolazzo)
**Snapchat**: [domenicosolazzo](https://twitter.com/domenicosolazzo)
**Github**: [domenicosolazzo](https://github.com/domenicosolazzo)
**Website**: [https://www.domenicosolazzo.com](https://www.domenicosolazzo.com)
**Dev.To**: [https://dev.to/domenicosolazzo](https://dev.to/domenicosolazzo)
**Hashnode**: [https://hashnode.com/@domenicosolazzo](https://hashnode.com/@domenicosolazzo)