As a product engineer that primarily works on web applications, my browser is as important as my IDE to my daily work. The browser helps me test, debug, and iterate my code. So, having a rock-solid, productive set of development tools in my window to the web is incredibly important to me.

For a long time, Chrome fit that bill for me. With its extensive extensions library and industry-leading developer tools, Chrome has served me well through the ups and downs of building product.

And when I switched from Chrome to Arc as my personal browser - which you can read about here - I assumed that I'd still have to keep Chrome around as my browser for work. I was wrong. Arc is not only the best browser I've ever used - it's also the best development browser I've ever used.

😮‍💨 The problem with dedicated development browsers.

There are a lot of browsers on the market that specifically target developers. Polypane, LTBrowser, and Firefox Developer Edition are all great examples. These products try to reduce the friction of frontend development by providing features like multiple viewports, screenshot and recording tools, and quick access to things like element selection and the Javascript console.

I've tried many of these products over the years, and I'll say that most of them provide some great features to speed up the development workflow. However, for me, they've always had a fatal flaw that's eventually always led me back to using Chrome for work: they aren't great at just being a browser.

Most of these tools focus so heavily on the 50% of development time spent testing and debugging that they ignore what happens during the other 50%: Googling problems and researching issues. And the experience of using these development browsers as just browsers is usually subpar if not terrible.

Obviously, you could use a browser for localhost and a browser for everything else, but in my experience I've found it really hard to stick to that strict of a system. I don't want to switch to another browser in order to search through GitHub issues or read a thread on Stack Overflow. I want to highlight a confusing error and hit CMD+C CMD+T CMD+P Enter - and immediately start digging for the answer.

That's what I love about Arc: it's a great standalone browser first and a great development tool second. It's designed for managing tons of tabs, project contexts, and keeping you focused on the task at hand - and then it sprinkles on some extra niceties on top of the already great Chromium DevTools.

🤓 Arc's Developer Mode

By default, Arc puts all of the things you'd find in the traditional browser navigation bar in its toggle-able sidebar. That's how you access things like the URL bar, your tabs, reload button, etc. However, when Arc detects that you are on a website like localhost:3000, it will automatically switch that tab into Developer Mode.

When a tab is in Developer Mode, Arc places a header at the top of the tab that gives you a few quality of life improvements. The first is that it shows you the full URL, including the protocol, domain and subdirectory.

I know that might seem like a strange thing to be excited about, but Chrome hides or truncates some of that information by default to make the URL more readable. However, when you're working on an app, being able to quickly scan the URL to understand exactly where your browser is pointing is just so useful.

The second thing this Developer Mode toolbar that I love is the built in screenshot tool. Now, if you're like me, your first thought might be, "Why would I need another screenshot tool?". But let me tell ya, this isn't just a standard click and drag screenshot selector.

The magic of Arc's screenshot tool is that it automatically creates bounding areas around the div element you're currently hovering over so you can get a perfectly centered, padded screenshot of something on-screen instantly. As an avid Shottr user, I thought I wouldn't use this, but after spending just a few days developing with Arc, I found myself remapping my hotkeys to get access this feature more quickly.

The last thing I love about Arc's developer mode is the quick toggles for the console, network panel, and element inspector. This is a little thing, but switching between these most common areas of the Chromium DevTools is just way easier with these buttons instead of hunting through the More menu inside the DevTool window.

But now, let me talk about Arc's most powerful feature for development...

💥 Boosts

In Arc, there is a feature called Boosts. They are essentially a built in way of creating Extensions that allow you to inject JavaScript, change CSS, and kick off background processes when you're on a certain webpage. For example, here's a version of their default Boost template that adds an image of Guy Fieri to my website.

On their own, Boosts are just a really cool feature of Arc - but for development, they're incredibly useful. If you're like me, you'll often sit in the element inspector debugging styles and tweaking element attributes in order to solve an issue or achieve a certain look. Then, you'll go to copy all of those changes you made directly to the DOM into your IDE when suddenly you accidentally refresh the page and all of your work is lost.

With Boosts, this doesn't happen. You can make a new Boost, test styles, JS behavior and even inject HTML into the page without the fear of refreshing. In fact, you can actually create multiple Boosts to compare different looks, toggle them on and off, and refresh the page to compare them.

I feel like I've barely scratched the surface of how I can utilize Boosts in my workflow, and it's already a feature of Arc I find incredibly valuable.

💪 Small improvements have a big impact.

All of these features of Arc might seem too small and insignificant to declare it as, "the best browser for web development". But in my experience, these small quality of life improvements when developing a website combined with Arc's incredible UX as a "normal" browser have made it an indispensable tool in my toolbox as a product engineer.

✨ What do you think?

I hope you enjoyed this article! I'd love to hear what browser you use for development and whether you're considering giving Arc a try. You can find me on Twitter or LinkedIn. You can also email me if social media isn't your thing.

Also, if you want to get notified the next time I post an article like this, you can sign up for my newsletter using the form down below.

Until next time.