Making code work

This post will cover the basics of debugging a JavaScript application in the browser, because sometimes is difficult to see what is happening in our code without inspecting what is happening in the execution, so let's start. The most simple way to debug the application is using console.log(), and you can surely go to your JS file and write some log lines and it will print in the console the result of your execution, that will give you some result right? but I think that is not the optimal way, I want to include that sometimes developers abuse the use of console.log() when they are debugging code, putting logs in all possible ways and places of the code, losing time in writing in the IDE, saving the file, going back to the browser to verify if shows the required information and repeating the operation, also you can forget to remove the logs at the end of debugging and will hog precious ms of your execution time. You can read my post of How to show logs in browser console But w...

I know, I know, how difficult can be show logs in browser, you can use console.log(), it's a simple line of code that you can include in any part of your JavaScript application with a parameter and will work, it will show the information you want in the console right? but in this post I want to show you how to log in different ways that you maybe don't know. I will start with the most common, as you know is console.log(), and 99% of the time will do the job that you need, for this simple method I want to share my personal way of use. To execute the examples please first open your console with Ctrl + Shift + J (on Windows) or Ctrl + Option + J (on Mac) Execute code Did you noticed the difference? in the first logs you lack of context, you can see the values in the console but you don't know which value belongs to each variable, my recommendation is to wrap the variables with { }, that will create an object with the variables, letting you know the variable name an...