Skip to main content

How to open multiple Chrome instances at once?

· 3 min read

Hi, I'm Kaipeng.

Today I want to share a small Chrome tip: you can spin up multiple clean, isolated Chrome instances at once to make your development smoother.

Quick poll: which browsers do you usually use for development?

  • Chrome
  • Firefox
  • Safari
  • Other

My daily driver for development is Chrome.

Chrome DevTools are powerful and cover the vast majority of frontend debugging needs.

But one thing has long bothered me: my everyday browsing and development are coupled together.

For example, I have lots of extensions installed:

Chrome Extensions

These extensions can affect development because they may inject HTML or CSS into pages and generate extra network requests, which interferes with debugging.

For example, the sidebar HTML injected by an extension:

Chrome Layer Tab

At this point, the usual choices are either opening an Incognito window or switching to another browser.

Both are fine, but Incognito still uses the same Chrome instance, and every time you reopen it, all state is cleared.

Switching to another browser is another option—I tried it but eventually gave up. It’s like moving to a brand-new dev environment: different UI, habits, shortcuts, etc. It feels awkward.

Recently I learned a better way: create separate Chrome instances by using different user data directories.

Run:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_user_dir_1"

You’ll get a brand-new Chrome instance whose settings, extensions, history, etc. are all isolated.

Create Chrome Instance

You’ll even see two Chrome icons in the Dock:

Chrome Instances in Dock

This newly created instance is effectively a separate Chrome browser.

You can change its theme to distinguish it from other instances:

Modify Theme

Or sign into a different account, etc.—it’s your second Chrome.

By running this command, you can theoretically create unlimited Chrome instances—just change the --user-data-dir parameter, for example:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_user_dir_2"
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_user_dir_3"
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_user_dir_4"
......

In practice, I usually keep two instances and switch between them: one for casual browsing, one for development and debugging.

If launching a new Chrome instance every time during development feels a bit annoying, consider adding the command to your frontend project’s package.json scripts:

  "scripts": {
    "dev": "next dev --turbopack",
    "open-chrome": "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --args --user-data-dir=/tmp/ChromeNewProfile http://localhost:3000",
    "dev:chrome": "npm run open-chrome && npm run dev"
  },

Now you can run npm run dev:chrome to open the Chrome instance and automatically start next dev.

Windows PowerShell users can use:

 "scripts": {
   "dev": "next dev --turbopack",
   "open-chrome": "powershell -Command \\\"Start-Process 'C:\\\\Program Files\\\\Google\\\\Chrome\\\\Application\\\\chrome.exe' -ArgumentList '--user-data-dir=D:\\\\temp\\\\ChromeNewProfile', 'http://localhost:3000'\\\"",
   "dev:chrome": "npm run open-chrome && npm run dev"
 },

If you want the Chrome instance to open localhost:3000 automatically so you can see the page right away, append http://localhost:3000 to the command:

{
  "scripts": {
    "dev": "next dev",
    "dev:chrome": "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --user-data-dir=\\\"/tmp/chrome_user_dir_1\\\" http://localhost:3000 && npm run dev"
  }
}

That’s it for this post. If it helped, feel free to like, bookmark, and share.

I’m Kaipeng—see you next time.