When developing web apps in Visual Studio Code, I find myself using the built-in debugger to conveniently launch my web application in Chrome. Initially I was using the following launch.json configuration to launch Chrome and the debugger:

"configurations": [
  {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:4200/home",
    "webRoot": "${workspaceFolder}/src"
  }
]

This launch configuration works pretty well. It launches a new instance of Chrome pointed to my web application’s URL and connects the debugger.

Over time I have accumulated many Chrome developer extensions. Some of these extensions such as the CORS Toggle extension sometimes need to be turned on and configured while debugging.  However, these extensions can interfere with normal web browsing that I may be doing as a I develop. All of a sudden I find myself disabling and re-enabling extensions as I jump between debugging and reading.

The solution… Chrome profiles

Ideally, I would like to have an instance of Chrome open for all my reading alongside a second instance of Chrome for debugging my applications. Each instance should have different extensions with different configurations. The chrome –profile-directory switch allows me to do just that.

To set this up:

1) Create a copy of your chrome browser shortcut and append --profile-directory="debug-profile" to the Target field:

2) Double-click your new short-cut to initially create the new profile. Configure this instance of Chrome as you set fit including any development-specific Chrome extensions you use. The new profile by default will be created next to your current profile, for example:

3) Update your Visual Studio Code launch.json configuration to include the userDataDir and runtimeArgs properties:

"configurations": [
  {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:4200/home",
    "webRoot": "${workspaceFolder}/src",
    "userDataDir": false,
    "runtimeArgs": [
      "--profile-directory=debug-profile"
    ]
  }
]

The runtimeArgs property instructs Visual Studio Code to launch the Chrome executable with the profile-directory switch set to use the debug profile. The userDataDir property must be set to false since by default Visual Studio Code creates a new temporary profile when launch the Chrome executable and we don’t want that.

Once you have this setup, you are free to customize your Chrome debug-profile as you see fit without fear of impacting your normal browser experience.

Doesn’t userDataDir do the same thing?

It does. The userDataDir parameter in launch.json can achieve a similar result as the --profile-directory runtime argument but with one subtle difference, the Chrome profile by default is created in the Visual Studio Code installation directory (ex. C:\Program Files\Microsoft VS Code). Technically you can specify a full path and control where the profile is created.

If you use the userDataDir parameter, remember that it accepts 3 possible arguments:

1) false to indicate a new profile should not be used
2) true to indicate a new profile should be used (with a default name)
3) a profile name (optionally including a path) to control the name and location of the profile to be used

If you are ever unsure of where Chrome is loading your profile from, check out the Profile Path property on the chrome://version page.

Happy debugging!