The best Chrome extensions for Front-end web developers

Posted on

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 #

Link

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 #

Link

ColorZilla

Adds a colour picker tool. Great for matching CSS values to bitmap images etc.

Google Analytics Opt-out Add-on (by Google) #

Link

Google Analytics

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 #

Link

Image Size Info

Right-click on an image to get the file size info. It also displays the original and displayed dimensions.

Lighthouse #

Link

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

Link Checker

Scan the current page for broken links.

Pesticide for Chrome #

Link

Pesticide for Chrome

I use this everyday. Super helpful for working out CSS issues with padding and margins.

Web Developer #

Link

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 #

Link

checkbot

A fantastic service which scans your site for SEO, web speed and security checks.

Multi-Browser Screenshots #

Link

Web Developer

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.

You might also like

Optimizing Content for Lite Mode on Chrome for Android

Skip loading data-heavy JavaScript and Google Fonts for users on low bandwidth

Using the Web Share API in Chrome for Android

A quick look at the new API for sharing on the web