Understanding Java script Debugging and Coding

[AsimKhan2019]

We created a new index2.html file in our current portfolio repo, which had the following

2 input fields
1 button
1 label to show value

In the first 2 input fields we will enter in any given numbers.
On the button click the result of the 2 input fields will be displayed in the label.

We added a function.js file that would do the following:

Take the values of the 2 input fields
Sum both the values
Display it in the label field

The hidden error: instead of displaying the sum it displayed the 2 numbers appended together.

In order to discover and fix the issue, we fired up our Edge browser and pressed F12 to open the developers tools window.

In the console window we witnessed the results being displayed according to the script written. In the function.js file we used console.log() to display the results and values being retrieved from the user entry.

In order to properly understand the function we clicked on to the source panel, where we witnessed:
File Directory
Source Code Review
Java Script debugging
Scope and Watch listener / expression

In the File directory we clicked on the function.js file and clicked on line 8 to attach a breakpoint to the code.
In the Java Script Debugging, we scrolled to the Event Listener Breakpoint and selected the click checkbox under the Mouse section
We added the numbers in the field and clicked the button

Upon the on click event, a paused breakpoint appeared on the page and the process paused
In the Source Code section, the breakpoint displayed file known as Grammarly-check.js
Ignoring this file, we clicked onto the function.js file.
We pressed F9 and witnessed some description in the Scope section of the page.
It displayed the details, attributes, events, and properties associated with the click event.

Upon hovering over the variables defined in the function.js did the same and displayed the attributes of the variables and their values.
By stepping into the code did not do much difference to the code, as the line stayed in the same place.
By pressing F8 the real operational steps began. By continuing with the process we understood the values that were being passed into the variables.
Realizing that something is not right, we pressed F11 to see more details of the values.

To understand truly what the sum variable was we added a Watch expression to the variable, using typeof sum.
This returned the sum as object variable and not integer or string.
Upon realizing that the value is not integer, we parsed both values into integer and passed the total to the sum variable.

This helped us understand the real process of debugging java script codes in browser.