Get debugging working with Visual Studio Code

Question

I'm working on setting up an environment to get debugging working for my program and I found these instructions online to get it to work with Chrome but I want it to work with Visual Studio Code:

• Open Google Chrome and navigate to chrome://inspect. Your program should be listed as a debuggable target. It'll have your program ID attached to it.
• If you don't see the panel as a debuggable item, you may need to tell Chrome to look at the port you've specified above.
• Click "Configure" next to "Discover Network Targets"
• Add "localhost:9345" (or the port you used above"
• Click "Done"
• Click "inspect". CDT should launch with the full debugging experience

Is this enough information to get debugging to work with Visual Studio Code?

More information when visiting the URL:

[
  {
    "description": "Program",
    "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=127.0.0.1:9345/devtools/page/abc123",
    "faviconUrl": "https://www.example.com/favicon.ico",
    "id": "abc123",
    "title": "abc123",
    "type": "page",
    "url": "",
    "webSocketDebuggerUrl": "ws://127.0.0.1:9345/devtools/page/abc123"
  }
]

Answer 1

Those instructions are not enough for debugging within VSCode.
To be able to debug in VSCode you should add a debug launch configuration:

• Open the debug view (debug icon or Ctrl+Shift+D)

  

• Add a configuration for chrome:
  click the gear icon or manually create launch.json file
  (inside .vscode folder in root of your project)

example launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:9345",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

• Select the newly created config and click the play button ('Start Debugging')

Check out the docs for more information.