[Angular] Breakpoints in VSCode (+ Chrome) werden nicht gehittet

Hallo zusammen,

meine Breakpoints werden aktuell in VSCode nicht gehittet und bisher brachte meine googlerei keine Lösung (Ich habe so das Gefühl dass mehrere Leute das selbe Problem haben bzw. dies ein bekanntes Problem ist? 🤔 )

VSCode: V1.22.2
Chrome: V66.0.3359.117 (Offizieller Build) (64-Bit)

Das Problem ist wohl, dass die Symbole nicht geladen werden konnten. Jedoch weiß ich nicht, wie es möglich ist, dass diese geladen werden?

Die nötige Chrome-Extension habe ich bereits installiert. Die Breakpoints im C#-Code (MVC-Controller) funktionieren dagegen problemlos.

Anbei noch meine launch.json:

{
    // Use IntelliSense to find out which attributes exist for C# debugging
    // Use hover for the description of the existing attributes
    // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
    "version": "0.2.0",
    "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            // If you have changed target frameworks, make sure to update the program path.
            "program": "${workspaceFolder}/$unkenntlichgemacht$/bin/Debug/netcoreapp2.0/$unkenntlichgemacht$.dll",
            "args": [],
            "cwd": "${workspaceFolder}/$unkenntlichgemacht$",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart",
            "launchBrowser": {
                "enabled": true,
                "args": "${auto-detect-url}",
                "windows": {
                    "command": "cmd.exe",
                    "args": "/C start ${auto-detect-url}"
                },
                "osx": {
                    "command": "open"
                },
                "linux": {
                    "command": "xdg-open"
                }
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:29685",
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": ".NET Core Attach",
            "type": "coreclr",
            "request": "attach",
            "processId": "${command:pickProcess}"
        },
    ]
}

Für das Debugging nutze ich die Konfiguration ".NET Core Launch (web)".

Chrome ist als Standardbrowser hinterlegt.

Übersehe ich etwas offensichtliches? 🤔 Google ich falsch? 🤔

Danke + Grüße

Ich habe dieses Problem auf einem anderen Rechner nachstellen können....

1. VSCode in der neuesten Version installiert (Erstinstallation von VSCode)
2. dotnet new angular
3. npm install
4. code .
5. C#-Extenion installiert
6. Chrome-Extension installiert
7. Neustart VSCode
8. 'launch.json' generieren lassen
9. Build + Start (F5)
10. Test der Breakpoints... Funktioniert weiterhin nicht

Ist es überhaupt möglich meinen Typescript-Code in VSCode zu debuggen?

Hi scoKi!

Sorry, keine direkte Antwort zu deinem Problem.

Es gibt sonst auch die Möglichkeit Javascript / Typescript Code direkt in Google Chrome zu debuggen.

F12 (developer console) -> Sources.
Danach entweder mittels CTRL+P ein File öffnen, oder im Filetree (links) unter Webpack das gewünschte File suchen. Dort kannst du auch Breakpoints etc setzen.

Ich persönlich debugge Frontend-Code immer über die Chrome Dev Tools.

Servus Regenwurm,

ja, das ist mir bewusst. Ich hätte trotzdem gerne die Möglichkeit in VSCode meinen Typescript-Code zu debuggen.

Ich habe meine launch.json auch testweise mal so angepasst, dass direkt chrome (mit '_--remote-debugging-port=5000 ${auto-detect-url}' gestartet wird.. Dies bringt leider auch keine Besserung.

Hallo scoKi!,

ich hatte mal gebloggt darüber. Ich weiss aber nicht, ob das noch aktuell ist, habe es seitdem nicht mehr probiert. Hast du mal How to debug an Angular application with Chrome and VS Code probiert? Wenn das nicht mehr geht muss ich den Blogpost mal aktualisieren.

Gruss

Coffeebean

Servus Coffeebean,

leider hat Dein Blogpost mich nicht weitergebracht.. Das Problem besteht weiterhin.

Was ich in der Zwischenzeit versucht habe:

• Verwenden der Projektvorlage über das angular-cli (anstelle über dotnet new)
  --> Selbes Problem
  ----> 1. npm install -g @angular/cli
  ----> 2. ng new debugChrome
  ----> 3. cd debugChrome
  ----> 4. ng serve
  ----> 5. code .
  ----> 6. launch.json wie folgt angepasst

{
    // 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",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true
        }
    ]
}

