To sign up for our daily email newsletter, CLICK HERE
Hello, readership. In the past few years, JavaScript has become the leading language for scripting web projects with the emergence of various libraries such as jQuery and Prototype. The growing popularity and ease of use has led to full-fledged applications such as Gmail, which contain thousands of lines of JavaScript, placing increased demands on the development team in terms of tooling skills.
However, just creating an application doesn’t mean that your work is already done. One of the most important steps to do before launching your app is to do the debugging.
JavaScript debugging tools
The increasing complexity of applications results is in the need for powerful debugging tools to quickly and efficiently find the source of an error. The simple display of variable values using the alert () function has lost its relevance.
This article provides a brief overview of the capabilities of modern developer tools that help make debugging JavaScript code an easier process. The focus will be on the capabilities of the Chrome browser, particularly on the Chrome Developer Tools.
Console – general view
In most developer programs, the programmer’s best friend will be the console. The multipurpose panel is used for logging error messages, checking the DOM, debugging JavaScript code, and many other tasks. Depending on the browser, the console is called by different commands: Ctrl + Shift + I or F12.
The console automatically displays errors in the code that are detected during script execution. The file and line are indicated next to the error, and clicking on the error moves the input focus to its corresponding location.
The console can not only show errors in the script code. Using the Console API and Command Line API, you can control the output of data to the console. The most famous and useful is .log () command.
When developing form code, it is very useful to know the values of the variables in order to verify that the code is working correctly. It is common practice to use the alert () function for visual control. However, using this method blocks the rest of the code from executing until the button in the dialog box is clicked.
The modern solution is to use the console.log method, which prints the variable values to the console panel:
console.log (“Captain’s Log”); // prints “Captain’s Log” to the console panel
The method can be used to display the calculated values:
function calcPhotos () {
total_photos_diff = total_photos – prev_total_photos;
// Print the values of variables to the console
console.log (total_photos_diff);
five
}
The advantage of this approach over the alert () dialog method is that code execution is not interrupted, and the developer can display variable values multiple times to monitor data changes in real time.
var t = 3,
p = 1;
function calcPhotos (total_photos, prev_total_photos) {
var total_photos_diff = total_photos – prev_total_photos;
// Print values to the console
console.log (total_photos_diff);
// Update values
t = t * 1.3;
p = p * 1.1;
}
setInterval (function () {
eighteen
calcPhotos (t, p);
},100);
Highlighting messages
In the above example, the loop will print many variable values to the console. However, it is often convenient to visually separate different data in order to effectively highlight areas in the code that require special attention. The Console API has several methods to accomplish this.
console.info (): shows the “info” icon and colorizes the displayed information. This method is useful for warning about various events.
Information in the console
console.warn (): shows a warning icon and colorizes the information it presents. It is convenient to use for information about parameters going beyond the limits.
Console warning
console.error (): Displays the “error” icon and colorizes the information it presents. Convenient to use for reporting errors and critical conditions.
Error information
Just a note from me: The Chrome developer tool does not provide a means to display information differently in the console.
Interrupting script execution
Console output is useful, but code can run very quickly and still keep track of many variables.
To facilitate the debugging process, you can interrupt the code execution at a specific point to gain access to data. Breakpoints are used for this.
Working with breakpoints
To set a breakpoint, go to the ‘Scripts’ tab and select the required script from the list. Now we are looking for the line where you need to interrupt the script execution, and click on the field with the line number to activate – a visual indicator will appear. Now we reload the page and the code execution will be interrupted at the given point.
Setting a breakpoint
When the execution is interrupted, you can place the mouse cursor over any variable and the debugger will display a hint with the value at the moment.
Then you can continue executing the code using the special buttons that are located at the top of the sidebar:
● “Continue”: continues code execution until the next breakpoint.
● “Step Over”: Executes the next line of code. If the code calls another function, then the debugger will not “dive” into its code.
● “Step Into”: Similar to “Step over”, except that when a function is called, the debugger goes to the first line within the function code.
● “Step Out”: if you entered the function code using the “Step Into” button, then pressing the “Step out” button will cause the function code to be executed to the end and go to the parent function.
In the sidebar, you can monitor the state of your code, including the dynamics of local and global variables.
Conditional breakpoints
In the process of debugging the code, sometimes you need to stop code execution only when certain conditions occur. For example, if your script has a loop, each iteration of which takes 50 milliseconds, it will be very inconvenient to start the execution process after stopping at each step, when we only need 300 iterations. For such cases, there are conditional interrupts.
Conditional break
In the example in the figure, the code execution will not be interrupted until the value of the variable total_photos_diff becomes more than 200.
To activate a conditional break, right-click on the breakpoint and select the ‘Edit Breakpoint’ item to display the dialog for editing the breakpoint conditions.
Setting a breakpoint in code
It is not always convenient to set breakpoints using the developer tool interface in the browser. Sometimes it’s easier to start the debugger from code with a special command. The example below shows how you can interrupt code execution when certain conditions are met:
if (total_photos_diff> 300) {
debugger; // start the debugger and interrupt the code execution
}
Other ways to interrupt code execution
In addition to using a breakpoint, the developer tools provide other options for stopping code execution in different cases.
● Stopping on DOM changes
If you need to debug a piece of code that handles DOM changes, the developer tool provides you with a way to stop code execution when a DOM node changes.
On the HTML code panel, when you right-click on the desired element, you can select the conditions for stopping the code (changing attributes, adding / removing descendants, deleting an element) when the DOM changes. Reload the code and the code execution will stop when the elements change.
● Stop on all or unhandled exceptions
Most developer tools allow you to stop script execution when exceptions are thrown. In Chrome, this functionality can be enabled using the ‘Pause’ icon on the bottom line of the interface.
If an error appears while executing your script, then the above methods will help to stop the program to analyze the error. But it is not always immediately clear where the reason lies.
When the script is interrupted, take a look at the right pane for useful information, including the Call stack.
The call stack shows the full path that led to the point where the error occurred and code execution stopped. Or you can hire a javascript developer.
