Debug with Visual Studio Code not working

visual studio code debug c++
visual studio code debug c#
vscode-python debugger not working
visual studio code debug python
visual studio code debug chrome
vscode prelaunchtask
launch.json vscode c++
please first open a folder in order to do advanced debug configuration.

I'd like to be able to debug an Angular2 application with Visual Studio Code.

Here's my environment:

  • OS: Ubuntu 16.10 x64
  • Browser: Chromium 53.0.2785.143
  • Node: 6.8.0
  • Angular-cli: 1.0.0-beta.19-3

Creating a new project with angular-cli :

ng new test-VSC-debug
cd test-VSC-debug

Then I open VSC and load the project : File/open folder

I click on the debug logo and I configure launch.json by selecting chrome. It generates the following file :

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Then I just start the angular2 project by running :

ng serve

Once it has started, in VSC I select : "Launch Chrome against localhost, with sourcemaps".

Then, I get the following error : "Can't find chrome : Install it or set the runtimeExecutable field in the launch config."

So I set : "runtimeExecutable": "chromium-browser" (as I do not have chrome but chromium on my Ubuntu).

Angular-cli default port to launch the app is 4200. Change url from : "http://localhost:8080" to "http://localhost:4200".

Now the browser is opening the app but VSC has the following error: "Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONREFUSED 127.0.0.1:9222".

From other answers found on stackoverflow/github issues, I've read that I might have to kill all chrome instances before trying to do that, so I just close chromium and run killall chromium-browser.

I try to run the debug again : Same error as before (cannot connect).

I've also seen that the following arguments might help :

"runtimeArgs": [
  "--remote-debugging-port=9222",
  "--user-data-dir"
]

But it does not change anything.

I decided to use VSC for my typescript devs (mostly angular2) and this way of debugging seems very powerful. I have the feeling that it'd be too bad not to use it :).

Thanks for any help !

PS: Some related stackoverflow questions and github issues : - Debug & Run Angular2 Typescript with Visual Studio Code? - https://github.com/angular/angular-cli/issues/2453 - https://github.com/angular/angular-cli/issues/1936 - https://github.com/angular/angular-cli/issues/1281

EDIT 1: !!! Partial improvement !!! I found a way to have debug info within Visual Studio Code console ! So it's not perfect yet as breakpoints doesn't work but here's the thing. So far, if I opened http://localhost:9222 I was not able to see anything. ("localhost doesn't authorized the connection").

BUT, if I launch chromium like that :

chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

The important thing is to notice that argument : --user-data-dir=remote-profile. If you just pass --user-data-dir it launches a new window with no one connected. But it's not enough. You need to pass remote-profile as value.

  • it opens a new browser window
  • I open http://localhost:4200 AND I can also reach http://localhost:9222 !
  • I'm able to connect VSC with "Attach to chrome with source map" option ! (as you can see, I do have the "Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode." displayed in console and the footer now has an orange background)

So far, I hope it can help some people. But the problem now is that breakpoints are not working.

I keep digging and 'll make another edit if I found why.

Introduction to Debugging in Visual Studio Code, How to debug C++ programs in Visual Studio Code. To set a breakpoint when the application is running (not stopped under the debugger),  visual studio code PHP debugging not working. I have installed VS Code and the PHP debugger. I am using xampp. I tried running the code (2) ways (listen and launch). Listen just sits there while Launch shows spawn php ENOENT in the debug console. This is my launch.json.

I finally get it fully working !!!

For those interested :

(using chromium-browser on Linux but you can easily just replace by "chrome").

First, here's the launch.json config :

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src",
            "url": "http://localhost:4200/",
            "sourceMapPathOverrides": {
              "webpack:///*": "/*"
            }
        }
    ]
}

I decided to remove the part with "request": "launch" as I need to launch a new browser window.

Then, launch the browser like that : chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

In the new window, access to http://localhost:4200.

Then from VSC, run the debug.

Everything should work just fine and you should be able to use breakpoints :)

