Problem
Many beginners as well as experienced guys still find it difficult to understand how to debug any JavaScript or React based or any web application. People struggle to find the correct script file being used by looking at the UI or in other words which file to debug from among many files present in the application?
Solution
Use of Debugging:
– It tells you how data is flowing from one variable to another
– It helps you solve application bugs easily by finding errors
– It tells you when data is being updated
– You can get the value inside if(condition) code block to know whether
the condition was coming true or false
– It tells you output of any API that you might have called in your app
– It makes you understand structure of the application better
– It helps you read value of data coming from any other place
– It lets you run your code during execution to test any logic in console/watch
We’ll see solution to all above Problems and will guide you to how to debug any javaScript or React application easily.
For this blog, we are using our React + Redux + Asp.Net Core + JWT + MongoDb based ToDo application.
To know how we created this application, you can visit – Creating a React app with Dotnet Core as backend and publishing on Azure.
Please open the application and run it using Visual Studio 2022 (follow Readme file to setup)
After you open the application just login you will see this UI:
From the UI, these list items are ToDo items, green means complete, red means not yet complete and a text box to add new item.
On right side of the ToDo items, we have a tick button which marks it completed, we want to know how it works.
To know how tick button works or to debug the tick button we need to know if there is any method present over the tick button by inspecting the tick button. To do this, right click on tick button in browser and select the Inspect option
It will take us to the browser inspect section, there we’ll find in the html, if there is any specific class or id given to this tick button element.
We can see a class name doneLogo present on each similar tr>td>img element, so this might be our key, so we’ll search this doneLogo class in our project in Visual Studio.
There we’ll find all the js files(React component here) which has this class used in html, then we’ll find which among these React components looks very similar to our html structure. We’ll open all those files in browser inside Brower > Sources section using Control + P > find file name.
In this case we found two js files GetUserToDoItem.js & ListAll.js
We’ll will find if there is any onClick={} method present over that html.
Now we know that there is a onClick method present over that html, this method is DoneToDoItem, now we’ll find where method is pointing to by F12 or by (ctrl + click) and will reach at that method and will put break point inside that method.
Note:
Program in most of the languages executes line by line or one line or a code block at a time.
Now we’ll put break point inside the DoneToDoItem methods in all the files which has this method as currently we don’t know which file is being used the current UI.
Now after putting break points when we click the tick button it will stop at the method in the correct file which is being used by the current UI. That’s how we’ll know which is the correct JS file in our case to debug.
As shown below the breakpoint is hit and execution has paused at line 142
In code at line 142, we are trying to get value of items filtered by our required ToDoItem Id from this.state and put the output to the “item” variable.
let item = this.state.items.filter(item => item.id == Id);
Currently value of item variable is undefined as the line of code ie. 142 has not been executed, so after the execution of line 142 only we will be able to see any value in the item variable. To do that we may press F10 or can click the F10 also called as step-over button.
Now you can execute line by line using F10 or can give the application a free run by F8 or now after pressing one time, it will execute one line of code now we’ll get the value of this.state.items.filter(item => item.id == Id); inside our item variable. You can see the value in watch block or in the console tab as well.
Similarly, you can find how delete button is working by first finding the correct js files, then find the method being called on click and putting break points in the method inside the js file
Note:
Variables (example item at line 142) will hold the actual data only during running/debugging.
Once execution is complete the data is erased, and these variables will not be having any data.
Also, during debugging you can check value inside a variable only in the current code block which is marked by curly bracket { code variables } so current code block is the lines inside DoneToDoItem method, i.e. between (141-176)
To Understand the topic in more detail we have this video debugging the same app. Besides debugging and its best practices, it’s showing how to know which file is being used currently in UI, how to get value, how/when variable stores value.
More from Node/Javascript:
Have shared this post with freshers, they found it helpful
as a fresher, I found it easy to follow and helpful as well