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.
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.
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 though, there is a bug that means that some Angular Web apps will completely fail to load with this extension installed. 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.
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.
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.
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.
Leave a Comment
Your email address will not be published. Required fields are marked *