Debugging Angular app in VSCode is not working AGAIN

Question

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:

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:

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

Answer 1

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.