Angular CLI 1.7.0 y Visual Studio Code: no se pueden establecer puntos de interrupción

visual-studio-code angular-cli

Question

Estoy usando el complemento Chrome Debugger en Visual Studio Code para depurar una aplicación Angular. Después de actualizar para usar angular/[email protected], ya no podemos alcanzar los puntos de interrupción en el código mecanografiado dentro del Código VS durante la depuración. Si volvemos a angular/[email protected], los puntos de interrupción comenzarán a funcionar nuevamente.

Aquí está mi salida ng -v:

Angular CLI: 1.7.0
Node: 9.2.0
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.5.3
webpack: 3.11.0

¿Hay alguien más experimentando esto?

Answer 1

Establecer sourceMapPathOverrides no fue suficiente.

En mi caso, el archivo index.html se encuentra en "/ src" y los componentes angulares en "/ src / app". Uso @ angular / cli 1.7.4, vscode 1.22.2 y el depurador de cromo 4.3.0.

Tuve que establecer tres parámetros en el launch.json.

"sourceMapPathOverrides": { 
    "webpack:/*": "${webRoot}/*"
},
"webRoot": "${workspaceFolder}",
"sourceMaps": true,

sourceMaps es opcional, pero asegúrese de que no esté configurado en falso.

Debe establecerse para cada configuración del archivo de configuración launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Chrome DEBUG 172.22.44.49",
            ...

En la documentación de mapas de origen del depurador de Chrome , se dice que establece WebRoot en el directorio desde el que se sirven los archivos. Pero para resolver este problema, tuve que configurarlo en el directorio raíz del espacio de trabajo.

Answer 2

Lo mismo aquí, regresé a 1.6.8 (y angular 5.1.1) para que mis puntos de interrupción vuelvan a funcionar.

Answer 3

Para aquellos que se encuentren con esto, la solución es modificar su launch.json sourceMapPathOverrides de la siguiente manera:

"sourceMapPathOverrides": { 
    "webpack:/*": "${webRoot}/*" 
}

Esto me lo arregló con el último @ angular / cli (versión 1.7.3).

La respuesta fue encontrada here .

Answer 4

Sí, lo mismo aquí.

A veces puedo alcanzar el punto de interrupción que quiero con cierta dificultad (el problema parece estar en el mapa fuente, pero el depurador sigue funcionando).

Intenté jugar con algunas configuraciones en la configuración de inicio del depurador de VS-Code ("sourceMaps" y "trace"), pero fue en vano.

Finalmente, retrocedí @ angular / cli a 1.6.8 y funciona bien nuevamente.

Editar: Olvidé mencionar, en caso de que ayude a alguien a buscar este problema: al comenzar la depuración, los puntos de interrupción desaparecen del archivo fuente y su pestaña está marcada con "contenido en línea de solo lectura del mapa fuente".

Además, @ angular / cli 1.7.1 no resuelve esto.

Answer 5

CLI angular 7.2.2 :

Webstorm / Intellij : los puntos de interrupción nunca alcanzan, VSCode : los puntos de interrupción no verificados / nunca alcanzan, el depurador de Chrome : los puntos de interrupción alcanzan perfectamente

Solución: en angular.json establezca evalSourceMap en "false".

Esto activa el Webpack que Angular CLI utiliza debajo del capó para generar mapas fuente al código fuente original ("mapa fuente") en lugar del código generado ("eval"). https://webpack.js.org/configuration/devtool

Vea en node_modules @ angular-devkit / build-angular / src / angular-cli-files / models / webpack-configs / browser.js

Por supuesto, puede hackear el archivo browser.js para establecer algún otro valor para devtool.