If you ask JavaScript developers, which debugs tool they used most, they probably will answer you that consol.log is this tool. I’m not sure why is that. Using console.log it merely’s that’s some kind of standard but there is an easier way to check what’s going on in your code. In this post, I would like to share with you the cool trick with console.log and show you how to debug your JavaScript code differently.
The greatest JavaScript debug tool
Let’s start with the greatest tool named console.log (). The biggest advantage is that you can write the name of the variable, and print its value in the moment of code, that you chose. For example, you put into code console.log(“variablePremium: ”, variablePremium) and web browsers display it in the console. Extra cool right? Of course, it is 🙂 But it could be even better. Hew, you ever fink why this consol.log command construction looks like “myDescription: “ checkedVariable? You might think, that’s because you want to know which variable your just check. That’s obvious. Perhaps it is. But what, if I told you, that you saw this in some learning stuff, and you liked it? Sound familiar? OK, let’s use ECMA 2015 tricks. From now you can use new construction of powerful hammer named console.log() : console.log({checkedVariable}). Here below, I put a print screen with the magic:
Now if you have a more complicated variable than mine, you can look at what’s exactly in this variable, and check if everything is correct. What’s more web browsers display the name of this variable default. That’s pretty cool. But still, we have a more powerful tool to use in the web browser.
Is there any other JavaScript debug tool?
If you want to check only one variable in one place, console.log() is for sour the best tools. But, what if the code won’t work well and you need to check variables in several places? Using console.log() to do this is extremely difficult. I tried it one, and after several hours I started searching for different ways to check variables in my code.
That’s how I discovered breaking points in Google Chrome Dev Tools. When you open web developers panel (Ctrl + Shift + I) first of all “Elements” tab will appear. But there are more tabs. You want to use “Sources” tab so click this tab and you will see three columns. The left one shows the files structure, the middle one shows the source code in the file that you point in the left table. Finally the right column show detail about JavaScript process. So now, if you want to check your variables, you need to point the file with your code at the left column, and in the middle column, you point to the line where the interpreter will stop. Below I put an image that shows the same code that I use above to show you a cool trick with console.log().
Look, how many more options you have now. You can check every variable state after the interpreter stops. You can see also what’s in call stack and scope. This is a far more complex tool and It can tell you much more than just the consol.log command. Now, when I use it, I couldn’t forget how handy this is. Try it’s one, especially in more complicated code, and I’m sure you love it.
Visual Studio Code great extension
In the last paragraph of this post, I would like to admin about one more cool extension to Visual Studio Code. Perhaps you use it. It’s a good code editor, very popular and I use it, so I’m interested in good extensions to this program. One of these extensions is Turbo Console Log. What thas it do? If you prefer to use consol.log, or just need to use it, you can prepare easily consol.log command by pointing variable and then press (Ctrl + Alt + L). Turbo Console Log add code that displays in console variable state after interpreter used it. That’s a very helpful tool. You can find more about it on: https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
That’s all about the most popular debug tool. If you like to share wich some other debug tools please live a comment below this post. Have a good day.