Find below quick step by step instructions on how to debug Angular applications with Visual Studio Code.
- Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.
- In this article, we will go through some of the angular features by explaining some of its core API. You can follow this angular cheat sheet to build your project. We have tried to cover Angular CLI, Angular Lifecycle Hooks, Angular Routing and much more here. Angular gives us the ability to do a whole lot using their CLI.
- A cheat sheet is a note of notes for quick reference. You might want to bookmark this page as I have collected some of the various code snippets from Angular docs and try to explain them quickly and easily to quickly help you grip Angular and understanding it better as I myself pride in being an Angular expert.
Contents
In this article, we will go through some of the angular features by explaining some of its core API. You can follow this angular cheat sheet to build your project. We have tried to cover Angular CLI, Angular Lifecycle Hooks, Angular Routing, and much more here. Angular gives us the ability to do a whole lot using their CLI.
- Tested on Visual Studio Code v1.52.1 on CentOS 7 (more recent versions do not work on CentOS 7)
Angular 8 Cheat Sheet
- 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
Angular 8 Install
- Menu –> Terminal –> New Terminal (Shortcut: Ctrl-Shift+`)
- on drop down menu in the terminal tab (showing
1: sh
or1: bash
or1: cmd
):
–> Create JavaScript Debug Terminal
- In the debug terminal:
npm run test
–> the debugger automatically connects to the application
Alternatively start the Angular application and debug it via Chrome: Deezer lite.
ng serve --port=8080
Port8080
is the default port used in the Chrome debugger config below; however, you can edit it via Menu -> Run -> Open Configurations to match theng serve
default of4200
- wait until you see „: Compiled successfully.“
- Menu –> Run –> Start Debugging (Shortcut: F5)
- –> Chrome
- A browser opens on localhost:8080
- Use the application as appropriate
- Breakpoints can be set in the code left of the editor (a non-solid white on black or a solid red circle appears)
or
–> once the application hits the breakpoint, the debugger waits for additional instructions to navigate through the code.
- Debugging Shortcuts