----> 7. Start über F5 (Die Konfiguration 'Launch Chrome against localhost' ist ausgewählt)

Die Breakpoints werden weiterhin nicht gehittet..

• Forken dieses Projektes welches das Angular Tutorial TourOfHeroes um eine entsprechende launch.json für das Chrome-Debugging erweitert
  --> Selbes Problem

Mich beschleicht das Gefühl dass dies entweder gar nicht (mehr) funktioniert oder ich etwas grundsätzlich falsch mache..
(Falls es wichtig ist: das Debugging meiner .ts-Dateien funktioniert im Browser)

Könnte von euch jemand bei Gelegenheit dies mal versuchen nachzustellen? Nur um auszuschließen dass ich etwas falsch mache.

Danke + Grüße

Nachtrag:

"Setting breakpoints, including in source files when source maps are enabled"
In meinem letzten Versuch habe ich in der launch.json den Wert '"sourceMaps": true' gesetzt, wie in der Beschreibung der Chrome-Extension beschrieben ist. Dies brachte leider auch keine Änderung.

🤔

Mich beschleicht das Gefühl dass dies entweder gar nicht (mehr) funktioniert oder ich etwas grundsätzlich falsch mache..

Grundsätzlich müsste das schon funktionieren. Hab ich jetzt seit Monaten nicht mehr ausprobiert, aber hier meine launch.json, mit der das ging. Ich meine, ich hätte damals auch gesucht, und das war eine der Einstellungen, die so aussieht, als ob man sie nicht brauchen würde.

{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200/",
            "webRoot": "${workspaceRoot}/src",
            "sourceMaps": true,
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:///C:*":"C:/*"
            }
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true
        }
    ]
}

Ich denke es liegt an der Property 'sourceMapPathOverrides'.. Ich weis nur nicht so recht welchen Wert ich dort eintragen muss.

Anbei meine jetzige (neue; aus einem anderen Testprojekt) launch.json:

{
    // Use IntelliSense to find out which attributes exist for C# debugging
    // Use hover for the description of the existing attributes
    // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
    "version": "0.2.0",
    "compounds": [
        {
            "name": "ASP.Net Core & Browser",
            "configurations": [
                ".NET Core Launch (web)",
                "Launch Chrome"
            ]
        }
    ],
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:5000",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
                "meteor://»app/*": "${webRoot}/*",
                "webpack:///C:*": "C:/*"
            }
        },
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            // If you have changed target frameworks, make sure to update the program path.
            "program": "${workspaceFolder}/bin/Debug/netcoreapp2.0/test2.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart",
            "launchBrowser": {
                "enabled": false,
                "args": "${auto-detect-url}",
                "windows": {
                    "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
                    "args": "${auto-detect-url}"
                },
                "osx": {
                    "command": "open"
                },
                "linux": {
                    "command": "xdg-open"
                }
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        },
        {
            "name": ".NET Core Attach",
            "type": "coreclr",
            "request": "attach",
            "processId": "${command:pickProcess}"
        },
    ]
}

Gestartet wird die Konfiguration "ASP.Net Core & Browser".

Grüße

Hallo zusammen,

es funktioniert nun.

Das Problem war tatsächlich die Eigenschaft sourceMapPathOverrides welche auf das Verzeichnis zeigen muss, in welchem die entsprechenden Code-Dateien liegen (in meinem Fall die .ts-Dateien)
irgendwie auch logisch..

Meine gültige launch.json sieht nun wie folgt aus:

{
    // Use IntelliSense to find out which attributes exist for C# debugging
    // Use hover for the description of the existing attributes
    // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
    "version": "0.2.0",
    "compounds": [
        {
            "name": "ASP.Net Core & Browser",
            "configurations": [
                ".NET Core Launch (web)",
                "Launch Chrome"
            ]
        }
    ],
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:5000",
            "webRoot": "${workspaceRoot}/ClientApp/app",
            "sourceMapPathOverrides": {
                "*": "${workspaceRoot}/ClientApp/app/*"
            },
            "sourceMaps": true
        },
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            // If you have changed target frameworks, make sure to update the program path.
            "program": "${workspaceFolder}/bin/Debug/netcoreapp2.0/test2.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart",
            "launchBrowser": {
                "enabled": false
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        }
    ]
}

Zum besseren Verständnis habe ich den wichtigen / geänderten Teil als Screenshot angehängt.

Vielen Dank für die Unterstützung

Grüße

anbei ein Bild vom Debugging Chrome + VSCode