Angular - Debugging Step by Step in Browser - Practical

Our Case - 

1. We will take two numbers from the browsers
2. In ts, we just sum two numbers
3. And finally we will show the result in browsers.

The problem is that after the summation of two numbers, the .ts function always returns the result as 500.

Therefore, in the browser, the result shows 500. Which is the wrong result. It raises a logical error.

So we will debug the .ts function in the browser and find out the problem.

Debugging Start

Step 1: Inspect the web page and select 'Source' tab.

Step 2: On the left side, the browser will show our all the components. Open our targeted component.

Step 3: Now open the .ts file. and add a breakpoint. Like here break point at line 14. At the right-top site are the icons for debugging activities. such as step-over, step-into, etc.

Step 4: After adding the breakpoint, again do the action on the page. Like, We sum both numbers again after adding a breakpoint. 

Step 5: Finally, click on the step-over icon then it will execute line by line and see all variable values with the cursor on variables. Click on the above image and see the actual problem and result value after the sum is 10. The result variable again initializes with 500 after summation. That's the mistake. So it is showing the wrong result as 500 in the front end.

Done 😉