0
244
VisualizaçõesPunto de interrupción sin vincular - Código VS | cromo | Angular
Tengo una aplicación Angular que estoy tratando de depurar en VS Code .
Cuando compilo y ejecuto la aplicación ( ng serve ), los puntos de interrupción están vinculados:
Sin embargo, cuando especifico una configuración diferente, por ejemplo, -c qa o -c uat , no están vinculados:
- ¿Por qué los puntos de interrupción no están vinculados cuando especifico una configuración diferente?
- ¿Cómo vinculo los puntos de interrupción para una sesión de depuración dirigida a un entorno en particular?
Informacion relevante
configuración del entorno de muestra angular.json :
"uat": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.uat.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "extractLicenses": false, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ] },Versionado de software:
- Código de Visual Studio
1.50.1 - cromo
83.0.4103.122 - Depurador para Chrome
4.12.11 - Depurador de JavaScript (Nocturno)
2020.10.2217
10 Respostas
Responde à pergunta0
En mi caso, lo rastreé hasta una incompatibilidad entre mi versión de Node (17) y mi versión de Angular (13) que se mostró cuando ejecuté ng version . Bajé la versión de Node a v16 y ahora todo funciona. También hay una lista de compatibilidad no oficial.
0
Tuve el mismo problema en mi proyecto vueJS. Algo para probar antes de realizar cambios en los archivos, etc., lo resolvió para mí:
En la carpeta ClientApp/App: 1. Elimine la carpeta node_modules 2. Elimine el archivo package-lock.json 3. Abra un indicador de cmd para su carpeta ClientApp/App 4. Use el cmd "npm i"
Este paso final reinstalará todos sus módulos de nodo. El problema que tuve debe haber sido un módulo de nodo en conflicto.
0
Para mí, los consejos aquí no resolvieron el problema, ¡pero reiniciar (salir y abrir de nuevo) el Código VS sí lo hizo!
0
He tenido varios éxitos con varias de las respuestas anteriores en el pasado. Esta semana volvió el tema. Por alguna razón, esta vez pude resolverlo proporcionando una configuración predeterminada en mi archivo angular.json.
"defaultConfiguration": "dev"
Esto tampoco tiene ningún sentido para mí, pero si lo elimino, todos mis puntos de interrupción se "desvinculan" en el tiempo de ejecución.
Solo pensé en poner esto aquí en caso de que ayude a alguien más.
Saludos, Dan
PD: actualización para agregar una mejor solución. Tenía la configuración correcta en mi configuración "dev", pero también puedes poner
"sourceMap": trueen el nivel de arquitecto de angular.json para que sea el predeterminado. Esta configuración fue mi problema todo el tiempo. La configuración predeterminada también es útil para otras configuraciones como la optimización: false, presupuestos, etc. Por lo tanto, eliminé la línea de configuración predeterminada, ya que mi configuración de desarrollo ahora es la predeterminada.
Últimamente paso mucho tiempo preparando la configuración de angular.json. ;-)
0
Intenté todo lo anterior y reinicié aún sin golpear. No hay error, no se bloquea, toda la aplicación es como si se hubiera alcanzado un punto de interrupción esperando a que continúe, pero no ve que se esté alcanzando ningún punto de interrupción. Sin embargo, los navegadores independientes Chrome y Edge funcionan bien.
Tenga en cuenta que esto no es solo Angular, ¡también ocurre en el backend de Node!
Entonces, además de configurar todo lo anterior, Ejecutar -> Deshabilitar todos los puntos de interrupción, luego Habilitar todos los puntos de interrupción lo resolvió.
2021-09-17 , hoy deja de funcionar de nuevo a pesar de todo. Finalmente , agregando un nuevo punto de interrupción , recupérelo. Este comportamiento puede estar relacionado con el retraso extremo del depurador . Definitivamente un error de VSC.
0
Esto no responderá la pregunta directamente, sino un consejo general para saber cuál es el problema: Establezca trace: true cuando inicie o adjunte su depurador. Detenga el depurador. Mira los registros. La ruta debe estar en la consola de depuración.
Vaya a este sitio web para analizar su registro. https://microsoft.github.io/vscode-pwa-analyzer/index.html
Haga clic en sourcemap.parsing y runtime.sourcemap en los filtros de etiquetas. Verás cosas como esta: 
Al menos ahora tiene un ciclo de retroalimentación para saber cómo su launch.json afecta los mapas de origen.
El archivo de lanzamiento (círculo en rojo) también tiene mucha información útil
0
En mi caso necesitaba cambiar webroot
DESDE
"webRoot": "${workspaceFolder}"
TO "webRoot": "${workspaceFolder}\projectName"
El nombre del proyecto es el nombre que le diste al principio ng new projectName
Luego límite de punto de interrupción.
0
La solución para esto fue simple, no había establecido la propiedad sourceMap en true en angular.json para ese entorno en particular, en su lugar tenía "sourceMap": false,
Consulte https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap para obtener más información.
Gracias a Connor - https://github.com/microsoft/vscode-js-debug/issues/872
0
Para mí, la configuración de vscode:
Depurar > Javascript: use Vista previa que hace que el depurador no alcance los puntos de interrupción.
Desmarque Depurar > Javascript: Usar vista previa en la configuración de vscode.
(o en el archivo json de configuración/área de trabajo) agregue:
"debug.javascript.usePreview": false0
Para mí, resolví el problema agregando esta opción a mi webpack.config.js:
devtoolModuleFilenameTemplate: '[absolute-resource-path]'