chrome extensions

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)
  • Accessibility
  • Design Tools
  • Developer Tools

SEO:

SEO & Website Analysis by woorank

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:

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.

Design Tools.

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

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.

Developer Tools

Wappalyzer by wappalyzer

Wappalyzer is a browser extension that uncovers the technologies used on websites. It detects content management systems, eCommerce platforms, web servers, JavaScript frameworks, analytics tools and many more.

Content management technologies, versions, frameworks, analytics tools and much more are uncovered easily with this Chrome Extension.

Web Developer toolbar by Chris Pederick

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.

Edge Inspect is an essential application for web developers and designers who need to preview their content across multiple mobile devices. Wirelessly pair multiple iOS and Android devices to your computer, grab screenshots from any connected device, and see real-time results from changes to HTML, CSS, and JavaScript.

It also allows you to display and debug your device-centric code very easily.

 

 

Blog Categories