There are hundreds of Chrome Extensions available to make your browsing and development experience easier. I’m not going to concentrate on the end user experience here – instead I’ll point out the kind of tools that make my life easier as a developer. Tools that allow me to get information faster, to diagnose problems and to deliver better product to my clients.
In this post I’ve split the Chrome Extensions up into the following categories:
- Search Engine Optimisation (SEO)
- Design Tools
- Developer Tools
An easy-to-use Chrome Extension that quickly analyses a page and provides an in-depth report about how you can improve your webpage display, load speed, SEO ranking and much more.
Accessibility Developer Tools by Google
This Chrome Extension runs an audit on the page to check for Accessibility compliance and makes suggestions on how to improve.
In this day and age when the requirement for accessible websites is written into law, it’s a really useful tool.
ColorZilla from colorzilla
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies. ColorZilla, one of the most popular Firefox developer extensions with over 5 million downloads is finally available for Chrome!
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. And it can do so much more…
Page Ruler by wrakky
This Chrome Extension lets you draw a ruler to get pixel dimensions and positioning, and measure elements on any web page. It displays the width, height and position.
This might not seem much, but if you’re trying to grab a layout or find the the width of a column, it’s invaluable.
Fontface Ninja is a Chrome Extension you can install in your browser to recognize, try, and download any font on the Internet.
Select any line of text that appears on a web page, roll over it with FontFace Ninja activated, and it gives you the name, size and line spacing.
Content management technologies, versions, frameworks, analytics tools and much more are uncovered easily with this Chrome Extension.
I’ve used this extension in Chrome and Firefox for ages. I couldn’t do my job without it.
Adds a toolbar button with various web developer tools. From HTML and CSS validation, to outlining, responsive testing, plugin and code framework disabling/enabling, this Chrome Extension is immensely powerful.
Adobe Edge Inspect by Adobe
The Adobe download site is here
Although it’s not really just a Chrome Extension, but more a combination of Desktop Application, Device Application and Chrome Extension, Adobe Edge Inspect allows you to see how your website truly appear and perform on mobile devices.
It also allows you to display and debug your device-centric code very easily.