Take Screenshots With Unprecedented Accuracy in Chrome
Eyeballing screenshots is never 100% accurate.
Pretty much every device supports taking screenshots, and the shortcut is usually really easy to remember.
- For older iPhones it’s Home Button + Lock Button
- For newer iPhones it’s Volume Button + Side Button
- For Mac it’s
- I’m not an Android user but I assume it’s also just as easy
And on a computer, like a Mac, PC, or Chromebook, you have the option of taking screenshots that only cover a portion of the screen.
You’ll probably find that you take partial screenshots more often than you take full screen screenshots — especially when posting on social media or blogging, as there might be some sensitive information that you don’t want to show. Full screen screenshots can also take up valuable space.
And although the resulting partial screenshot looks fine, you can never get it to be exact. There will always be some extra space on the side, or it could be shifted a bit…
… eyeballing can only be so accurate.
I found this cool extension a while ago for Chrome. It’s called Element Screenshot, and it lets you take screenshots of any HTML element — resulting in unprecedented accuracy! Here’s how to use it.
1. Get it here ▾
Click “Add to Chrome”, then “Add extension”.
It can “read and change all your data on the websites you visit”, but I haven’t run into any privacy-related issues yet and it’s based on an open-source library here:
This is a Chrome extension which will screen capture any HTML element of your choosing. Click the camera icon in the…
It’s always good to look at what it says before hitting “Agree” or “Confirm” or “Add extension”, but for Element Screenshot it should be fine.
2. Go to a website ▾
You can go to any website you like. I’m going to go back to apple.com/mac.
Explore the world of Mac. Check out MacBook Pro, iMac Pro, MacBook Air, iMac, and more. Visit the Apple site to learn…
You might need to refresh the page so that Element Capture can be activated.
3. Enjoy! ▾
Usage is very simple.
- Press the camera icon
2. Click on the element that you want to screenshot…
3. … And the screenshot will open in a new tab.
To copy the image, just press
c (you don’t even need to press on the image!) To save the image, press
(those shortcuts were for Mac. Replace with
Ctrl if you’re on PC or Chromebook).
That’s it! Thanks for reading!