Skip to content

Latest commit

 

History

History
45 lines (34 loc) · 1.88 KB

angular_vscode.md

File metadata and controls

45 lines (34 loc) · 1.88 KB
Raw

VSCode support für Angular

Extension: Angular Language Service

hier

Extension: Auto Import

Extension: VisualStudio IntelliCode

VSCode für Angular npm-scrips-tab anpassen

  • OSX : change Settings: "terminal.integrated.inheritEnv": true, "terminal.integrated.shell.osx": "/bin/bash"

Karma Debug direkt in VSCode:

https://medium.com/nextfaze/debug-angular-10-karma-tests-in-vscode-9685b0565e8

Angular debug direkt in VSCode:

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'; but config.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 "
    },

Log Messages for Breakpoints

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