By Loni —

Isolate Chrome Traffic in Charles with a One-Click Launcher

Isolate Chrome Traffic in Charles with a One-Click Launcher
Photo by Claudio Schwarz / Unsplash

When debugging video streams, you want to capture only the traffic from the stream you are testing—not all the chatter from other apps. This guide shows you how to launch a special Chrome instance that proxies traffic through Charles Proxy, so you can isolate stream activity.

We'll disable the system proxy, and create a custom .app launcher using Automator on macOS.

💡
Right now this only works for Mac users, but I might write a little python script for Linux user.

Install Charles

First you need to install Charles Proxy, and set up some basic configurations.

  • Open Proxy > Proxy Settings > macOS and then uncheck Enable macOS proxy and uncheck Enable macOS proxy on launch
  • Open Help > SSL Proxying > Install Charles Root Certificate
  • Keychain access should open, and you should set the cert to Always Trust
  • Open Proxy > SSL Proxy Settings
    • Make sure Enable SSL Proxying is checked
    • Click the + below the Include window, add * for Host and for Port, and then click Done.

Create a Chrome Debug App With Automator

Next we will use Automator to create an application that will launch a special Chrome Browser instance that will proxy all traffic through Charles Proxy.

First, save this BASH script somewhere that makes sense to you:

#!/bin/bash

# Define a throwaway user data dir
CHROME_PROFILE_DIR="/tmp/chrome-charles-profile"

# Create it if it doesn't exist
mkdir -p "$CHROME_PROFILE_DIR"

# Target test stream URL
START_URL="https://players.akamai.com/players/hlsjs"

# Launch Chrome with Charles proxy and open to the test URL
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --proxy-server="127.0.0.1:8888" \
  --user-data-dir="$CHROME_PROFILE_DIR" \
  --ignore-certificate-errors \
  --no-first-run \
  --new-window "$START_URL"

Make sure you make this script executable. You can do that by running this command in a terminal:

chmod +x the_name_of_your_script.sh

Next we will use Automator to generate an icon on your desktop that you can double-click, which will trigger this script to run.

  • Open Automator
  • Choose Application
  • Paste in the path to where you saved your script
  • Save it as something like Chrome for Charles.app to your Desktop or Applications folder.

Now you can capture traffic for a video stream test by opening Charles Proxy, and then double-clicking on the icon for the script you just saved. A chrome browser should open right to Akamai Player Testing, and Charles Proxy will capture all (and only) the traffic from what ever stream you play in that browser.