GIF available here to see it in action : http://hpics.li/0156b80

Debug C++ in Visual Studio Code, With nodemon your app is restarted automatically when a source change is detected and VS Code will start the debug session automatically as  One thing I have not been able to figure out is how to get Xdebug working and configured with Visual Studio Code. I read in another thread here that for some reason Xdebug only works if you set up the site using Custom.

Similar to Aaron F. ans I use the following setting for Angular 2+ develop in Windows environment

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "trace": true,
            "smartStep": true,
            "runtimeArgs": [
              "--disable-session-crashed-bubble",
              "--disable-infobars"
            ],
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
    ]
}

VSCode restart debugging not working anymore · Issue #87767 , I had the same issue, turns out the clue was in the console: Debugging with legacy protocol because Node.js v6.10.2 was detected. I resolved it  Visual Studio Code - Node debugger breakpoints not being hit compile in debug mode. So when compiling the code using your tasks.json tagged visual-studio-code

I'm using Angular CLI 1.7.3 and Angular: 5.2.9 on Mac OSX. Here is the configuration which is working for me:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Client in Chrome",
            "sourceMaps": true,
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*",
            }
        }
    ]
}

Debug in visual studio code is not working, How do I debug C code in Visual Studio code? Debugging is a core feature of Visual Studio Code. In this tutorial, we will show you how to configure and use debugging basics. We will walk you through how you get started with Node.js debugging in VS Code. Tip: To use the debugging features demonstrated in this video for Node.js, you will need to first install Node.js.

The following configuration works well for me on macOS using VSCode v1.23, Angular 6, and Chrome 66.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "smartStep": true,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/src/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

Run, Debug & get IntelliSense for C C++ in VSCode, I was able to solve this problem on OSX. The reason it's such a pain is there are multiple things causing the issue. You hit on the first with  The renderer debugging process was not working correctly, even though it was mapping fine in the electron shell chrome debugger. Setting the overrides like this worked properly for attaching VSCode to the renderer process of the launched electron shell.

Debug with Visual Studio Code not working, One of the key features of Visual Studio Code is its great debugging support. to learn what the problem is and try to fix them before launching a debug session. Python debug configurations in Visual Studio Code. The Python extension supports debugging of a number of types of Python applications. For a short walkthrough of basic debugging, see Tutorial - Configure and run the debugger.

Debugging, Debugger not working. Unfortunately there could be a number of reasons why the debugger isn't working. For instance it is possible VS Code is displaying some  Working with containers. The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code.. This page provides an overview of the Docker extension capabilities; use the side menu to learn more about topics of interest.

Debugger, In this video we demonstrate the basics of debugging a Node.js app. You can download VS Duration: 6:10 Posted: Mar 22, 2017 Navigate to the Debug view (Ctrl + Shift + D on Windows or Command + Shift + D on Mac) in the Activity Bar. If you do not have any configurations in VS Code, press F5 on Windows or Mac or click the green Play button. Select "Edge" in the dropdown. You will now see a launch.json file with the following configuration:

Comments
  • Working with Angular 2.4.8 stackoverflow.com/questions/42495655/…
  • I get "chrome" is not supported.
  • @fuzz Do you have the extension Debugger for Chrome installed?
  • Thank you so much for providing the launch.json file. It works perfectly!
  • Just a note for Windows users: sourceMapPathOverrides has to include your relevant drive letter. Eg. "webpack:///c:*": "c:/*" when you run your project from C: drive.
  • Bravo! I've tried this on and off a few times and could never get it to work. The sourceMapPathOverrides are the key!
  • I know... thanks and irrelevant comments are a no no in stackoverflow, since your answer was a time saver: "THANKS!".
  • How can i do this if i'm running my app using electron?
  • This worked for me when setting up debugging with electron + angular 7. The renderer debugging process was not working correctly, even though it was mapping fine in the electron shell chrome debugger. Setting the overrides like this worked properly for attaching VSCode to the renderer process of the launched electron shell.