The very first time I expressed interest in learning how to modify the code on websites, my mentor exclaimed “well first, you need to get Firebug!” I had no idea what she was talking about, but googled Firebug nonetheless and installed my first browser extension. Ever since, Firebug has been a tool that I’ve used nearly every day either in my work as a developer or out of curiosity to inspect how other websites have been built. Very recently, it was announced that there will be no further development of Firebug, so I’m getting more cozy with my second choice browser inspector (Chrome’s native inspector). Firebug will always have a special place in my heart and I am still quite sad about its demise.
Browser extensions are little applications that add additional functionality to a web browser. This is analogous to how a plugin might extend the functionality of a WordPress site. I spend most of my time working in either Firefox or Chrome, depending on what tools I need to use in the moment. In Firefox browser extensions are called add-ons and you can search for and install them by clicking on the menu icon and then choosing “Add-ons.” In Chrome you can find and install browser extensions at chrome://extensions/.
I’ve tried out lots of browser extensions over time and most don’t stick around in my workflow. Web development is a craft and it’s important to use tools that support the workflow that works best for you. Which browser extensions have turned into indispensable tools in my toolbox? These are my favorites:
1. ColorZilla (Firefox and Chrome)
There are lots of browser extensions out there to inspect colors in websites and I have tried quite a few of them. At some point, Colorzilla became my favorite, mostly because it works in a way similar to the way the eyedropper works in Photoshop or the dearly departed Fireworks (design software that Adobe discontinued after its 2012 release) . When you hover over a site with the ColorZilla eyedropper activated, the tool shows you the RGB and hex value for the color as well as the HTML selector that is generating the color. There are also some built in tools for exploring related colors and generating CSS gradients.
2. MeasureIt (Firefox and Chrome)
MeasureIt is a really simple tool that enables a draggable ruler on top of any webpage that allows you to measure things or check alignment of elements on a page by providing a reliably horizontal or vertical rule. I have only used the Firefox version, but it appears the same developer has made an analogous tool for Chrome. I’ve seen other measuring tools out there and have also totally held up pieces of paper to my screen to make sure things are aligned. That being said, I’ve found that MeasureIt is generally the easiest tool to double check spacing and alignment.
3. WAVE Evaluation Tool (Chrome)
It’s our responsibility as developers to build websites that are accessible and the WAVE Evaluation Tool helps to automate discovery of common accessibility issues. This tool is not a replacement for manual testing, but when used in advance of manual testing it saves a huge amount of time. In addition to visual alerts to potential problem locations on a webpage, WAVE also tells you specifically why it flagged each item, which makes it infinitely easier to correct the issues that it has found.
4. Awesome Screenshot: Screen Capture and Annotate (Firefox and Chrome)
Awesome Screenshot is the newest tool on my list. I found it as I was looking for a new annotation tool after I learned that Skitch was being killed off by Evernote. There is a premium version of this extension, but thus far the free extension for Chrome has been all I’ve needed. In addition to allowing you to annotate your screenshots, Awesome Screenshot lets you take a screenshot of a full webpage, including what is hidden “below the fold.” I have found that the combination of a full page screenshot with annotation capabilities has been infinitely helpful in communicating with clients, project managers, and designers while collaborating on projects.
Though these are the most commonly used tools in my browser extension toolbox, I do regularly try out new extensions that look like they could be useful. I have found that it is really important to consistently evaluate my tools to make sure that I am working as efficiently as I can. What browser extensions do you use the most? Let me know in the comments!