Speed your development workflow with these Chrome extensions

A very popular browser choice among developers is Google Chrome. And a great but often underused feature of Chrome is its Extension Store. As a developer, you can use this resource to access a multitude of free tools that will help you cut down on some of the most tedious tasks in development.

After all, as rewarding and interesting that development may be, it’s still true that tasks such as browser testing and link testing can be very dull ways to spend huge chunks of time.

Development Extensions

These Chrome extensions will help you speed up your development workflow right from your browser.

Chrome Extension - Web Developer

Web Developer
Get the extension

If I could only install one extension, then this would be my choice. With this extension, a developer will be able to gain a lot of information on their project.

I find the most useful features of this extension is the ability to disable things like javaScript, cookies, CSS styles and images. I also find it very useful to outline elements based on their type. This could be floated elements and absolutely positioned elements as well as floated elements and headings.

I also really like how I can work with forms, this is really useful for when testing the forms I have built are working correctly. With the Web Developer extension, I can quickly complete mundane tasks like clearing form fields and checking and unchecking form fields.

Web Developer Checklist
Get the extension

I like my websites to be the best they can be, and for this reason, I keep the Web Developer Checklist as part of my toolkit.

The Checklist extension will test your website to make sure it is mobile worthy and passes SEO, accessibility and security essentials.

It is even possible to check the quality of code. However, I have my IDE also checking this for me as I write code based on Laraval Artisan standards.

Pesticide
Get the extension

I think the name for this handy, simple extension is perfect, sometimes when working with front-end development, the code issues can feel like a real bug hunt.

The purpose of this extension is to outline all CSS elements to see the placement on a page better and help to identify a problem which could otherwise feel like hunting down a pest in your code.

Browser testing – Browserling and IETab
Get Browserling
Get IETab

Testing in multiple browsers is definitely one of those tedious tasks mentioned earlier. The bad news is there is no getting away from browser testing; however, it’s definitely not as painful as it used to be and there are now extensions that mean you can do it all in one tab.

One such extension is Broswerling. This is a live interactive cross-browser testing service, and it provides cross-browser testing for web developers and web designers. Also, it provides quick access to all the most popular browsers on the most popular operating systems.

Link Checker
Get the extension

Much like browser checking, link checking is also an essential highly tedious task. The Chrome browser extension Link Checker has one simple but powerful purpose which is to make this tedious task a thing of the past.

Extensions for designers

Chrome Extension – Spectrum

Here are some of the best extensions for front-end designer to speed up real-world, everyday tasks.

WhatFont
Get the extension

The WhatFont extension in invaluable when it comes to identifying a font. Sometime when browsing the web I come across a website that uses terrific typography but determining what makes it so great is not always intuitive to developers and this extension makes that process so much easier.

Information can be found on type family and font size and, what’s more, it can help you find out if your typography find is available on Google API or even TypeKit if you prefer.

ColorZilla
Get the extension

If you find you frequently need to design a website around a specific color pallet, then this extension will be a great asset.

Often clients know they want their color scheme to match their logo or some other design work. Or even their existing website. What ColorZilla will do is use a color picker to select any shade in the browser and find the HEX or RGB code of those colors.

Spectrum
Get the extension

Color deficiencies are common but not widely accounted for by web designers. A color blind person may have a needlessly terrible time on a website you designed, but this can all be solved with a few adjustments to your design.

Spectrum is an extension that will allow you to see your website like a color blind person would do addressing the problem of wanting to help but not knowing how to.