The Best Browser and Extensions For Professional Web Designers

Published: 7 months ago

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.

Browser: Firefox Developer

By far and large, the most popular web browser in our agency is Firefox Developer Edition. There are several reasons that we use this:

  • Developer specific tools. We use the CSS features the most here to understand our pages on the frontend and aid in development.
  • Solid selection of extensions.
  • Loads Oxygen Builder the fastest (from our own testing, this definitely varies by computer).
  • It's free!
All the features of this browser.

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.

Workona

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.

It's the first of 5 pinned tabs on my browser

Because it works on Firefox and Chrome, devs can choose the best browser for them, while still being able to share workspace.

Hoverify

(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:

  • Inspect
  • Color eyedropper
  • Assets downloader
  • Responsive view
  • Built With
  • Screenshot (not working on Firefox yet)

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).

Responsively.app

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.

Measure-it

A simple, but helpful tool for eyeballing distances on any website.

Alexa

(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.

k6 Browser Recorder

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.

Conclusion

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!

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram