visual - ¿Cómo depurar Angular con VSCode?

visual studio code angular extensions

Question

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

Answer 1

Probado con Angular 5 / CLI 1.5.5

1. Instale la extensión del depurador de Chrome
2. Cree el launch.json (dentro de la carpeta .vscode)
3. Usa mi launch.json (ver más abajo)
4. Cree las tasks.json (dentro de la carpeta .vscode)
5. Use my tasks.json (ver más abajo)
6. Presione CTRL + MAYÚS + B
7. Presione 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 más abajo)
4. Inicie el servidor de desarrollo NG Live ( ng serve )
5. Presione 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/*"
      }
    }
  ]
}

Answer 2

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

Answer 3

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

Answer 4

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 archivo launch.json 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 archivo launch.json 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

Answer 5

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

Answer 6

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