Debugging is the process of analyzing code flow against specific defect or bug in software application with the help of debugging tools.
Like C/C++ developers make use of gdb debugger to analyze defects in C/C++ application on Linux platform.
Sometimes fixing a defect in web application becomes a very tedious task for web developers. This is because we are often not aware of the proper debugging tools and techniques. We use console logs that does not help developers to find the exact root cause, and also its time killing the task.
The basic function of the debugger is to stop the execution and calls the debugging function.
What does Chrome Debugger do?
Even, in worst cases, we forget to remove log statements in the final code before delivering to the customer.
Applications of Google Chrome Debugger
Google Chrome browser ships with developer tools (known as Chrome DevTools) that has inbuilt debugger to perform multiple tasks in the client browser.
1. Editing CSS – You can select an element in the browser, e.g a div, right click on it and select `inspect element`. This opens the dev tools and gives you an option to edit the CSS on the far right.
2. Testing performance – The Chrome Dev Tools has a section called network, in which you can see how long it takes to load your application, especially how long assets take to load. You could also test your application in a bandwidth of your choice (3G, GPRS or EDGE). This is called throttling.
Replicating a bug in the process of identifying a series of consistent steps to replicate the scenario.
Step2. Open the Chrome Sources Pane
1). Open Chrome Console – Press F12 or (Ctrl + Shift + I)
2). Click on Sources Pane
The Sources Panel has three sections:
2. Code Editor Pane – It shows the contents of the selected JS file.
A breakpoint is an important step in debugging which lets you pause the execution of code at a specific point, line number, etc. In simple terms, breakpoints help you analyze the code for bugs.
Step4: Step Into the Code
Stepping into your code helps you to analyze the root cause of the issue/bug. You can examine each and every line of code to find the culprit code.
You can make breakpoints on specific events and line numbers in JS files.
So, its always recommended placing all your JS code into a separate file.
Step5: Examine variable values
While debugging you can also check values of variables to check if expected values (i.e string, integer, etc) are populated into them.
This can be achieved using Scope pane to list values of variables or setting Watch Points.
Step6: Fix and Validate
After you find the root cause of the issues and identified the culprit code line. Modify the code and Re-execute the script.
Also, read Laravel Tutorials
- Laravel Framework Overview
- Laravel Request Lifecycle
- Top 20 Laravel Artisan Commands
- Laravel Routing Tutorial
- Understanding Laravel Middleware
- Laravel Authentication
- Understanding Laravel Blade Template
- Laravel Interview Questions
- Laravel Validation Tutorial
Step1: Replicate the Bug
2. Open the Demo in browser
3. Enter HRA amounts
4. Enter the Basic amount.
5. Click Calculate to compute employee salary
Lets input 5000 for HRA and 10000 for Basic, so the resultant salary should be 15000. But, the result is 500010000. The result should be 15000.
Step2: Open Chrome DevTools and setup for debugging.
1. Open the DevTools console by pressing Ctrl+Shift+I or F12 in Chrome browser.
This opens the Chrome DevTools Console panel. This will open the screen below:
2. Click the Sources tab
The Sources pane has three UI sections divided into the following:
1. File Navigator – Lists every file in use.
2. Code Editor – It displays the contents of the selected file.
The first steps towards analyzing the code are to set a breakpoint at the beginning of the code.
A breakpoint is a specific line of code where we want to pause the execution of the program. From the breakpoint, we start analyzing the line by line…
So, a breakpoint in code lets you pause the execution of code anywhere between the code and examine the values of variable, expression.
Breakpoints help developers to find and fix the bugs.
Coming to our issue in the code.
So, the culprit code is calculated () functions, so pause the program execution inside that function.
This is achieved through Event Listener Breakpoints.
DevTools reveals a list of expandable event categories, such as Animation and Clipboard.
2. Next, to the Mouse event category, click Expand Expand icon. DevTools reveals a list of mouse events, such as click and mouse down. Each event has a checkbox next to it.
3. Check the clicked checkbox. DevTools is now set up to automatically pause when any click event listener executes.
Tick the Mouse->Click checkbox…
4. Click on “Calculate Salary” button
Now notice that Chrome DevTools will pause execution and highlight line of code.
The execution is paused on a different line of code, then press “Resume Script Execution” until you’re paused on the correct line.
Stepping into the code is the process of walking through the code to find the root cause of the issue.
1. In the Chrome Sources, click “Step into next function call” to step through the execution of the onClick() function, one line at a time.
DevTools highlights the following line of code:
Step5 – Check Variable Values
For a programmer, its very important to examine whether the variables hold an exact type of data.
Method1. Using the Scope Pane. The scope pane defines which local or global variables are being used and what values they hold.
Method2 – Watch Expressions
Now we have identified that values of hra and basic variables are not integers they are treated as a string. Hence, upon adding they are just concatenating together.
Step6 – Fix and Verify the result.
1. To edit the code click on “Resume script execution”
2. Edit the following code in Code Editor:
salary = parseInt(hra) + parseInt(basic);
Now the issue is fixed.
After we have analyzed the root cause of the issue, fixed and verified. The next step is to deactivate the breakpoint. Click on “Deactivate breakpoints”