¿Cómo depurar Angular con VSCode?

¿Cómo configuro Angular y VSCode para que funcionen mis puntos de interrupción?

Probado con Angular 5 / CLI 1.5.5

1. Instale la extensión del depurador de Chrome
2. Cree la launch.json(dentro de la carpeta .vscode)
3. Usa mi launch.json(ver abajo)
4. Cree la tasks.json(dentro de la carpeta .vscode)
5. Usa mi tasks.json(ver abajo)
6. Presione CTRL+ SHIFT+B
7. prensa 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
        }
      }
    ]
  }

Probado con angular 2.4.8

1. Instale la extensión del depurador de Chrome
2. Crea el launch.json
3. Usa mi launch.json(ver abajo)
4. Inicie el servidor de desarrollo en vivo NG ( ng serve)
5. prensa 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 el equipo de VS Code ahora está almacenando recetas de depuración.

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

Hay dos formas diferentes de hacerlo. Puede iniciar un nuevo proceso o adjuntarlo a uno existente.

El punto clave en ambos procesos es tener el servidor de desarrollo webpack y el depurador VSCode ejecutándose al mismo tiempo .

Lanzar un proceso

1. En su launch.jsonarchivo agregue la siguiente configuración:

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

2. Ejecute el servidor de desarrollo Webpack desde la CLI angular ejecutando npm start

3. Vaya al depurador VSCode y ejecute la configuración "Sesión de depuración angular". Como resultado, se abrirá una nueva ventana del navegador con su aplicación.

Adjuntar a un proceso existente

1. Para eso necesitas ejecutar Chrome en modo depurador con puerto abierto (en mi caso será 9222):

   Mac:

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

   Ventanas:

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

2. launch.json el archivo se verá de la siguiente manera:

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

3. Ejecute el servidor de desarrollo Webpack desde la CLI angular ejecutando npm start
4. Seleccione la configuración "Chrome Attach" y ejecútelo.

En este caso, el depurador se adjunta al proceso existente de Chrome en lugar de abrir una nueva ventana.

Escribí mi propio artículo, donde describí este enfoque con ilustraciones.

Instrucciones simples sobre cómo configurar el depurador para Angular en VSCode

Esto se explica en detalle en el sitio de Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial

Puede usar esta configuración:

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

Aquí hay una solución un poco más ligera, funciona con Angular 2+ (estoy usando Angular 4)

También agregó la configuración para el Servidor Express si ejecuta la pila 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"
      ]
    }
  ]
}

La respuesta de @Asesjix es muy exhaustiva, pero como algunos han señalado, aún requiere múltiples interacciones para comenzar ng servey luego iniciar la aplicación Angular en Chrome. Obtuve esto trabajando con un solo clic usando la siguiente configuración. La principal diferencia con la respuesta de @ Asesjix es que el tipo de tarea es ahora shelly las llamadas de comando se agregan startantes, ng servepor lo que ng servepueden existir en su propio proceso y no bloquear el inicio del depurador:

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

En mi caso, no había usado el árbol de carpetas del proyecto Angular original y sabía que algo iba mal con el webRoot/{workspaceFolder} bit, pero toda mi experimentación no arrojó ningún resultado. Recibí un consejo de otra respuesta SO que vincularé si lo encuentro nuevamente.

Lo que me ayudó fue encontrar el contenido de la variable {workspaceFolder}en tiempo de ejecución y luego modificarlo a la ubicación de mi carpeta "src" en la que tienes "app / *". Para encontrarlo, agregué una preLaunchTaska mi archivo launch.json y una tarea para generar el valor {workspaceFolder}.

launch.json , que aparece después de instalar el depurador de 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 No presente de forma predeterminada. Presiona Ctrl + Shift + p y creo que se llama 'crear tarea para otro comando' o algo similar. Parece que no puedo verlo después de que se crea task.json. También podría simplemente crear el archivo en la misma ubicación que launch.json

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

Una vez que supe el valor de $ {workspaceFolder}, lo arreglé para apuntar a mi carpeta src en mi nuevo árbol de proyectos y todo funcionó. La depuración requiere ng serveque se haya ejecutado como tarea de prelanzamiento o como parte de la compilación (ejemplos anteriores) o en un símbolo del sistema.

Aquí hay un enlace a todas las variables que puede usar: