How I debugged my code in JavaScript using Snippets from Chrome DevTools

Goal

Debugging JavaScript code with Chrome Devtools and add more code in the existing page while debugging. It shows a new way of code injections and gives you the possibility to not jump into the editor.

Timeline

Two days ago I was searching to find a solution for an algorithm problem. I landed on a page where I discovered the function but simultaneously I wanted to test the code and understand how is it working (debugging). Then I became even more ambitious: I wanted to test the function on the same page where I was working on, so I had to find a way to debug it. And here goes the solution that I would happily share it with you.

To demonstrate  I will split the tutorial into two parts:
  * Debugging in JavaScript code on a real example
  * Inject JavaScript code using feature Snippets from Chrome DevTools

PS: If you are already an advanced developer and got quite familiar with code debugging on JavaScript, skip Part 1 and go straight to Part 2

Requirements

1. For demonstration reasons, I already created a GitHub repository (click here) where you could easily find the code used in this article
2. For debugging we need to investigate a scenario with and existing bug as shown in the picture below.

1. Debugging in JavaScript code on a real example

Let’s take a very simple instance on our way of debugging. Imagine that we have created a straightforward interactive application that results in the sum of two numbers: Number 1 and Number 2. When clicking Click to SumUp button, the sum of inputs will be displayed. Our bug reveals 1 + 1 = 11.Oh nooo!
Let’s start debugging, I open my developer toolbar with the keyboard shortcuts

Command+Option+J (MAC) or Control+Shift+J (Windows, Linux)

Customize and Arrange the DevTools panel: In case you don`t know how to customize click here
My settings are: right side && mobile responsive view, I would like to make the website responsive in mobile view to get everything in one screen. (my laptop display is 14” )

In the DevTools my goal is to find the function responsible for the clicking of the button Click to SumUp
* Go to Sources Panel and check if the file script.js exist
  Let's presume the script.js is a big file and contains hundreds lines of code. The easy way to track the code is by using Event Listener Breakpoints (check the picture below)
* Event Listener Breakpoints → Mouse → click
   I want to catch the functionality when the button is clicked and click event has been trigged.

DevTools will pause the code after the button is clicked.

I hit the Click to SumUp button, the DevTools pauses the code execution and highlights a line of the code. In this example, the highlighted row is shown in the second line. In case the code is not paused in the correct place please use Incognito browser mode or Sources panel of DevTools.
For the case with Sources panel, click Step into next function call or Step over next function call until will find the correct line. (Check the picture below)

Why?

When any node from DOM is clicked, and that particular node has a click handler, Chrome DevTools automatically pauses on the first line of that node's click handler.
I am in script.js file (see below the image). Here we can see two areas.
The left area displays the source code of script.js file. I will setup two breakpoints by clicking on the line of the code. The first breakpoint is in the 6th row as the output of the updateSum() function and the second one is in the 19th row where the function updateSum() is called.

Hint:

Breakpoints positioning - if you want to make sure that the block code inside the function works fine, insert a breakpoint at the end of the function to view the variables
The right area displays the information and is used for debugging (check the picture above). There you could see additional information such as: call stack, the status of the variables (global and local), number of breakpoints in your application, etc. (want to know debugger action functionalities, check the official video)

After I inserted the breakpoint, I traced the code and checked sum variable. For debugging I used the functionality watch to check in realtime wring concatenation operation and not numerical.

It is necessary to correct the identified bug. In this case, by applying the expression using the Number function, I have chosen to solve it in the console tab. The code worked perfectly, so I decided to update it in the code (line 18) and ensure that the changes were saved (ctrl + s). I also made sure I disabled the breakpoints.

The last but not the least, don’t forget to test. In my case, the function updateSum() worked as expected 😊 and yeah, you just fixed the problem locally, make sure that the edited file is also saved in the project.

2. Inject JavaScript code using feature Snippets from Chrome DevTools

Now, on the implementation we want to test another feature. More specifically, we want to add the subtract functionality. There are two ways for implementation: either you could choose to insert the code into the scripts.js file and make sure that  the changes do not mess up the existing code. Or you might choose to write additional function into a new file by keeping the current code clean and reusing the new function in different calls. This is achieved by using the Snippets feature from the Sources panel.

For my example, I wrote the new JavaScript updateSubtract() function and saved it in the dev-start file. I also made sure to add a breakpoint to verify whether the total variable is working properly. Then I called the updateSubtract() function from the script.js instead of updateSum() and saved it.

Once the Run command has been hit, the dev-start script will be automatically injected into the website. To test the new functionality, I inserted two new values, 3 and 2 and clicked the Click to SumUp button. This with 10+ years of experienceFreelancer Full-Stack Developer. Previously Trainer React/NodeJS. Passionate about React, React VR and their ecosystem.akpoint there already. Same debugging rules described in part 1 are also applied here. The function output will show correct result 1. With that in mind, I am more confident about debugging, isn`t?

Something to be taken over:

Well, any of you might suggest that I can easy peasy write and test the new function directly in the console.

We all understand the constraints of the console: there is no debugging experience. By using the Snippets feature you are can easily debug any complex function that is called in iterations from multiple occasions and spare time looking for alternatives. As the complexity of JavaScript applications increases, developers need powerful debugging instruments, as the case of Snippets, to assist them to find a problem and solve it rapidly and please do not use so much "console.log()”

**> **

About me

Full-Stack Developer with 10+ years of experience. Previously Trainer React/NodeJS. Passionate about React, React VR and their ecosystem.