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:
Cmd/Ctrl+Shift+P
to pull up the DevTools command palette (also something new I just learned about!)