isotropic-2022
Share
Blog
Search
Menu

The Best Browser and Extensions For Professional Web Designers

By James LePage
 on March 26, 2021
Last modified on April 5th, 2022

The Best Browser and Extensions For Professional Web Designers

By James LePage
 on March 26, 2021
Last modified on April 5th, 2022

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!

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram