In this article, we're going to talk about the browser and extensions that most of the devs in our agency use. Your setup is incredibly important to your workflow, and by incorporating some of these solutions into your own life, you may be able to become more efficient and impactful.
By far and large, the most popular web browser in our agency is Firefox Developer Edition. There are several reasons that we use this:
Also, because we're serious about speed for our clients, the performance and memory tools are used when developing for Isotropic, and running SpeedOpp services.
Finally, the built in screenshot smart snaps to divs, and is helpful when requesting feedback, capturing inspiration, or writing blog articles.
The most important extension that we use is called Workona. This is also one of the newest additions to our "stack", and something that all team members use.
For individual users, it's a powerful tab manager, which suspends any ongoing processes on tabs that aren't active. This seriously decreases browser memory usage, and allows us to have a ton of open tabs at one (I currently have 81 open). Tabs are categorized into workspaces, which help us keep individual projects and work isolated.
It also helps us collaborate. Similar to Google Docs for tabs, users can hop into any workspace, instantly load all relevant tabs (called resources), and get to work.
Because it works on Firefox and Chrome, devs can choose the best browser for them, while still being able to share workspace.
(Note: That's an aff link. Use code the Isotropic Discount "26937CD7" to get 10% off.)
This is the second most important extension. It's a complete toolkit for frontend developers, and helps when trying to understand how a website is built. There are tons of features that will seriously speed up any workflow, including:
The inspect tool is the best feature. It helps augment the devtools that come with a browser, honing in on specific elements and displaying all applicable information.
BuiltWith grabs the public info from that service, and helps see what tech stack a competitor is using.
This is a paid extension, that currently costs about $20 (works on both Chrome and Firefox). Definitely worth it based on the sheer amount of time it saves us. It's also replaced several standalone extensions that we were using, like Download All Images, and ColorZilla (this one is still a really solid tool that offers additional color features like gradient generating).
This integrates any website with Responsively.app, an open source tool that helps you preview the site on different screen sizes.
It just opens this app, nothing fancy.
A simple, but helpful tool for eyeballing distances on any website.
(may have been removed, but still working for us)
This integrates with Amazon's Alexa Analytics. It shows the traffic rank, average load time, and links directly to the SEO platform for advanced statics.
It's great for competitor research in terms of SEO and content marketing.
The final staple of our browser extension stack is the k6 Browser Recorder.
This interfaces directly with k6, which is a load analysis tool. It's really powerful, and helps us understand how a site responds to a massive amount of traffic.
It records all page activity and shoots it to the k6 app, where we can see advanced analytics and statistics regarding the performance of the page.
And that's the browser stack that I (James, Isotropic founder), and many of my devs use. Not overly bloated, but some very helpful tools that augment the Firefox browser, and help me be a more efficient and effective developer. Have any extensions that you can't live without? I'd love to hear about them in the comments!