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
Kumatin tanaki - Grabt den Klappstuhl aus!
Ich habe dieses Problem auf einem anderen Rechner nachstellen können....
Ist es überhaupt möglich meinen Typescript-Code in VSCode zu debuggen?
Kumatin tanaki - Grabt den Klappstuhl aus!
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.
ServiceStack & Angular = =)
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.
Kumatin tanaki - Grabt den Klappstuhl aus!
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
Microsoft MVP // Me // Blog // GitHub // @Egghead // All my talks // Speakerdeck
Servus Coffeebean,
leider hat Dein Blogpost mich nicht weitergebracht.. Das Problem besteht weiterhin.
Was ich in der Zwischenzeit versucht habe:
{
// 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..
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.
🤔
Kumatin tanaki - Grabt den Klappstuhl aus!
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
Kumatin tanaki - Grabt den Klappstuhl aus!
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.
Achtung:
Während meiner Recherche habe ich des öfteren gelesen, dass in der tsconfig.json ebenfalls die Eigenschaft sourceMap auf true gesetzt sein muss! Dies ist bei mir zwar schon der Fall gewesen, but just in case.
Vielen Dank für die Unterstützung
Grüße
Kumatin tanaki - Grabt den Klappstuhl aus!
anbei ein Bild vom Debugging Chrome + VSCode
Kumatin tanaki - Grabt den Klappstuhl aus!