- OSX : change Settings:
"terminal.integrated.inheritEnv": true, "terminal.integrated.shell.osx": "/bin/bash"
https://medium.com/nextfaze/debug-angular-10-karma-tests-in-vscode-9685b0565e8
see: https://youtu.be/tC91t9OvVHA
- no debugger in chrome extension necessary
- start the app via npm script "start" (or
ng serve
) - open vscode debug panel, wenn app.component.ts im editor offen ist
- klick auf "Ausführen und Debuggen"
- editiere den port auf "4200" in der
launch.json
wenn nötig. - klicke oben auf den grünen Pfeil zum starten
- see : https://github.com/microsoft/vscode-js-debug/blob/main/OPTIONS.md for more options
- make sure that webpack.config.js does NOT use
config.devtool = 'eval-cheap-source-map';
butconfig.devtool = 'eval-source-map';
- evtl muss man den ersten Breakpoint noch im Browser setzten, dannach sollte es auch in vscode funktionieren , oder man fügt den quellen ein "debugger;" an zentraler stelle hinzu .
- verwende im vscode zum debuggen:
{
"type": "pwa-chrome",
"request": "launch",
"name": "PWA-Chrome localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"userDataDir": "~/chrome-debug-profile",
"_comment": "userDataDir=\"mydir\" -> verwendet immer gleiches Chrome-Profil incl der installierte debug-extensions "
},
den Breakpoint - Log-message editieren : sinnDesLebens= {meine_expression}
, wenn meine_expression = 42
wäre würde in der console bei jedem durchlauf des debuggers ergeben sinnDesLebens= 42