¿Depurar y ejecutar Angular2 Typecript con Visual Studio Code?

Respuestas:

124

Después de mucha investigación, encontré estos pasos:

Antes de comenzar, asegúrese de tener la última versión del código VS. Puede verificar la última versión: Ayuda> Buscar actualizaciones o Acerca de.

  1. Instale la extensión llamada 'Depurador para Chrome'. Una vez que se complete la instalación, reinicie el código VS.

  2. Vaya a la ventana Depurar, abra launch.json usando Chrome.

  3. En la sección de configuración de Launch.json, use la siguiente configuración

    {
    "name": "Launch localhost with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/Welcome",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}"
}

  4. En tsconfig.json, asegúrese de tener "sourceMap": true

Esto completa la configuración del entorno de depuración. Ahora, antes de comenzar a depurar, asegúrese de que todas sus instancias de Chrome.exe existentes estén cerradas. Verifique desde el Administrador de tareas O use el comando de DOS 'killall chrome'

  1. Ejecute su proyecto, usando el comando npm start y Chrome como navegador predeterminado.

  2. Una vez que la aplicación se haya ejecutado correctamente, recibirá el número de puerto. Copie la URL del navegador Chrome y péguela en la sección de URL de arriba. (NOTA: Si está utilizando el enrutamiento en su aplicación, entonces la URL le gustaría arriba, de lo contrario terminará index.html, etc.)

  3. Ahora, coloque los puntos de interrupción donde desee en sus archivos mecanografiados.

  4. Nuevamente, vaya a la ventana de depuración en el código VS y presione Ejecutar. Su pestaña / instancia conectada al depurador se verá a continuación.

Depuración de Chrome

