IDEAS |

Helpful Chrome Extensions for Front End Developers

I used to develop solely in Firefox, since an open source option is always my preference.

However, since a majority of web users are using Chrome now, I've switched. As such, all my examples and screenshots are going to be Chrome-based, but many of these extensions have Firefox equivalents. Internet Explorer users, you're just plain out of luck.

Before we dig in, I first need to preach the greatness of the SimpleExtManager extension. This makes enabling, disabling, uninstalling and organizing numerous extensions a piece of cake.

Browser Extension

Theming / Developing

Browser Resize

This allows you to quickly switch viewport dimensions. I know what you're thinking: "But pixel-perfect isn't a thing anymore!" And you’re right, but if there are any specific breakpoints you want to jump to, this lets you easily customize and jump to those sizes.

Browser Resize

Clear Cache

Adds a ton of granular cache clearing options.

Colorzilla

You could (maybe) hackishly use DevTools to grab the hex or RGB code of a color, but it's much easier to use this extension.

Drupal Template Helper

This adds Template suggestions to DevTools. It requires some config tweaking, but it's worth it!

Emmet LiveStyle

I've raved about this extension previously, but it's worth mentioning again in case you missed it.

ng-inspector for AngularJS

For Angular newbies like me, this helps you figure out what exactly you need to change, and where to change it.

Page Ruler

Whether a client is requesting pixel-perfect or you're just OCD (like I am), an old school ruler always comes in handy, and this one's my favorite.

Page Ruler

Viewport Dimensions

This extension shows your current viewport dimensions as you resize your browser. It’s helpful for troubleshooting when exactly something has broken (not that anything ever breaks in CSS, right?!)

Testing

Accessibility Developer Tools

This extension will add an Accessibility audit and an Accessibility sidebar pane in the Elements tab of your Chrome DevTools. It might be helpful to start with the audit that this extension provides, and then move onto the much more comprehensive WAVE Evaluation Tool (see below).

Accessibility Dev Tools

BrowserStack Local

This quickly opens a BrowserStack test session for your local sites.

WAVE Evaluation Tool

If you're following web accessibility best practices, this is a must-have extension. You can pick which WCAG level for which you'd like to conform and the tool will analyze and provide visual feedback regarding any accessibility issues with your site.

MultiLogin

Especially when dealing with a CMS, you may often need to see what something looks like or how it functions as a logged in/out user. This extension opens a new tab with a different session so you can do just that, without messing up your existing session.

MultiLogin

MultiPass

If your dev sites sit behind HTTP authorization credentials, this extension will automatically log in for you. Yes, you're only saving a few keystrokes, but I'm lazy and those keystrokes add up.

Organization & Focus

OneTab

Does the multitude of tabs you have open make your computer cry? Does it take you 5 minutes to find the right tab when you're trying to screenshare? If so, this one is for you! One click and OneTab collapses all your open tabs down to a single page. From there you can either organize them, close them, or leave them as-is.

Before 

OneTab

After

OneTab After

Spaces

This extension is perfect for isolating related tabs and dealing with context switching. Each browser window is a "Space", which you can name and switch between quickly with keyboard shortcuts. This is great for quickly toggling between projects, etc., and is very similar to Toby (see below).

Stylish

I have ADHD and visual noise tends to be detrimental to my focus. But sometimes, you HAVE to use sites that are noisy. In this case, you can use Stylish to easily add custom CSS and customize your site experiences, reduce noise, and set font preferences to enhance focus, etc.

Tab Modifier

This one may be a bit of an edge-case, but many of the tools Forum One uses, such as JIRA and Teamwork, allow for full customization. The favicon for both is our logo, which gets confusing when you have a bunch of pinned tabs with the same favicon. This extension allows you to change the favicon to whatever you want, edit the tab title, automatically pin it, etc.

Toby

As this is very similar to Spaces, it's really a matter of preference. Let's say you're writing a blog post and you have 10 tabs related to research for that particular post, 5 tabs for something else, etc. You can move all the research ones to a "Research" list, close them, and go back to them when it's time. (HT to Product Hunt for this one.)

All in all, the above Chrome Extensions are quick and helpful ways to easily pinpoint where tweaks need to be made or test that things are looking and working as they should. I hope my fellow front end developers find some of these extensions to be useful!