JavaScript is used for creation of fully fledged applications which contain thousands of lines of JavaScript code and errors are bound to happen.
Due to increasing complexity of code when something goes wrong developers need powerful JavaScript debugging tools in order to figure out the cause of issue and fix it efficiently. An alert () dialogue helps to some extent only.
In this tutorial we will see some features of modern developer tools that make JavaScript debugging convenient for beginners who just started learning JavaScript.
All modern browsers support “debugging” – a special UI in developer tools that makes finding and fixing errors much easier. Following are the keyboard shortcuts to access it:
- Chrome: CTRL +SHIFT+ I or F12
- Internet Explorer: F12
- Mozilla Firefox: CTRL+SHIFT+J
In this tutorial we will see some examples with the chrome developer tools.
1. DEVELOPER TOOL PANES
- Resources zone: Lists HTML, JavaScript, CSS and other files including images that are attached to the page. Chrome extensions may appear here too.
- Source zone: Shows the source code.
- Information and control zone: Is for debugging.
2.CONSOLE
We can type commands here and press Enter to execute. After a statement is executed, its result is shown below. In the example above, it displays an alert box, and displays undefined as nothing is returned.
The console.log method in JavaScript prints the value passed to this method to the Console panel. It is better than using alert() dialogues. E.G.:
a = 5;
b = 6;
c = a + b;
console.log(c);
3.BREAKPOINTS
To set a breakpoint click at the line number. In the example above it is line number ‘86’ and ‘89’.
A breakpoint is a point of code where the debugger will automatically pause the JavaScript execution. While the code is paused, we can examine current variables; execute commands in the console etc. In other words, we can debug it.
- List of breakpoints in the right pane.
That’s useful when we you have many breakpoints in various files and allows to uncheck or remove any breakpoint.
- Conditional breakpoints
Right click on the line number allows to create a conditional breakpoint. It only triggers when the given expression is true. This is used when we need to stop only for a particular variable value or for function parameters.
4.DEBUGGER COMMAND
We can also pause the code by using the debugger command example:
function hi(name) { var phrase = `Hello, ${name}!`; debugger; say(phrase); }
That’s very convenient when we are in a code editor and don’t want to switch to the browser and look up the script in developer tools to set the breakpoint.
5.TRACING CODE EXECUTION
In the example above , we have set breakpoints at line number ‘86’ and ‘89’, so the script runs normally until a breakpoint occurs and then it pauses for you to take control.The right panel displays information about the code being debugged:
- Watch – shows current values for any expressions.
Click the plus + and input an expression. The debugger will show its value at any moment, automatically recalculating it in the process of execution.
- Call Stack – shows the nested calls chain.
In the above example the call stack displays “updateBooks()” function, that has been triggered by an “onclick” event. If you click on a stack item, the debugger jumps to the corresponding code, and all its variables can be examined as well.
- Scope – current variables.
Local shows local function variables. You can also see their values highlighted right over the source. Global has global variables (out of any functions).
With execution paused you can now hover your cursor over any variable and the debugger will bring up a tooltip with information about it’s value at the current time.
6. Execution Control Buttons
- Continue: Continues code execution until another breakpoint is encountered.
- Step Over: Step over next function call. Steps through the code line by line so that you can see how each line effects the variables being updated. If your code calls another function the JavaScript debugging will not jump into its code. Instead it will be “stepped over” and the focus will remain with the current function.
- Step Into: Steps into next function call. When we click “Step Into” at function call, the debugger moves its execution to the first line in the function definition.
- Step Out: If you have stepped into a function definition by clicking Step Into button, clicking the Step out button causes the remainder of the function definition to be executed and the debugger moves its execution to its parent function
- Deactivate Breakpoints
SUMMARY
In The tutorial above we saw how to debug a code using the browser developer tools.To acquire more knowledge related to important topics in JavaScript proceed our All JavaScript Blogs which are written by our experts and accomplished students.