Pregunta Cómo depurar Angular con VSCode?


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


76
2018-02-27 20:59


origen


Respuestas:


  1. Instala el Extensión del depurador de Chrome
  2. Crea el launch.json (dentro de la carpeta .vscode)
  3. Usa mi launch.json (vea abajo)
  4. Crea el tasks.json (dentro de la carpeta .vscode)
  5. Usa mi tasks.json (vea abajo)
  6. prensa CTRL+CAMBIO+segundo
  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 5 / CLI 1.5.5


  1. Instala el Extensión del depurador de Chrome
  2. Crea el launch.json
  3. Usa mi launch.json (vea abajo)
  4. Inicie el servidor de desarrollo de NG Live (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/*"
      }
    }
  ]
}

Probado con Angular 2.4.8


110
2018-02-27 21:27



Parece que el equipo 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"]
    }      
  ]
}

26
2017-07-27 04:25



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


3
2018-04-24 08:02



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

También se agregaron las configuraciones 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"
      ]
    }
  ]
}

1
2018-05-25 11:45



Hay dos formas diferentes de hacer eso. Usted puede lanzamiento un nuevo proceso o adjuntar a uno existente.

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

Lanzar un proceso

  1. En tus launch.json archivo agrega 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 Angular CLI ejecutando npm start

  3. Vaya al depurador VSCode y ejecute la configuración de "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 el modo de depuración con el puerto abierto (en mi caso será 9222)

    Mac:

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

    Windows:

    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 Angular CLI ejecutando npm start
  4. Seleccione la configuración "Chrome Attach" y ejecútelo.

En este caso, el depurador se adjuntó al proceso de Chrome existente 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


0
2017-07-03 11:38