Running a second instance of Chrome for development

by Justin Unterreiner

The development tools included with Chrome are essentially a built in web development IDE. There are some great features, especially for mobile development:

  • Pre-defined view port size based on device type
  • Pre-defined user agent overrides
  • Emulation of various mobile network speeds
  • Emulation of GPS and accelerometer sensors

However, a hurdle I've run into is that Chrome's built-in security features, like the same origin policy and SSL validation, can make it hard to test in development environments.

Chrome provides command line arguments that can be used to bypass these security features when launching the application.

$ open -a "Google Chrome.app" --args --ignore-certificate-errors --disable-web-security

Unfortunately, if you use Chrome as your day-to-day browser, this solution is undesirable. It also disables the security measures in the browser, where they serve an important purpose.

Instead, I prefer to launch a separate instance of Chrome for development. To do this, we can point Chrome at a different data directory using the user-data-dir flag.

$ open -a "Google Chrome.app" --args --ignore-certificate-errors --disable-web-security --user-data-dir=/Users/$USER/Library/Application\ Support/Google/ChromeDev

Using a different data directory has the added bonus of keeping all your data (profiles, extensions) separate from your day-to-day Chrome instance.

If you want to go a step further, you can use the AppleScript Editor to create an application bundle you can drop into your Applications folder. This allows you to place it on your dock with a custom icon.

Start with the following AppleScript:

do shell script "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --user-data-dir=/Users/$USER/Library/Application\\ Support/Google/ChromeDev --args --ignore-certificate-errors --disable-web-security"

Note: When you save the script, be sure you change the file format to "Application."

If you'd like to set a custom icon, select the application bundle in Finder and choose Get Info (shortcut: Command + i). Now you can drag your custom image or icon onto the application bundle's icon to replace it. This is a good icon to use.

You can now dock your newly created application bundle and start using your development instance of Chrome.

There are a few different configuration permutations I like to use for my development instance, so I put together a more advanced script that prompts me to set certain flags on the fly. It is available as a gist on GitHub.