Skip to content

Instantly share code, notes, and snippets.

@cmckni3

cmckni3/angular-debugger-vs-code.md

Last active August 28, 2024 18:20
Show Gist options
  • Save cmckni3/c0429eada7a16813d182e5ce10a7ace2 to your computer and use it in GitHub Desktop.
Save cmckni3/c0429eada7a16813d182e5ce10a7ace2 to your computer and use it in GitHub Desktop.
Download ZIP
Visual Studio code debugger configuration @angular/cli
Raw
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
Raw
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}"
}
]
}
@blowysrl
Copy link

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

}`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment