Rik Kendell
Rik Kendell
Developer
12.03.15

5 Essential Browser Plugins For Developers

The built-in development tools in Chrome, Firefox and even Internet Explorer have made every web developer’s job that bit easier. From checking JavaScript errors and tweaking CSS, to investigating load-times and latency, as developers we make use of these on a daily basis. But what about other development tasks?

If there’s a task that needs doing then it’s almost certain that one of the hundreds of browser plugins or extensions will make it easier. Here are some of our development team’s most recommended.

PageSpeed Insights (by Google)

This 1st-party Chrome extension comes straight from Google and adds a tab to Chrome DevTools rather than a button along the top of your browser.

At the click of a button, the page is reloaded with PageSpeed Insights and you are presented with a list of possible improvements you can make, as well as pointing out things you’ve already done. The PageSpeed Insights plugin gives you a quick and helpful overview of how your website behaves and responds, and is definitely worth using through your development process.

You may pick up on a few small changes you can make that you had overlooked or not previously considered – after all, a website can never be too fast.

https://developers.google.com/speed/pagespeed/insights_extensions

Fangs Screen Reader Emulator

Designing and building a fancy layout is all well and good, but with websites there’s often a heavy focus on the aesthetics. It’s all too easy to forget about individuals who may use your site in other ways, including the visually-impaired. That’s where Fangs Screen Reader Emulator comes in.

This Firefox plugin emulates the way a partially-sighted user might interact with a website. Fangs shows the page as a transcript in the same way as a screen-reader, allowing you to quickly judge whether your site structure is suitable. Are your ‘alt’ tags and ‘title’ tags informative and appropriate? Does the ‘flow’ of the content make sense when output in a screen-reader? Now you’re able to find out without shelling out for a screen-reader.

http://www.standards-schmandards.com/projects/fangs/

Web Developer

At the risk of sounding like a geek, for me this browser extension is iconic; at one point every developer I knew used the Web Developer toolbar. It was such a familiar sight that seeing Firefox without this plugin installed was jarring.

Still useful even years after its introduction – and now available for Chrome as well as Firefox – Web Developer is not a one-trick pony. It allows you to turn JavaScript, CSS and images on and off with a click, clear your cookies, quickly validate your code and plenty more.

http://chrispederick.com/work/web-developer/

Dimensions

Designing and building websites can be tricky at the best of times, needing real attention to detail with one eye on the numbers in your dev-tools at all times. The struggle is real. Luckily, there are plenty of tools to ease the headaches, and often the simplest are the most useful.

Dimensions lets you measure elements and spacing with but a click of a button, drawing vertical and horizontal lines to show you what the numbers apply to. If an element looks a little off, or some margins look inconsistent, Dimensions is a quick way to see what’s amiss.

http://felixniklas.com/dimensions/

Secure Mail for Gmail (by Streak)

As we deal with sensitive data here almost every day, we’re always keen to find new ways to protect it. In a recent presentation on Data Security from Rob Yorke, our Group Development Director, the subject of transferring data was touched upon, and Rob recommended this Chrome plugin.

With Secure Gmail installed, a small icon appears next to the “Compose” button in Gmail, which allows you to send encrypted emails. The unpacking all happens on your machine, not on any email servers, keeping your contents safe from any potential prying eyes. To make it that bit more secure, you give the email an encryption password and an optional hint (or you can give them the password via phone, text or other method).

This plugin doesn’t take any effort to use beyond the initial installation, allowing you to easily add another layer to your data security.

https://www.streak.com/securegmail

Bonus! Evernote Web Clipper

This one isn’t specific to development, so think of it as a bonus for reading this far!

I find Evernote Web Clipper incredibly useful. Like a digital scrapbook, this Chrome plugin lets you ‘clip’ and save articles or snippets that you find around the web. While I use it for all sorts – recipes, articles I’d like to read when I have time or share with others – I get a lot of use out from it by saving posts and info on development techniques, software or other related content. Rather than clutter my bookmarks I just clip the content I want, give it a tag or two and come back to it when needed. Very handy!

https://evernote.com/webclipper/

SHARETweet about this on TwitterGoogle+Share on FacebookShare on LinkedIn
< Back to Culture