Depurar con Visual Studio Code no funciona

Solución:

Pude resolver este problema en OSX. La razón por la que es tan doloroso es que hay varias cosas que causan el problema.

1. Golpeaste al primero con --user-data-dir=remote-profile: Si ya está ejecutando Chrome (por ejemplo, ya tiene pestañas abiertas, ¿quién no?), Debe usar una userDataDir para que Chrome lance una instancia independiente.
   Sin embargo, la forma correcta de hacer esto es agregar "userDataDir": "${workspaceRoot}/.vscode/chrome", a su configuración de launch.json (ver más abajo). Este debe ser un camino. Si se usa ‘perfil remoto’, intenta encontrar un directorio relativo llamado ‘perfil remoto’.
2. Necesitas configurar sourceMapPathOverrides en su configuración launch.json, cuyo valor depende de su sistema operativo:
   OSX: "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }

   Ventanas: "sourceMapPathOverrides": { "webpack:///C:*":"C:/*" }

   Linux: "sourceMapPathOverrides": { "webpack:///*": "/*" }

   (Nota: no he probado las versiones de Windows o Linux)

Aquí está mi trabajo launch.json en OSX:

{
    // 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 Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            // This forces chrome to run a brand new instance, allowing existing
            // chrome windows to stay open.
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            //"diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "url": "http://localhost:4200",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        }
    ]
}

Para que esto funcione, corre ng serve en una terminal, luego presione F5 dentro de Visual Studio Code.

Estas son las versiones con las que estoy trabajando:

• angular-cli: 1.0.0-beta.24
• nodo: 7.3.0
• Cromo: 55.0.2883.95
• Código de Visual Studio: 1.8.1
• Extensión de VSCode “Debugger for Chrome” msjsdiag.debugger-for-chrome: 2.4.2

¡Finalmente lo hago funcionar completamente!

Para los interesados:

(usando el navegador chromium en Linux, pero puede reemplazarlo fácilmente por “chrome”).

Primero, aquí está el launch.json config:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src",
            "url": "http://localhost:4200/",
            "sourceMapPathOverrides": {
              "webpack:///*": "/*"
            }
        }
    ]
}

Decidí eliminar la parte con “request”: “launch” ya que necesito abrir una nueva ventana del navegador.

Luego, inicie el navegador así:

chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

En la nueva ventana, acceda a http: // localhost: 4200.

Luego, desde VSC, ejecute debug.

Todo debería funcionar bien y debería poder usar puntos de interrupción 🙂

GIF disponible aquí para verlo en acción: http://hpics.li/0156b80

Estoy usando Angular CLI 1.7.3 y Angular: 5.2.9 en Mac OSX. Aquí está la configuración que me funciona:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Client in Chrome",
            "sourceMaps": true,
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*",
            }
        }
    ]
}

---

---

Utiliza Nuestro Buscador