Switching URLs with Keyboard Maestro

As a software engineer, a common on-the-job need is quickly switching between production and development environments to compare differences. If there’s an issue in dev, I want to check prod to make sure it’s not affecting customers. If the issue’s in prod, I want to check dev to reproduce the issue locally and start fixing it.

I’ve been learning how to use Astro lately thanks to its performance-centric server islands architecture. Right now, one of the biggest Astro repositories available to the public is the Cloudflare documentation website. I have a few improvements I’d like to contribute to their codebase and part of my workflow has involved switching between development and production to compare changes — a common need for front-end engineers.

Using Keyboard Maestro, switching environments has been as quick as a single Ctrl+E keyboard shortcut to toggle environment URLs.

One press and I’m able to switch between production, development, and then back with another keypress.

Keyboard Maestro

So what is Keyboard Maestro? Keyboard Maestro is a macOS productivity and automation app that allows you to design multi-application workflows with a completely visual interface. I was introduced to Keyboard Maestro thanks to Drew Barontini and it’s been an invaluable part of my development workflow over the past decade.

Keyboard Maestro can do everything. It can write dynamic snippets like fake email addresses for testing; it can manage your windows by focusing certain apps and moving them; it can intercept keyboard shortcuts so ⌘+R refreshes Chrome instead of your code editor; it can really do anything and everything.

For the scope of this post, we’re going to create a new macro to swap the active URL in Google Chrome.

Creating a new macro

The macro works by capturing the current URL in Chrome, then using a switch statement to detect which environment we're in currently and replace it with the alternate environment. Here's how the logic works:

1. Store the current URL in a variable: Chrome's current URL gets stored in a variable called TheURL.
2. Switch logic: A switch statement checks the URL and replaces current URL with the alternate environment.
3. Navigate to new URL: Keyboard Maestro pastes the modified URL back in Chrome's address bar and simulates pressing Return.

So all together, the macro captures the current Chrome URL, hot swaps between production and development, then navigates to the new URL.

Importing a macro

Clicking through things in Keyboard Maestro can be a little tedious, so here is the Keyboard Maestro macro to toggle environments for you to import into your own Keyboard Maestro setup.

curl -o toggle-environment.kmmacros https://jdj.land/toggle-environment.kmmacros

To import the macro, you can select the following from the macOS menu bar while Keyboard Maestro is active:

File > Import > Import Macros Safely…

Select the downloaded toggle-environment.kmmacros macro and it will be auto imported into your active Keyboard Maestro library. For security reasons, macros are imported disabled by default. Enable the Toggle Environments macro, customize it to your project, and you should be good to go.

Wrap-up

And that's it!

Keyboard Maestro is the most valuable tools I've purchased throughout my career as a software engineer. Small automations compound into huge workflow improvements, especially when chained together used multiple times day.