How to set up Visual Studio Code for multiple debuggers?

Question

I'm using VS Code as my IDE and need multiple debuggers available for the various projects. I have Extendscript as one and would like to have Chrome for other files.

This is my launch.json file:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "1.0.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "extendscript-debug",
            "request": "launch",
            "name": "Ask for script name",
            "program": "${workspaceFolder}/${command:AskForScriptName}",
            "stopOnEntry": false
        }
    ]
}

VSC is complaining about it "Matches multiple schemas when only one must validate." having two schema. Also VSC is providing this: "Configuration 'Launch Chrome against localhost' is missing in 'launch.json'."

I'm able to debug the Extendscript files (jsx) but not the JS or HTML/JS/CSS files.

I am totally lost as used to use ESDK for jsx files and did Chrome in the browser. There seems to be no way to select the debugger I need.

I'm on Win10 very latest 1909 and VSC Version: 1.44.2 (user setup) Commit: ff915844119ce9485abfe8aa9076ec76b5300ddd Date: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.18363

Thanks, RONC

Answer 1

Regarding the complaining message, this might be a mismatch. Please restart the VS Code first. The messages should disappear after restart.

For setup of multiple debuggers, you need to add configuration separately to launch.json, like what you have done in your current launch.json, and you can choose the debugger you want to run in the option.

Try the following steps to get the Chrome debugger working:

1. Go to Extensions View (⇧⌘X) and search for Debugger for Chrome extension and then install.

2. You have specified http://localhost:8080 in your chrome url of the configuration, so you have to run a web server on that URL. Like step 1, go to Extensions View to search for Live Server extension and then install. Moreover, go to Command Palette (⇧⌘P) with Preferences: Open Settings (JSON), add the below snippet:

{
    "liveServer.settings.port": 8080,
}

This will set custom port number of Live Server. In your case, 8080.

3. Click Go Live at the bottom right of VS Code to start the server. This will open a new Chrome browser. You can close it or leave it there.

4. Go to Run View (⇧⌘D) and select Launch Chrome option to run the debugger. It will launch a new Chrome browser, and at this point you should be able to start debugging by setting breakpoints.

You can see https://code.visualstudio.com/docs/debugging for more useful information and https://github.com/Microsoft/vscode-chrome-debug#using-the-debugger for Debugger for Chrome in specific.