Share this
As developers, we spend a lot of time in browsers. Whether we’re checking our code throughout the build, performing QA, or even analysing existing websites, we’re always clicking around the web, looking at how things are made and getting new ideas.
We’ve put together a selection of browser extensions are our absolute go-to’s.
MeasureIt
We regularly use MeasureIt to check our alignment and the height/width of page elements. It’s an absolute lifesaver when CSS is playing a few tricks on us – when the alignment is a couple of pixels out, but our math is just right.
ColorZilla
When it comes to colour matching and generating CSS gradients, we couldn’t ask for a better tool – ColorZilla‘s interface is simple and intuitive, the features are beyond what we could ask for from an eyedropper, and best of all? It keeps a colour library of all your recent searches – gone are the days of a colour being one or two shades out! Precision, precision, precision.
Wappalyzer
Occasionally, we’ll come across a site that we’re really impressed by, and we’ll want to have a little look behind the scenes – Wappalyzer allows us to view the full tech stack used on any website. From content management systems and frameworks to server software and analytics tools, Wappalyzer detects it all.
BugHerd
This is the big one! BugHerd is our internal bug tracking tool – we perform rigorous QA on all sites that are sent out the agency’s doors, and as a result, all members of our team are using it one capacity or another – from developers, to project managers, to social media managers. We absolutely swear by it, and you can find out all about it one of our previous posts.
BugHerd Plus
We supplement BugHerd with the BugHerd Plus extension – it’s a great addition to an already incredible tool, which automatically attaches screenshots to all bugs logged, which makes for easy tracking on those hard-to-explain bugs that you can never seem to replicate (especially when you need to!).
Clear Cache
Clear Cache is a timesaver – rather than taking the traditional steps to clear a cache, this extension works quietly in the background, allowing us to focus on the task at hand, rather than navigating through menus and dealing with pop ups. It allows for thorough customisation, allowing the user to determine how much data you want to clear.
We absolutely swear by it – and it’s incredibly handy for our clients that are regularly checking their staging links for updates.
DevTools Autosave (Chrome)
All developers (and most digital designers) are well aware of how invaluable DevTools is when it comes to building a website. While it’s great to find those little bugs and making live in-browser changes, one of the it’s bigger downfalls is that once a page is refreshed, you’ll lose all those adjustments (which can be a killer if you haven’t been updating in your text editor as you go).
Never fear, though! DevTools Autosave is everything we could’ve asked for – any changes made to a site’s CSS and JS will be saved to it’s very own source file. Absolute timesaver.
And last but not least? Right off the back of DevTools Autosave, we couldn’t end this post without mentioning DevTools itself. Although it isn’t an extension, we’ll spend the vast majority of our time inside Chrome’s Dev Environment.
Are there any plugins that we haven’t mentioned that you think we should be using? Let us know!
