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"
  }
]

This is done using Debugger for extension, marketplace.visualstudio.com/…. Have you followed all the troubleshooting steps listed on the page? — Tarun Lalwani
– Tarun Lalwani, Commented Jun 23, 2019 at 17:54
@TarunLalwani But the program is not Chrome. The program uses the debugger in Chrome. I want to use Visual Studio Debugger not Chrome. — 1.21 gigawatts
– 1.21 gigawatts, Commented Jun 23, 2019 at 18:45

Laurens Deprost · Accepted Answer · 2019-06-17 19:19:25Z

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.

answered Jun 17, 2019 at 19:19

Laurens Deprost

1,7017 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

1.21 gigawatts Over a year ago

I think I'm getting closer but it's not connecting yet. I'm trying to debug in Brave, Firefox or VSCode not Chrome. I added more information to the post.

Collectives™ on Stack Overflow

Get debugging working with Visual Studio Code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related