How can I debug an application with Angular 7 on frontend and Spring Boot on backend

Question

I have an application with Angular 7 on frontend ( Visual Studio Code ) and Spring Boot on backend ( intelliJ Idea Community Edition ) and after implementing JWT in the project I am having trouble understanding which methods are getting called and in which order.

I am running Angular on 4200 and calling REST methods from 8080, displaying the result on 4200. What I want is to start the app in debug mode and if a method is called from VS Code I want to be taken there and if that method calls one from intelliJ I would like to be taken there and see it.

Any suggestions on how can I see the flow of my app or how can I understand better what is going on exactly ?

Answer 1

To debug angular code follow these steps:-

Option 1 Using VS-code

https://offering.solutions/blog/articles/2016/10/16/how-to-debug-an-angular-application-with-chrome-and-vs-code/

OR Option 2 You can directly use the chrome.

1. ctrl+shift+I and go to the source tab
2. ctrl+p you will get the list of files. choose your file for ex. app.component.ts
3. Now you can see your code and use the sidebar you have line numbers to select debug points.

To debug the spring boot application using IntelliJ Just click on the debug button from the menu next to the run button. the application will start in debug mode.