Question

0

857

Views

Punto de interrupción independiente: Angular, VS Code, Chrome, PWA

Versiones:

 Angular CLI: 11.2.11 Node: 14.16.0 VS Code: 1.59.0 Chrome: 92.0.4515.131 Debugger for Chrome (Nightly): v2020.2.15300 JavaScript Debugger (Nightly): v2021.8.217 (No other VS Code extensions loaded)

Ambiente

Windows 10: ejecutándose como usuario limitado. No puedo instalar nada más que software aprobado, lo que significa que estoy atascado con la versión de Node anterior, puedo actualizar VS Code, pero no instalar una versión específica, etc.

lanzamiento.json:

 { "name": "Launch PWA-Chrome", "request": "launch", "type": "pwa-chrome", "url": "http://localhost:4200/", "webRoot": "${workspaceFolder}" }, { "name": "Attach to Chrome", "port": 9222, "request": "attach", "type": "pwa-chrome", "webRoot": "${workspaceFolder}" }

Como cuando:

Ocurre para una aplicación Angular Vanilla configurada como PWA. Establezca un punto de interrupción en cualquier lugar y obtenga un "punto de interrupción sin vincular".
Ocurre al iniciar Chrome y al conectarse a Chrome (en modo de depuración).
No ocurre para la aplicación angular de vainilla que no es PWA: puedo depurar la aplicación angular de vainilla que no es PWA.
Ocurre cuando se inicia sesión en Windows como administrador (local) o limitado. Ninguna diferencia.

Investigación y lo que he probado:

Mi situación es diferente a esta: Punto de interrupción no enlazado - Código VS | cromo | Angular . El mío es un PWA y siempre tengo un punto de interrupción sin vincular cuando comienzo con "ng serve".
Probé el cambio en angular.json: "sourceMap": verdadero - Sin efecto
Intenté "Ejecutar -> Deshabilitar todos los puntos de interrupción, luego habilitar todos los puntos de interrupción" - Sin efecto
Intenté degradar VS Code a 1.52.1 (cuando la depuración funcionó por última vez) - Sin efecto
Intenté agregar al paquete web: devtoolModuleFilenameTemplate: '[absolute-resource-path]' - Sin efecto
Intenté deshabilitar todas las extensiones, excepto Chrome y el depurador JS - Sin efecto
Intenté adjuntarlo a Chrome en modo de depuración, pero aún no llega a un punto de interrupción

over 4 years ago · Santiago Trujillo

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-07T19:28:53.142Z

Las compilaciones angulares optimizan los scripts utilizando varias estrategias. Deberías desactivarlo. Utilice los siguientes ajustes de configuración. La clave es deshabilitar la optimización y minificación de compilación. Después de su sesión de depuración, puede restaurarlos a sus valores originales.

 "sourceMap": true, "buildOptimizer": false, "optimization": false, "serviceWorker": false

Si lo anterior no funciona, pruebe esta combinación que deshabilita explícitamente las optimizaciones para cada tipo de recurso

 "sourceMap": true, "buildOptimizer": false, "serviceWorker": false, "optimization": { "scripts": false, "styles": false, "fonts": false }

Lea más: https://angular.io/guide/workspace-config#optimization-configuration

Configuración de código VS

VS Code usa un archivo llamado launch.json . Asegúrese de que el archivo tenga la configuración correcta. A continuación se muestra una configuración de muestra. Modifique los detalles de su aplicación (asegúrese de usar la configuración de inicio/depuración debug-my-pwa-app de su VS Code)

 { "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "debug-my-pwa-app", "url": "http://localhost:4200", "webRoot": "${workspaceFolder}" } ] }

Answer 2 · 2022-06-07T19:28:53.155Z

¿Puedes depurar simplemente poniendo:

 // ... code debugger // ... code

, dentro de tu código?

0

857

Punto de interrupción independiente: Angular, VS Code, Chrome, PWA

2 answers

0

Configuración de código VS

0

Find remote jobs

Andres GPT