Debugging Angular app in VSCode is not working AGAIN

user_610422 0
Viewed 2987

I followed the official documentation: https://code.visualstudio.com/docs/nodejs/angular-tutorial#_debugging-angular

  • Created a new Angular app using ng new my-app.
  • Opened the app in VSCode.
  • Checked if the app runs: ng serve. All good.
  • Installed Debugger for Chrome
  • Added launch.json configuration as instructed
  • Pressed F5 to start debugging...

According to the documentation it must launch the app and hit my breakpoints. Instead, I get this:

enter image description here

I have no idea why this is not working. Please advise. Thanks.

Also, why do we need this extension?

Looks like the debug module is built-in now in VSCode, and does exactly the same:

enter image description here

but is not working either (here I disabled the extension and used built-in debugger):

enter image description here

angular visual-studio-code debugging
2 Answers

I used to have your problems. I would struggle to find a solution and then some time later again the same thing. Always some confusing error with debugging from VS Code.

I moved to debugging my angular applications directly from browser and I am always happy. Chrome and Firefox have never disappointed me during debug.

Just keep in mind that for some strange reason webpack put all files under . source folder

Here is a picture of the structure and how you can find your files to debug directly from Chrome

enter image description here

You can also move to console tab and execute every statement that you want.

Also moving your mouse on the code will give you the values that your variables hold during execution.

user_72378840
  1. Delete any existing launch.json from .vscode folder in your workspace.
  2. Press F5 (in your vscode workspace) and choose 'Chrome'. Note launch.json getting created afresh.
  3. Start your angular app from a terminal: 'ng serve --port=8080'. Wait till it is up.
  4. Go back to your vscode workspace. Press F5 to launch chrome in debug mode. Your app should load in Chrome.
  5. Now you can set breakpoints in your source code within vscode. Interact with your app as you normally would. vscode should pause when your hit your breakpoints.
user_121065020
Related