3 handy Chrome extensions for frontend developers
This free extension toolbox enables you to test out CSS edits.
Adding custom CSS rules to a rendered web page is a great way to test new selectors before committing them to a codebase – and the best way to test selectors in the browser is with a set of Chrome extensions.
Testing selectors in the browser is advantageous because it offers you an immediate look into whether or not your new selector has adequate specificity, how it will affect other elements in the document flow, and how it looks in the live context of the page.
But most of all, testing CSS in the browser is a fast way to prototype and share new design ideas.
Together, the three free Chrome plugins below give us a fast and tangible workflow for making quick preview screenshots of CSS changes to a page. We can test and preview colour changes, new typefaces, and adjust line and paragraph spacing before we actually modify the website.
01. User CSS
UserCSS gives us a window for adding new CSS rules to a page that has already been rendered by the browser. The chief advantage to User CSS over the default DevTools is that our CSS can be stored in a style sheet and is persistent between refreshes. Additionally, the plugin has a toggle button, making A/B screenshots a breeze.
02. Window Resizer
Window Resizer gives us presets that precisely set the browser window dimensions. It's helpful for making screenshots for slideshows and product screens, and for maintaining consistent sizes across many screenshots. It's also incredibly invaluable if you want to make screenshots of responsive designs.
03. Full Page Screen Capture
Full Page Screen Capture makes a full-page PNG screen capture of a webpage, from header to footer. It’s very simple to use: click the capture button and the plugin will generate a PNG image and open it in a new window.
While you're here, check out these related articles:
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.