Respuestas:
launch.json(dentro de la carpeta .vscode)launch.json(ver abajo)tasks.json(dentro de la carpeta .vscode)tasks.json(ver abajo)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
}
}
]
}
launch.jsonlaunch.json(ver abajo)ng serve)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/*"
}
}
]
}
NG Live Development Servery luego iniciar Chromecon solo un F5clic?
launch.jsony lo tasks.jsonhace aquí. Como entendí launch.jsones iniciar el servidor de nodo y escuchar el puerto 8080, y da tasks.jsoninstrucciones para usar npmy ejecutar el comando ng servepara ejecutar la aplicación.
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 .
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}"
}
]
}
Ejecute el servidor de desarrollo Webpack desde la CLI angular ejecutando npm start
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
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}"
}
]
}
npm startEn 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
chrome.exe --remote-debugging-port=9222. ¿Hay alguna alternativa para la configuración única?
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: