¿Cómo depurar Angular con VSCode?

Indagamos por diferentes espacios para traerte la solución para tu duda, si continúas con alguna pregunta déjanos tu duda y te contestamos con gusto, porque estamos para ayudarte.

Solución:

Probado con Angular 5 / CLI 1.5.5

1. Instalar la extensión del depurador de Chrome
2. Crear el launch.json (dentro de la carpeta .vscode)
3. Usa mi launch.json (vea abajo)
4. Crear el tasks.json (dentro de la carpeta .vscode)
5. Usa mi tasks.json (vea abajo)
6. prensa CONTROL+CAMBIO+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. Instalar la extensión del depurador de Chrome
2. Crear el launch.json
3. Usa mi launch.json (vea abajo)
4. Inicie el servidor de desarrollo 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/*"
      
    
  ]

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 lanzamiento un nuevo proceso o adjuntar a uno existente.

los key punto en ambos procesos es tener el servidor de desarrollo webpack y el depurador VSCode se ejecutan al mismo tiempo.

Lanzar un proceso

1. En tus launch.json archivo 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 Angular CLI 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 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útela.

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

Comentarios y calificaciones

Acuérdate de que tienes autorización de agregar una reseña si acertaste tu contratiempo a tiempo.

---

---

Utiliza Nuestro Buscador