Baldur Bjarnason

Keep your browser fresh for dev, last day of the bundle offer, and links

– Baldur Bjarnason

I’ve encountered a few very strange web development bugs in my time. SVG has always been a particularly reliable source of weirdness in all browsers. New APIs and standards always need a bit of time before they become reliably usable. But the most insidious bugs are always because of state in some way.

The weirdest ones have been my own fault – well, all bugs are ultimately the dev’s fault, one way or another.

The most annoying ones I’ve encountered were because I did something dumb in a separate project and had that weirdness contaminate my then current work because I made the mistake of reusing the port number for the localhost dev server.

Sometimes that’s unavoidable, though, as not every project lets you override the port number for local development. For example, if you’re using an authentication service like Auth0, you might not be able to change the dev server URL that’s in its allow-list.

The most straightforward way to address this, as well as other state sharing bugs and extensions messing up your web dev, is to always launch your dev browser with a fresh profile.

Dev-oriented browsers such as Polypane have profile management features that specifically cater to web developers, but this is one of those instances where a shell script is genuinely useful.

I use this script to launch Firefox (saved as firefox.sh):

#!/bin/sh
set -eu

FIREFOX_PATHS=( \
  "/Applications/Firefox.app/Contents/MacOS/firefox" \
  "firefox"
)
for i in "${FIREFOX_PATHS[@]}"
do
  if command -v $i &> /dev/null; then
  FIREFOX=$i
  fi
done


DATA_DIR="$(mktemp -d -t 'firefox-unsafe_data_dir.XXXXXXXXXX')"
"${FIREFOX}" \
  -profile $DATA_DIR \
  -no-remote \
  -url http://localhost:8888/ \
  >/dev/null 2>&1 &!

I run it using sh firefox.sh and it’ll load a fresh instance of Firefox with a new profile created in a temporary directory.

(Mac users might need to replace ${FIREFOX} with open /Applications/Firefox.app --args in the above script.)

Chrome is often a bit trickier as the launch command for your OS’s Chrome or Chromium can vary a lot. This usually works, with the same caveat for Macs as in the Firefox script:

#!/bin/sh
set -eu

CHROME_PATHS=( \
  "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  "chrome" \
  "chrome-browser" \
  "chromium" \
)
for i in "${CHROME_PATHS[@]}"
do
  if command -v $i &> /dev/null; then
  CHROME=$i
  fi
done


DATA_DIR="$(mktemp -d -t 'chrome-unsafe_data_dir.XXXXXXXXXX')"
"${CHROME}" \
        --ignore-certificate-errors \
        --no-default-browser-check \
        --no-first-run \
        --non-secure \
        --user-data-dir="${DATA_DIR}" \
        http://localhost:8888/ >/dev/null 2>&1 &!

Getting into the habit of always testing your web dev work in fresh browser instances with temporary profiles prevents a whole host of bugs that can be really hard to figure out as the ultimate cause can be something in a separate project.

Black Friday to Cyber Monday Bundle #

The above tactic for avoiding cross-project state contamination is one of the many things I write about in the web-book/course Uncluttered: free yourself from Node with import maps and test-driven web development.

That course is available as a part of a massive bundle for $49 USD that includes:

For total savings of more than $100 USD. That’s two highly rated ebooks, a series of audio-oriented videos, and a web-book/course all for less than the full price of the course itself.

Today is the last day of the bundle sale!