introduction to JavaScript debugging.
Introduction
New JavaScript devs (and even some advanced devs) often shy away from using debuggers. Usually, it is enough to log values to the console using console.log to view the values we are interested in. While this gets the job done, it is a very limited option to aid debugging during development. And it gets more complex when we’re working with a large codebase with multiple modules. Another reason why using the debugger is not the first option an average JavaScript developer will turn to is because of the amount of work required to set up a simple environment for debugging especially when developing server-side applications (usually with nodeJS).
In this tutorial, we will look at debugging client-side javascript using the chrome debugger and in a later tutorial, we will look at how to get the same level of convenience on the server-side.
Setting up the environment
To follow through with this tutorial, you will need a browser (Google chrome, firefox, etc) and a simple web project. I have set up a simple git repo and you can clone it using the command:
git clone https://github.com/chuxmykel/client_side_js_debugging.git.
This project was created using vite but you can apply the concepts learned here to apps built with any JavaScript framework or library as well as vanilla JavaScript.
Getting started
Once you have cloned the repo, cd into the directory by using the command cd client_side_js_debugging. Next run npm install or yarn install depending on your preferred package manager. Then start the development server by using the command npm run dev or yarn dev.
About the app
The app is a simple app that has a value displayed between two buttons. The button on the left decrements the value by one and the button on the right does the opposite. (Or they should 😉). If you click any of the buttons, you’ll notice that the value stays the same. Now we have a bug and this article aims to find and solve this bug like a pro 😁.
The code
At first sight, this looks like it should work right? Unfortunately, it doesn’t. And this article aims to trace and fix the issue with the help of the debugger provided by the dev tools of your browser.
Fishing out the issue
To trace the issue, we can simply place a bunch of console.log statements to see where the issue is coming from. I.e:
...
const setState = (newState) => {
state = {
...state,
...newState,
};
console.log(state); // 1st console.log statement
renderNewValue(state);
}const increment = () => {
const newValue = state.displayValue++;
console.log(newValue); // 2nd console.log statement
setState({ displayValue: newValue });
}const decrement = () => {
const newValue = state.displayValue++;
console.log(newValue); // 3rd console.log statement
setState({ displayValue: newValue });
}
...
Usually, as a JavaScript developer, the first thing that comes to mind is to think about the functionality of our app and place console.log statements at the places where we think are responsible for the bug and in this case, we place them in the setState , increment and decrement functions. This may not seem like a big issue until we are debugging a large app with functions coming from a lot of external modules.
A better approach
To debug this app more efficiently and without having to modify our code, we can use the debugger provided by our browser.
If you use Google Chrome, you can access the developer tools using F12. Then navigate to the sources tab.
The chrome dev tool shows us some really useful keyboard shortcuts and we can take advantage of them to improve the developer Quality of Life. But in this tutorial, we will navigate our files using the file explorer on the left-hand side of the screen.
If you take a look at the js folder, you’ll notice your JavaScript files and you can click on the main.js file to see your code displayed on the main screen.
Debugging the application
Remember how we placed console.log statements in the code earlier? With the debugger, we don’t need to use log statements. We can simply place breakpoints in our code by clicking a line number on our file as displayed on the debugger.
Breakpoints
A breakpoint is a point in your code where execution pauses. At each breakpoint, you can inspect variables in the current scope by hovering over a variable.
To try this out, click one of the buttons in the app (+ or -) and you will notice that the code runs up till the point where you set the breakpoint.
Let’s try this by clicking the + button. Notice that the code executes up until the point we placed our breakpoint and the line with the breakpoint is highlighted.
At this point, we can inspect each variable in the current scope. Take a look at the panel on the right-hand side and notice the debugger gives us a bunch of useful information grouped by panels. Some of the panels are the watch, breakpoints, scope, local, module, global etc.
Navigating code in the debugger
We can move through our code in the debugger using the control buttons on the top right-hand side of the debugger.
For more information on what you can achieve with these buttons, take a look at this information provided by Chrome.
Fixing our issue
Once we click the + button, we see that our code pauses on line 25. We can use the “step over” button to move to the next line of code.
If the current line is a function call, the step over button jumps over the function call (allowing the function to execute without inspecting it) to the next line of code.
Now we can inspect the newValue variable by hovering over it and this shows us the current value. Our bug becomes apparent as we expect this value to be incremented by 1. Clicking the step over button again takes us to our next breakpoint which is in the setState function. And again, we can see that the function is called with { displayValue: 0} as opposed to our expected value {displayValue: 1 }.
To fix this bug, we simply have to modify line 25 of our code to:
const newValue = ++state.displayValue;
The same applies to line 30.
Conclusion
This is an oversimplified example aimed at showing basic debugging with the chrome developer tools. The same concept applies to the dev tools provided in other browsers such as Firefox, Edge and other major browsers. To learn more about the dev tools, you can take a look at this link. Take note that whatever knowledge you get from this article and also the shared link, is transferrable to any other browser with a few minor differences. Using the debugger can save you a lot of time and make you more productive as a developer.