— Sanket
fuente
4
no puedo entender .. 1. qué extensión instalar. 2. ¿Dónde está Launch.json?
— azulay7
3
@ azulay7 ¿Está usando VScode por primera vez? Su VScode no Visual Studio 2015 IDE. De todos modos, en el lado izquierdo, verá la opción Depurar (o use CTRL + MAYÚS + D) haga clic para abrir la ventana Depurar. Una vez que abra la ventana de depuración, en la parte superior derecha de la ventana de depuración verá la opción para abrir Launch.json . Para la extensión de Chrome, verá la opción Extensión (o use CTRL + SHFT + X) en el lado izquierdo. Una vez que abra las ventanas de Extensiones, busque Debugger for Chrome Instale esta extensión. Tendrá que reiniciar VScode. Espero que esto ayude.
— Sanket
4
También estaba luchando con "open launch.json". Los pasos son los siguientes: haga clic en el icono "Depurar" en la barra lateral izquierda, luego haga clic en la rueda dentada en la esquina superior derecha de la ventana Depurar y elija "Chrome" de la lista desplegable si aparece.
— Ivan Krivyakov
6
Alguien más recibiendoFailed to load resource: net::ERR_CONNECTION_REFUSED (http://localhost:3000/)
— benscabbia
3
¿También recibo un error de conexión en el puerto de depuración? HTTP GET failed: Error: connect ECONNREFUSED 127.0.0.1:9222Cargando en localhost bien.
— Mangopop
15

Especifique un userDataDir: esto evitará colisiones con otras instancias de Chrome que ya tenga en ejecución. He notado que debido a esto, Chrome simplemente deja de escuchar en cualquier puerto que especifique. ¡A continuación se muestra lo que uso y es genial!

{
    "name": "Launch",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/#/about",
    "port": 9223,
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

Gracias a @reecebradley - GitHub: No se puede conectar al objetivo: conecte ECONNREFUSED

— HydTechie
fuente
Aún así, uno puede tener problemas. Moví mi base de código a la unidad C: (raíz), la depuración funcionaba bien.
— HydTechie
la depuración de angular 2 chrome no funciona tiene razones extrañas ... algunas veces registra todo lo pendiente en el control de código fuente, toma una carpeta limpia, lo último, la depuración comienza a funcionar ... razón por la que no sé ... :(
— HydTechie
Estoy usando el siguiente lanzamiento json - consistentemente podría ejecutar el código de modo de depuración \ 0 /: {"versión": "0.2.0", "configuraciones": [{"nombre": "Ejecutar localhost con mapas de origen", "tipo": "chrome", "request": "launch", "url": " localhost: 4200 ", "webRoot": "$ {workspaceRoot} / app / files", "sourceMaps": true}, {"name": " Launch "," type ":" chrome "," request ":" launch "," url ":" 127.0.0.1:4200 "," port ": 9222," sourceMaps ": true, //" diagnosticLogging ": true , "trace": "verbose", "webRoot": "$ {workspaceRoot}", "userDataDir":
— HydTechie
¡PRUEBE la opción de lanzamiento para la depuración en vivo en lugar de con mapas de origen!
— HydTechie
5

Tenía un problema similar, pero mi proyecto también incluía un paquete web que causaba que las soluciones anteriores fallaran. Después de atravesar Internet, encontré una solución en un hilo en github:

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

De todos modos, esto es lo que se hizo.

Nota: - Antes de comenzar, debe verificar si tiene la última versión del código de Visual Studio y también ha instalado la extensión llamada ' Debugger for Chrome ' dentro de VS Code.

En primer lugar, en './config/webpack.dev.js'

  • use => devtool: 'source-map'
  • en lugar de => devtool: 'cheap-module-source-map'

Luego instale y use el plugin write-file-webpack-plugin:

  • npm install --save write-file-webpack-plugin

Agregue el complemento a './config/webpack.dev.js' agregando:

  • const WriteFilePlugin = require ('write-file-webpack-plugin');

debajo de Webpack Plugins en la parte superior. Continuar agregando:

  • nuevo WriteFilePlugin ()

a la lista de complementos después del nuevo DefinePlugin (), es decir

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

Esto asegura que los mapas de origen se escriban en el disco.

Finalmente, mi launch.json se muestra a continuación.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:3000/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

observe la ausencia de '/ dist /' en webroot. con esta configuración, los mapas de origen están en ./dist/, pero apuntan a ./src/. vscode antepone la raíz absoluta al espacio de trabajo y resuelve correctamente el archivo.

— malmike21
fuente
5

Aquí hay una documentación oficial del código de Visual Studio sobre cómo depurar Angular en VSCode https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

Para depurar el código angular del lado del cliente, necesitaremos instalar la extensión Debugger for Chrome. Abra la vista Extensiones (Ctrl + Shift + X) y escriba 'chrome` en el cuadro de búsqueda. Verá varias extensiones que hacen referencia a Chrome. Presione el botón Instalar para Debugger para Chrome. El botón cambiará a Instalando y luego, después de completar la instalación, cambiará a Recargar. Presione Recargar para reiniciar VS Code y activar la extensión.

Necesitamos configurar inicialmente el depurador. Para hacerlo, vaya a la vista Depurar (Ctrl + Shift + D) y haga clic en el botón de engranaje para crear un archivo de configuración del depurador launch.json. Elija Chrome en el menú desplegable Seleccionar entorno. Esto creará un archivo launch.json en una nueva carpeta .vscode en su proyecto que incluye la configuración tanto para iniciar el sitio web como para adjuntarlo a una instancia en ejecución. Necesitamos hacer un cambio para nuestro ejemplo: cambiar el puerto de 8080 a 4200.

— Osito de peluche
fuente
¿Qué sucede si quisiera ejecutar Internet Explorer y no Chrome?
— robermann
No sé por qué querrías hacer eso, pero actualmente no hay soporte para IE.
— Teddy
3

Tuve problemas con esto y, aunque la respuesta de @Sankets ayudó, fue este problema el que me resolvió https://github.com/angular/angular-cli/issues/2453 .

Específicamente agregando lo siguiente a launch.json

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}
— rubie
fuente
2

Para semilla angular:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5555",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/src/client",
      "userDataDir": "${workspaceRoot}/out/chrome",
      "sourceMapPathOverrides": {
        "app/*": "${webRoot}/app/*"
      }
    }
  ]
}
— Matt Bierner
fuente
0

Estas modificaciones launch.jsonme funcionaron en MacOS, lo que me permitió hacer que el depurador y los puntos de interrupción funcionaran en una nueva instancia de Chrome por sesión de depuración ...

// This forces chrome to run a brand new instance, allowing existing
// chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
— Simeón
fuente
0

Este está probado y probado:

Paso 1: Instale el depurador de Chrome: simplemente abra la paleta de comandos (Ctrl + Shift + P) dentro de VS Code y escriba Extensiones: comando Instalar extensión. Cuando aparezca la lista de extensiones, escriba 'chrome' para filtrar la lista e instalar la extensión Debugger for Chrome. Luego, creará un archivo de configuración de lanzamiento.

[Más detalles del paso 1]

Paso 2: Cree y actualice el archivo launch.json: Dos configuraciones de launch.json de ejemplo con "request": "launch". Debe especificar un archivo o una URL para iniciar Chrome en un archivo local o una URL. Si usa una URL, configure webRoot en el directorio desde el que se sirven los archivos. Esta puede ser una ruta absoluta o una ruta usando $ {workspaceRoot} (la carpeta abierta en Code). webRoot se usa para resolver URL (como " http: //localhost/app.js ") en un archivo en el disco (como "/Users/me/project/app.js"), así que tenga cuidado de que esté configurado correctamente. actualice el contenido del archivo launch.json de la siguiente manera:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/some_name",
            "webRoot": "${workspaceRoot}/wwwroot"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

[Más detalles del paso 2]

— entusiasta
fuente
0

Necesito usar CORS así que abro Chrome con la seguridad web deshabilitada. Luego hago la depuración de la aplicación Angular adjuntando el depurador a Chrome.

Línea CMD para iniciar Chrome con seguridad web desactivada:

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

launch.json archivo para adjuntar el depurador:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
    ]
}
— Karthik
fuente
0

La respuesta de Sanket fue correcta pero tuve algunos problemas con eso.

Primero, Launch.json está en el directorio ".vscode" del proyecto, y segundo, el número de puerto debe ser el mismo que el puerto del servidor predeterminado que usas para iniciar tu aplicación. Utilizo ng serve de cmd para iniciar mi proyecto y el número de puerto predeterminado era 4200 , así que cambié el archivo launch.json de la siguiente manera.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}
— Hamed Mahdizadeh
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.