Debugging in Nodejs 😬

WE have been using Nodejs from a long time now and debugging is one of the important aspect of programming there are quite few ways to debug a program but today I am gonna discuss the top three of them with different scenarios , so get pumped load up your coffee and lets GO…!

1. Our first one is using Console.log() 😉 , Now i know that it has got some bad reviews from some devs , but hey let’s not argue upon that because if it’s getting your job done than why not use it right... this one needs no big explanation but still i’ll try my best . WE can simply log and see any variable value at a particular time using that statement and in that way you can figure out if the program is going as you expected it to go , Many times i use it and it helps me a lot to figure out bugs faster, But imagine a situation when you are putting console.log in 7–8 different places in your gigantic file , and than how annoying it would be to find out and remove them line by line , so in that case you can use our 2nd tool.

2. The DEBUGGER , sounds scary but don’t worry he is on your side 😉 , You can use the chromes debugger very easily in your node app , here is the simple program that i’ll use to elaborate the concept .

function secondFunc(title) {
       console.log(title)
}
function firstFunc(title){
        secondFunc(title)
}
firstFunc("hello"); 

In the above program we have two functions, called firstFunc and secondFun we call secondFunc in firstFunc passing the value that we receive in firstFunc as an argument , Now i am going to add the debugger before calling the secondFunc ( a debugger is like adding a break point and verifying the values of the variable available at that moment)
ADDING DEBUGGER

function secondFunc(title) {
       console.log(title)
}
function firstFunc(title){
          debugger     
          secondFunc(title)
}
firstFunc("hello");

running the node app node inspect app.js

notice the inspect keyword followed by node ,this tells that we want to inspect the program (or debug it in easy language), run the command you will see a debugger opened in your terminal now i want you to go to chrome and hit this url chrome://inspect

this opens the chrome debugger you should see some similar screen

Notice that Remote target ,you see a target below that and if you don’t than press that configure button and add it yourself , Now next i want you to press that inspect button in target and that will open the debugger window , press cmd + P and scroll and select the app.js file(because i named my file app.js) , here you can see the whole code, and some line (in this case the line where you call firstFunc) will be highlighted in blue or green that means that the debugger hasn’t executed the program from that line (including that line) , also expand the console below you can type the variables that you see in the right pane under scope tab to inspect their value , Below is the screen that you should see

If you have multiple files than you can just browse the folder by pressing the `+` button on the right below the filesystem tab , in that case you will be able to debug multiple files . Coming in our code now we want to execute it so press the play Button (in right pane , first from left side highlighted in blue) this will run our code and stop at the debugger keyword ,here you can see in the scope tab , under local dropdown menu all the variables , here WE only have 2 but if you have a bigger project you will have many , select any one of them and type it in your console hit Enter and you will see the value printed , next to that play button you will see a semicircle kinda arrow that means step over all it does is execute next line , you will see other options too, have a play around with those to get more familiar , press the play button again to execute whole program ,

After executing the program you’ll see that the file vanishes and so do the target in chrome , but if you want to inspect again just got to terminal and enter ` restart ` command it will bring back the target and you can debug again , You can also see the call stack section(shows the sequence of methods that were called before hitting the debugger)
Now to exit debugging press ctrl + c two times and there you go easy isn’t it ..?

3. Now As you saw the second method is bit a process and you wont use it for problems like fixing a typo , lets take a 3rd scenario you have a typo you mis spelled the title word to titleee as below in the program

function secondFunc(title) {
       console.log(titleee)
}
function firstFunc(title){
        secondFunc(title)
}
firstFunc("hello");

now if you run this using ` node app.js ` you will get a long error , you don’t need to understand everything from that message only pick the useful bits of information , Rule No.1 in solving such errors is: don’t be afraid of it ,the fear is what killing you . Now lets get back to our error thing
the error says something like this , now i have cut down some parts

ReferenceError: titleee is not defined
at secondFunc (/Users/YourPCName/Desktop/app.js:2:17)
at firstFunc (/Users/YourPCName/Desktop/app.js:5:8)
at Object.<anonymous> (/Users/YourPCName/Desktop/app.js:7:1)

Node is saying that he don’t know what titleee is and we don’t know that too so 😂 , Now we have figured out that we have a typo , check the very next line that says “ at secondFunc ” That means that node found the word titleee at this function, it also gives the whole address of the file including the line and column number so that you can navigate and fix the bug
You can see where the secondFunc was called , the third line of error
“ at firstFunc (/Users/YourPCName/Desktop/app.js:5:8) ” shows it , and so on the hierarchy goes on , this is similar to call stack that we saw in debugging process . In this way you can trace and dig the whole rabbit hole .
There are endless ways you can fix a bug .

So that wraps it up for now , Don’t forget to like and share really encourages me a lot ,Check out more of my articles on medium and also check out my Twitter ,Thank you hope you enjoyed it 😄