How to take screenshots with Chrome DevTools
Chrome DevTools can capture more than the part of a page currently visible on screen. It can save a full page, one element, or an area you select, which is often all I need for debugging or documentation.
Open DevTools and then open the Command Menu:
- On Windows, press
Ctrl + Shift + I, followed byCtrl + Shift + P. - On macOS, press
Command + Option + I, followed byCommand + Shift + P.
Type screenshot to filter the available commands.
Pick what you want to capture
- Capture area screenshot
- Capture full size screenshot
- Capture node screenshot
- Capture screenshot
Capture full size screenshot is the useful one when the page is longer than the viewport. For a single component, select it in the Elements panel and use Capture node screenshot.
Chrome 89 also added a screenshot option to the element inspector’s context menu. If you already have the right node selected, that is the shorter route.
Enjoyed reading this?
If you found this article helpful, consider supporting my writing. Every little bit helps keep this blog going.
Related articles
- Kā apiet algoritmus ar RSS
Uzzini, kā ar RSS un XML plūsmām apiet sociālo tīklu algoritmus. Praktisks ceļvedis, kā izmantot ziņu agregatorus, lai sekotu Latvijas un pasaules medijiem un blogiem.
- Adobe Premiere Mobile pievieno rīkus YouTube Shorts veidošanai
Adobe un YouTube sadarbojas, lai atvieglotu video veidošanu ar jaunu rīku “Create for YouTube Shorts” lietotnē Premiere Mobile, padarot kvalitatīvu saturu pieejamu ikvienam.
- Lietoju GitHub Copilot Pro bez maksas
GitHub Copilot Pro bez maksas studentiem, skolotājiem un atvērtā koda uzturētājiem.