Launch a browser for remote debugging (vscode, etc)

browser-debug.sh

#!/bin/bash

# Launch a browser with a specific profile and remote debugging port open
# symlink this file into chrome-debug, firefox-nightly-debug, etc.

NAME=$(basename $0)

# Open dev tools by default
OPEN_DEVTOOLS=true

# Browser-specific settings
case "$NAME" in
  chrome-* | brave-*)
    BROWSER_TYPE=chrome
  ;;&

  firefox-*)
    BROWSER_TYPE=firefox
  ;;&

  chrome-debug | chrome-stable-debug)
    BROWSER_BIN=/usr/bin/google-chrome-stable
    USER_DATA_DIR=$HOME/.config/chrome-stable-debug
  ;;

  chrome-beta-debug)
    BROWSER_BIN=/usr/bin/google-chrome-beta
    USER_DATA_DIR=$HOME/.config/chrome-beta-debug
  ;;

  chrome-dev-debug)
    BROWSER_BIN=/usr/bin/google-chrome-dev
    USER_DATA_DIR=$HOME/.config/chrome-dev-debug
  ;;

  brave-debug)
    BROWSER_BIN=/usr/bin/brave
    USER_DATA_DIR=$HOME/.config/brave-debug
  ;;

  firefox-debug | firefox-stable-debug)
    BROWSER_BIN=/usr/bin/firefox
    FF_PROFILE=debug-stable
  ;;

  firefox-nightly-debug)
    BROWSER_BIN=$HOME/.local/lib/firefox/firefox
    FF_PROFILE=debug-nightly
  ;;

  *)
    # Chrome Stable as default
    BROWSER_TYPE=chrome
    BROWSER_BIN=/usr/bin/google-chrome-stable
    USER_DATA_DIR=$HOME/.config/chrome-stable-debug
  ;;
esac

while [[ $# -gt 0 ]]; do
  opt="$1"

  case $opt in
    --) # terminate options list
      shift
      break
    ;;
    -i | --incognito)
      INCOGNITO=true
    ;;
    -n | --no-dev-tools)
      unset OPEN_DEVTOOLS
    ;;
    *) # no more options
      break
    ;;
  esac
  shift
done

URL=${1:-"about:blank"}

case "$BROWSER_TYPE" in
  chrome)
    BROWSER_ARGS="--user-data-dir=${USER_DATA_DIR} --remote-debugging-port=9222 ${OPEN_DEVTOOLS:+--auto-open-devtools-for-tabs} ${INCOGNITO:+--incognito}"
    ;;

  firefox)
    BROWSER_ARGS="-P $FF_PROFILE --start-debugger-server 9222 ${OPEN_DEVTOOLS:+--devtools} ${INCOGNITO:+--private-window}"
    ;;
esac

eval "$BROWSER_BIN $BROWSER_ARGS $URL > /dev/null 2>&1 &"

browser-debug.sh

This script helps launch a new browser instance with a specific profile, for debugging.

Setup

First, for each browser you want to use, create a new, blank profile. Install your addons (vue/react/redux dev tools) and set your preferences (dev tool theme, disable cache, etc). For Firefox, make note of the profile name. For Chrome, find the profile directory (go to chrome://about, and look at the Profile Path line).

This script decides what browser to use based on the name it was called with. To take advantage of this, create a symlink to it somewhere in your $PATH:

# assuming ~/.local/bin is in your $PATH
$ cd ~/.local/bin
$ ln -s /path/to/this/script.sh chrome-beta-debug

Script names and the corresponding browser executables start on L21. Update BROWSER-BIN and USER-DATA-DIR (for Chrome-based browsers) or FF_PROFILE (for Firefox) accordingly.

How to use

Run the script using your symlink:

$ chrome-beta-debug [-i] [-n] [url]

-i will launch your browser in incognito mode. This is useful to avoid caching problems (and also makes sure that no cache will be kept for the session)
-n will launch your browser without opening the dev tools, useful for one-off quick checking
url is obviously the URL you want to open on start. If omitted, starts at about:blank