Find below quick step by step instructions on how to debug Angular applications with Visual Studio Code.


  • Tested on Visual Studio Code v1.52.1 on CentOS 7 (more recent  versions do not work on CentOS 7)


  • Ctrl-Shift+` & Create JavaScript Debug Terminal
  • npm run test or: ng serve --port=8080 with F5 + Launch Chrome
  • set breakpoints (left of the line numbers of the code editor)
  • Navigate through the code:
    • F10: Step Over
    • F11: Step Into
    • Shift+F11: Step Out
    • F5: Continue

Step 1: start JavaScript Debug Terminal

  • Menu –> Terminal –> New Terminal (Shortcut: Ctrl-Shift+`)
  • on drop down menu in the terminal tab  (showing 1: sh or 1: bash or 1: cmd):
    –> Create JavaScript Debug Terminal
    Create JavaScript Debug Terminal

Step 2a: Run Unit Tests

  • In the debug terminal: npm run test
    –> the debugger automatically connects to the application

Step 2b: Run the Application

Alternatively start the Angular application and debug it via Chrome:

  • ng serve --port=8080
    Port 8080 is the default port used in the Chrome debugger config below; however, you can edit it via Menu -> Run -> Open Configurations to match the ng serve default of 4200
  • wait until you see „: Compiled successfully.“
  • Menu –> Run –> Start Debugging (Shortcut: F5)
  • –> Chrome
    Visual Studio Code: Launch Chrome against localhost
  • A browser opens on localhost:8080
  • Use the application as appropriate

Step 3: Set Breakpoints

  • Breakpoints can be set in the code left of the editor (a non-solid white on black or a solid red circle appears)
    Visual Studio Code "Unbound Breakpoint"
    Visual Studio Code Breakpoint

–> once the application hits the breakpoint, the debugger waits for additional instructions to navigate through the code.

Step 4: Navigate through the Code

  • Debugging Shortcuts
    Visual Studio Code Debugging Shortcuts



Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.