Debugging JavaScript Application with Chrome DevTools
Why Debugging is important?
Debugging is a consequence development activity that’s finds, analysis and fixing bugs. Debugging is not limited to a developer. As a tester, has debugging skill would add more value for testing. Debug makes bug reports more reliable since it provides detail issues directly into code and shortens the time for a developer to fix the bug. It also contributes clear steps to reproduce bugs and identify necessary test data.
In the world of web development, there are a plethora of debugging tools. For this case, we would like to get familiar with Chrome DevTools. Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. (source: google dev tools)
Steps to debug javascript app using Chrome DevTools :
- Identifying the Bug
Let’s say we would like to debug simple web app https://googlechrome.github.io/devtools-samples/debug-js/get-started
The application is regarding simple addition where n + n should be number. However, the result displays two concatenate numbers as a string.
- Identifying the Javascript Code & Setup Breakpoints
Lay out to javascript structure by right click in any area and select Inspect or Just press F12. In the right pane, open the Source tab. This area consists of 3 parts, Files Navigator, Code Editor, Javascript debugging pane.
At this stage, configure breakpoint on Event Listener Breakpoints to inspect values as script executed. Try to make guess where the calculation is set to configure breakpoint line. Since the result is displayed after button clicked, probably we can set breakpoints around the time button “Add Number 1 and Number 2” executes. Activate the click breakpoint by checked on click breakpoints under Mouse event category.
- Analysis of the Defect
Simulate the function by input number 1, number 2 and click on add number button. On debug mode, click Step over next function call (next to Resume button) to notice flow of the program. Pay attention to inputsAreEmpty() is not executed since the field is filled with a number.
Predict the defect exists in updateLabel() and see detail functions on it.
In the line of 31, the value of sum is doubtful. We could verify the type of variable sum using scope and watch pane (located under Code Editor). We could see under scope, addend1 & addend2 wrapped in a quote. To make it more precise, open watch pane and type the syntax “typeof variable” and press enter. Watch pane shows that the type of variable of sum is a String.
- Fix the code
Based on the above investigation, we can directly correct the code by Resume script executions first, and then modify the code by add parseInt function to convert a string into an integer. Don’t forget to click save and click Deactive breakpoints to ignore any breakpoint that has been set before.
- Re-run
Simulate the function by directly click on Add button or replicate the new value and then click on Add button. System will expose error-free value.
Reference
https://developers.google.com/web/tools/chrome-devtools/javascript