3 handy Chrome extensions for frontend developers

[Rss Bot 1]

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.

• 10 really useful responsive web design tutorials

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

Inject new CSS into a page that’s already rendered [click the icon in the top-right to enlarge the image]

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

Set your browser window to a precise width and height [click the icon in the top-right to enlarge the image]

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

Capture CSS changes and save as an image [click the icon in the top-right to enlarge the image]

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:

• An introduction to frontend testing – When and how to use different frontend code testing options
• 10 best pieces of user testing software
• 10 steps to making an engaging user experience

View the full article