Whenever I submit a PR for a UI change, I like to include a screenshot or two in order to aid the my teammates in reviewing the code, especially when it's CSS changes. Ideally there would be a Deploy preview, but not everything is running on Netlify (yet).
Usually I only need a screenshot of the section of the page that actually changed. So I hit Cmd+Shift+4 (on my Mac) and select the a section containing the UI. Boom screenshot. Well for now on, thanks to a tweet from Tierney Cyren, I can be more precise in my screenshot. In Chrome, Edge or any Chromium-based environment, I can get a screenshot of just the element in the DOM:
two quick things that I don't think enough people know about:
— pay essential workers like they’re essential (@bitandbang) April 24, 2020
1. there's a command palette in DevTools - CMD/CTRL + Shift + P
2. you can take screenshots of a single node from the palette pic.twitter.com/NpoZQpAquT
If you can't watch the video, here are the steps:
- Inspect the DOM element to highlight it in the Elements panel of the DevTools
- Press
Cmd/Ctrl+Shift+Pto pull up the DevTools command palette (also something new I just learned about!) - Choose "Capture node screenshot"
- Save the file
That's it!
But it gets even better because this process is even easier in Firefox. Once in the Element inspector, right-click on the element. There's a "Screenshot Node" option right there in the menu! 🎉
Now all of your PRs will get immediate 🚢 thanks to your beautiful screenshots. 😂
Keep learning my friends. 🤓