Visual Studio code debugger configuration @angular/cli

angular-debugger-vs-code.md

1. Install node.js and optionally yarn
2. Install and open Visual Studio Code
3. Install chrome debugging extension for Visual Studio Code
4. Install @angular/cli npm i -g @angular/cli OR yarn global add @angular/cli
5. Create a new project ng new my-project
6. Open project in Visual Studio Code
7. Debug > Add configuration
8. Paste contents of launch.json into the new launch.json configuration file.
9. Start project ng serve optionally changing the port with -p <value> or --port. Remember to change the port in launch.json first since Visual Studio Code will reload and stop all programs running in the builtin terminal.
10. Debug > Launch Chrome against localhost

launch.json

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

Thank you very much! I was searching for this exact same tutorial. You are a blessing :D

Also for the people like me who are following various fullstack tutorial, if the folder .vscode is in a upper position of your angular project (the folder you create with "ng new nameOfTheProject") you have to edit the configuration as such:

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

Thank you very much! I was searching for this exact same tutorial. You are a blessing :D

@blowysrl , thanks for taking the time to share feedback. I appreciate the note that the webRoot for Angular projects may differ.