How to debug your React Application as a Professional

1) Click Run & Debug in the VS tab and then create a launch.json file.

2) Select Web Chrome or Edge.

3) You will see right now this configuration.

4) Change the port based on your react web application port (I am using Vite so I'll change the port to 5173)

5) Run your application and click the F5 or play button

6) Right now you are in debugging mode.

let's have an example by adding a breakpoint by clicking on the previous line number this function will be executed once we click on the click button

To track the value we have multiple ways

1. Variables: Contains all the variables inside the app (state, let, const...etc).

2. Watch: you can select one of a variable to track or you can create a custom condition for example (count === 6).

3. Call Stack: it's a stack of functions that will be called after the breakpoint finishes.

4. Breakpoints: The breakpoint that we added.