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.
- 33 Chrome extensions for designers and devs (opens in new tab)
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.
- 10 really useful responsive web design tutorials (opens in new tab)
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 (opens in new tab)
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 (opens in new tab)
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 (opens in new tab)
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: