The best Chrome extensions for Front-end web developers
Contents
Chrome’s built-in Dev Tools provide a wide range of tools to help build and debug issues with the HTML, CSS, JS etc. But for productive web development there’s about 10 extensions that I use a lot.
CodeCopy
Useful little time-saver. This adds clipboard.js to Stack Overflow, GitHub, Gist, MDN, Medium, NPM and more. See a snippet of code you want to copy? No need to select the text manually, just click the button to copy to the clipboard.
ColorZilla
Adds a colour picker tool. Great for matching CSS values to bitmap images etc.
Google Analytics Opt-out Add-on (by Google)
This is great for instantly blocking your own visits to sites from appearing in your sites traffic. Note: also available for nearly all other major browsers .
Image Size Info
Right-click on an image to get the file size info. It also displays the original and displayed dimensions.
Lighthouse
Google’s performance, accessability, SEO and best practises plugin is now built directly in to Chrome Dev tools, but the extension on the store is a slightly newer version (2.7.0 at time of writing) with a few more audits . The team are continually working on improving this with monthly updates. Essential - don’t launch a new site without testing with this.
Link Checker
Scan the current page for broken links.
Pesticide for Chrome
I use this everyday. Super helpful for working out CSS issues with padding and margins.
Web Developer
I’ve used this extension for what must be about 15 years. Packed full of useful tools, many of which are unavailable in Chromes dev tools. I often miss the persistent toolbar which was present in an earlier version of the Firefox plugin though.
Checkbot
A fantastic service which scans your site for SEO, web speed and security checks.
Multi-Browser Screenshots
An extension I created for quickly testing webpages across a selection of common browsers and devices, including IE 8/9/10/11, Nexus 6, Nexus 9, iPad Air (iOS 8.3) and more.
