How to configure Visual Studio Code debugger to use Chrome Canary?

Question

I'm working on multiple projects simultaneously, and for one of them I want to use Chrome Canary to debug my application in Visual Studio Code.

so for Stable Chrome i have

{
        "name": "Launch Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:7246/",
        "runtimeArgs": [
            "--new-window",
            "--remote-debugging-port=9222"
        ],
        "webRoot": "${workspaceRoot}/app/"
}

Is there any easy way to configure in launch.json to use Chrome Canary on a separate debugging port (9223 for example), so I would be able to use Chrome Stable with debugging port 9222 for all the other things?

Answer 1

You should be able to use the runtimeExecutable property to specify the path to the Chrome version you want to test with, in combination with runtimeArgs, specifying a different debugging port for that configuration. The configurations property in launch.json allows you to specify an array of configurations.

I haven't looked at VS Code myself, so cannot verify this, but there is some useful information here: https://github.com/Microsoft/vscode-chrome-debug

Update You can use an environment variable path instead of an absolute path.

In Command Prompt, try something like this to create the environment variable:

set CHROME_PATH=C:/Users/[USER]/AppData/Local/Google/Chrome SxS/Application

In the config file, the path can be referenced like this:

${env.CHROME_PATH}/chrome.exe

Check out https://code.visualstudio.com/Docs/editor/tasks#_variable-substitution for more details.