Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
It is essential for developers to be able to debug a program’s source code because the root cause of errors is not usually obvious. In fact, there are usually no error messages or indications as to where to find the underlying cause. For most programming languages, the Integrated Development Environment (IDE) includes numerous debugging features, such as breakpoints, step commands, variable inspection, and many others. JavaScript debugging is a little different, because its source code is interpreted by the browser at runtime. That makes the browser the ideal place to perform debugging. While each browser’s debugging tools differ slightly, most are fairly extensive, and support all of the features you would expect in a high quality debugger. This web development tutorial will guide you through the basics of JavaScript Debugging in the browser.
Read: Top HTML and CSS Courses for Web Developers
Opening the JavaScript Debugger
The top three browsers – Chrome, Firefox, and Edge – house their debugging facilities in a panel called “Web Developer Tools” (Firefox), or, more commonly, simply “Developer Tools” (Chrome and Edge). In all browsers, these are accessible via the More Tools menu item:
Alternatively, the F12 function key (Windows) or Option + ? + C (mac) will work across all three browsers.
The debugger is only a small part of the Developer Tools. They also let developers inspect the page’s HTML, CSS, network traffic, measure performance, and much more. You will find the debugger under the “Debugger” tab in Firefox, and “Sources” in Chrome and Edge.
Read: Best Online Courses to Learn JavaScript
How to Pause Code Execution
A breakpoint lets programmers pause their code in the middle of its execution, and examine variable values at that moment in time. It is often a good place to start the debugging process.
To set a breakpoint, we need to find the line in the inspector and click on the line number in the left-hand margin:
If you can’t locate the line in the inspector, you can also pause program execution by adding the line “debugger;” directly to your code. Then, when you refresh the page and trigger the function in question, the debugger will pause at the “debugger;” statement.
Stepping Through JavaScript Code
Stepping through JavaScript code enables web developers to execute program code more slowly, one line at a time, in order to figure out exactly where it is executing in a different order than you expected or pinpoint exactly where a bug is being introduced. There are three types of stepping operations:
- Step Over: This operation lets the application execute the next action. If the action involves a call to a function, it does not step into it, but executes the function while stepping over it.
- Step Into: This operation lets the application execute the next action. If the action involves a call to a function, it steps into it and breaks the execution on the first line of code within the function.
- Step Out: This operation lets the application execute until the current function is returned. Execution is then paused on the first line of code after the function call.
There is also an operation to resume normal program execution. Here is a screen shot of the Firefox Debugger showing buttons for all four of the operations listed above:
Inspecting Variables in JavaScript
Whenever program execution paused on a line of code, the Scope(s) pane shows you what local and global variables are currently defined, along with the value of each variable. It also shows closure variables, when applicable.
Another way to inspect a variable (or expression)’s value is via the Watch Expressions pane. It lets programmers monitor the values of variables over time. As the name implies, Watch Expressions are not just limited to variables. You can include any valid JavaScript expression in a Watch Expression.
Working with Minified .js Files
It is common practice to compress JavaScript files to reduce their size and speed up loading time. Mimified files are practically impossible to read, as they contain no line breaks and variable names are reduced to single characters. To help debug minified files, browser debugger’s come with a “Pretty Print” button at the bottom of the source pane:
Clicking it formats the source and displays it as a new file with a name like: “{ } [original-name]”
Although pretty printing does nothing to clarify variable names, it does make the code much easier to read.
Tracing JavaScript Program Execution
While paused on a line of code, you can use the Call Stack pane to view the method calls that got you to this point. Clicking on an entry jumps to the line of code where that function was called.
We can observe the behavior of a function and re-run it without having to restart the application by right-clicking the function and selecting Restart frame from the drop-down menu.
Final Thoughts on JavaScript Debugging
In this web development tutorial, we learned the basics of JavaScript debugging in the browser. Although most browsers support the same basic debugging tools, they are not created equally. It is well worth trying out different browsers to see which you prefer.