Published at
Updated at
Reading time
3min

While reading an article about "unknown" Netlify CLI features, I discovered a little developer experience gem.

When you run netlify dev, netlify will check if there’s an open browser tab on the existing port and if so, it’ll re use that tab to display your project as opposed to spinning up a new tab every time.

As a tab hoarder, I appreciate it when development tools reuse and focus already open localhost tabs. Unfortunately, I can't remember that I've ever seen a development CLI command reusing/focusing an already open tab.

How does that work? Is there an easy way to do that programmatically? And why did I never notice this?

An npm package to reuse tabs – better-opn

I analyzed what the Netlify CLI does and discovered that it uses the better-opn npm package (find the usage here). The code to open or focus an already open browser tab is two lines of code.

const open = require('better-opn');
await open('https://example.com);

It can't be that easy! There has to be some magic. Let's dive deeper!

How to reuse and focus open browser tabs

better-opn has 25 GitHub stars but an astonishing 2 million weekly downloads on npm. I'm always amazed when I discover highly used packages that don't receive GitHub love.

When you look at the package's main file (index.js) you'll find out that the "focus existing tab" functionality was initially developed in Facebook's create-react-app.

// Copy from
// https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/openBrowser.js#L64

Looking at the source code; three things stand out:

  1. focusing a browser tab only works on macOS
  2. focusing a browser tab only works for Chromium browsers
  3. focusing a browser tab is not straightforward

The package uses an Apple Script (ufff!) to iterate over open tabs, find the correct URL and focus the appropriate tab.

That's an unfortunate discovery, and here comes the conclusion: I've never noticed this functionality because I use Firefox as my default browser. It never worked for me. 😢

After having another look, better-opn indeed points out that it only works on Chromium on macOS. My bad, I missed that when scanning the package.

Reuse the same tab on Chromium-based browsers on macOS.

But the Netlify article is not entirely correct then. It only describes the web developer's default stack: Chrome on macOS.

This wording is not a big deal, but it's somewhat concerning that there's no mention of Windows or other browsers.

Not all developers sit in front of a shiny MacBook Pro or use a Chromium-based browser. This case is a typical "Works on my machine" situation. On the other hand, there are no open issues asking for Windows or Firefox support in the better-opn repo.

Is it just me developing on an exotic software stack? I doubt it, but a solid developer experience should cover more areas than the current developer default stack. 😊

If you enjoyed this article...

Join 5.2k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles