February 23, 2015

If you're not using Google Chrome as a front-end web developer, you're missing out. Not only is Chrome the fastest rendering browser and supported by some of the best developers in the world, it also has some of the most polished extensions available on the web.

Based on my individual experience and suggestions from others, I've put together a list of my top 5 essential extensions for any front-end developer who wants to improve their speed and quality of work.

1. Window Resizer

Window Resizer is becoming a more and more important tool as more people take to the web on their mobile devices. The extensions let's you change your browser's screen size on the fly to either preset device sizes or custom sizes defined by the user. This becomes immensiley useful when optimizing responsive layouts for the the most popular handheld devices.

2. Rulers & Guides

If you have any familiarity with Photoshop, you're probably used to having guide-lines available to help you position and line up multiple on-screen objects. Rulers & Guides is just that, an extension that lets you drag down guide-lines vertically and horizontally to get pixel perfect design. The only catch is that Rulers & Guides isn't an official extension, it's a JS library. Get it here.

3. Clear Cache

Clear Cache is my favorite extension to click on when on all else fails. Cookies or cached images causing you grief? A single click on Clear Cache will solve all your problems. Be sure to check out the customization options to limit what does and doesn't get dumped.

4. JSON Viewer

Not to be confused with the similarly named "JSON View" extension, JSON Viewer displays all your JSON request pages into a nice tidy, nested format. Multiple color schemes and options are available that give this extension an edge over comparable ones. Absolutely crucial even if you work with JSON on the rare occasion.

5. Live Reload

Live reload isn't quite as easy to implement as the rest of the extensions on this list, but depending on your work, it is one of the most useful. Live reload is both part extension and software, letting you load your project files into the program and using the extension to auto refresh any of your CSS changes in realtime on the browser. This is fantastic for any CSS adjustments you need to make without having to jump back and forth between multiple screens or refreshing. It also works for frameworks like Rails and Node.js with a little bit of research.