In
this post, I am going to explain how to debug an application in Chrome Browser.
You
are going to learn
a.
Key
Terms in debugging the application
b.
How
to add debug points and inspect the code
Key Terms in debugging
the application
Breakpoint: It is the place,
where you are informing debugger to stop execution. Once debugger stopped at
breakpoint, you can inspect the data, stack traces etc.,
Step Over: When you click on
this button, debugger move the control to next line.
Step Into: It is used to step
into the function body.
Step out: Used to stepping out
of the currently executing function.
How to add debug
points and inspect the code?
Let
me try to explain with an example.
HelloWorld.html
<!DOCTYPE html> <html> <body> <p>Click on the buttons to perform Arithmetic Operations</p> <button onclick="sum()">Add Numbers</button> <p id="demo"></p> <script> function sum() { var input1 = parseInt(prompt("Enter first Argument", 0)); var input2 = parseInt(prompt("Enter Second Argument", 0)); var result = input1 + input2; console.log("Sum of %d and %d is %d", input1, input2, result); document.getElementById("demo").textContent = "Result : " + result; } </script> </body> </html>
Open
‘HelloWorld.html’ in chrome browser.
Right
click on the body of html page -> Inspect.
It
opens developer tools on right side of the window. Click on Source tab, you can
able to see the source code of the application.
Click
on the file ‘HelloWorld.html’ under Page tab, it opens the source code.
Click
on line numbers in the source code to add debug points.
For
example, I added debug points on line 13 and 18.
Click
on the button ‘Add Numbers’.
You
can see that application stops at debugger point.
Click
on ‘Step Over’ button to move to the new line.
After
entering the user input, you can see the data at Scope section. This section
displays all the local and global variable information. Beside scope section,
there is a ‘Call Stack’ window, that gives information about application call
stack.
At the bottom
of Call Stack section, there is Breakpoints section, it shows all the
breakpoints. You can disable the breakpoint by unchecking the checkbox.
No comments:
Post a Comment