Como depurar Angular com VSCode?

Como faço para configurar Angular e VSCode para que meus pontos de interrupção funcionem?

Testado com Angular 5 / CLI 1.5.5

1. Instale a extensão do depurador do Chrome
2. Crie a launch.json(dentro da pasta .vscode)
3. Use o meu launch.json(veja abaixo)
4. Crie a tasks.json(dentro da pasta .vscode)
5. Use o meu tasks.json(veja abaixo)
6. Pressione CTRL+ SHIFT+B
7. pressione F5

launch.json for angular/cli >= 1.3

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

tasks.json for angular/cli >= 1.3

{
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "ng serve",
        "type": "npm",
        "script": "start",
        "problemMatcher": [],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      },
      {
        "identifier": "ng test",
        "type": "npm",
        "script": "test",
        "problemMatcher": [],
        "group": {
          "kind": "test",
          "isDefault": true
        }
      }
    ]
  }

Testado com Angular 2.4.8

1. Instale a extensão do depurador do Chrome
2. Crie o launch.json
3. Use o meu launch.json(veja abaixo)
4. Inicie o NG Live Development Server ( ng serve)
5. pressione F5

launch.json for angular/cli >= 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

launch.json for angular/cli < 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lunch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

Parece que a equipe do VS Code agora está armazenando receitas de depuração.

https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}

Existem duas maneiras diferentes de fazer isso. Você pode iniciar um novo processo ou anexar a um existente.

O ponto principal nos dois processos é ter o servidor de desenvolvimento webpack e o depurador VSCode em execução ao mesmo tempo .

Iniciar um processo

1. No seu launch.jsonarquivo, adicione a seguinte configuração:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Angular debugging session",
         "type": "chrome",
         "request": "launch",
         "url": "http://localhost:4200",
         "webRoot": "${workspaceFolder}"
       }
     ]
   }
   

2. Execute o servidor de desenvolvimento Webpack a partir da CLI angular executando npm start

3. Vá para o depurador VSCode e execute a configuração "Sessão de depuração angular". Como resultado, uma nova janela do navegador com seu aplicativo será aberta.

Anexar a um processo existente

1. Para isso, você precisa executar o Chrome no modo depurador com porta aberta (no meu caso, será 9222):

   Mac:

   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   

   Janelas:

   chrome.exe --remote-debugging-port=9222
   

2. launch.json O arquivo terá a seguinte aparência:

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

3. Execute o servidor de desenvolvimento Webpack a partir da CLI angular executando npm start
4. Selecione a configuração "Chrome Attach" e execute-a.

Nesse caso, o depurador anexado ao processo existente do Chrome em vez de iniciar uma nova janela.

Escrevi meu próprio artigo, onde descrevi essa abordagem com ilustrações.

Instruções simples sobre como configurar o depurador para Angular no VSCode

Isso é explicado em detalhes no site do Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial

Pode usar esta configuração:

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}

Aqui está uma solução um pouco mais leve, funciona com Angular 2+ (estou usando Angular 4)

Também foram adicionadas as configurações do Express Server se você executar a pilha MEAN.

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}

A resposta do @Asesjix é muito completa, mas, como alguns salientaram, ainda requer várias interações para iniciar ng servee iniciar o aplicativo Angular no Chrome. Consegui trabalhar com um único clique usando a seguinte configuração. A principal diferença da resposta do @ Asesjix é o tipo de tarefa agora shelle as chamadas de comando adicionadas startantes ng serveque ng servepossam existir em seu próprio processo e não impedir que o depurador seja iniciado:

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "\"start ng serve\""
      },
      {
        "label": "ng test",
        "type": "shell",
        "command": "\"start ng test\"",
      }
    ]
  }

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}

No meu caso, eu não havia usado a árvore de pastas do projeto Angular original e sabia que havia algo errado com o webRoot/ {workspaceFolder}bit, mas todas as minhas experiências não produziram resultado. Recebi uma dica de outra resposta SO, que eu ligarei se a encontrar novamente.

O que me ajudou foi encontrar o conteúdo da variável {workspaceFolder}em tempo de execução e modificá-lo para o local da minha pasta "src" na qual você tem "app / *". Para encontrá-lo, adicionei um preLaunchTaskao meu arquivo launch.json e uma tarefa para gerar o valor de {workspaceFolder}.

launch.json , que aparece após a instalação do depurador do Chrome

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/newProjectRoot/",
      "preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
    }
  ]
}

Tasks.json Não está presente por padrão. Pressione Ctrl + Shift + pe acho que é chamado de 'criar tarefa para outro comando' ou algo semelhante. Não consigo vê-lo depois que o tasks.json é criado. Você também pode criar o arquivo no mesmo local que o launch.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo values",
      "command": "echo",
      "args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
      "type": "shell"
    }
  ]
}

Depois de conhecer o valor de $ {workspaceFolder}, eu o corrigi para apontar para a minha pasta src na minha nova árvore de projetos e tudo funcionou. A depuração exige ng serveque tenha sido executada como tarefa de pré-lançamento ou como parte da compilação (exemplos acima) ou em um prompt de comando.

Aqui está um link para todas as variáveis ​​que você pode usar: