This feature has been available in browsers for many years and has only been improving to help us understand how our applications are working.
e logging of some information is already automatic, such as network requests, responses, and security errors. However, we can also call errors, notes, and logs manually by our code. Virtually all console features a
re available in all browsers, and the differences are mostly aesthetic in how to show them.
In this article I want to introduce you to the main features and applications of
the console for the development of websites. If you want a complete and more general documentation, I suggest the two links below:
The simplest and perhaps most commonly used command of the co
nsole object i
s console.log. This command will register in your browser console or command promp (terminal on Mac) anything you put inside it.
var a = "personal"; console.log("Hello" + a); Result: "Hello guys"
You can combine strings, variables, objects, or any other element for it to record that information.
We usually use this functionality to understand a particular variable value, an error, or an object at a given time in the execution of our application.
se console.log to help us understand why something isn’t going according to our understanding.
Especially for those who are starting out in web development, the use of this tool is very good for us to better understand how each part of programming works.
An interesting feature of lo
g() is that you can use commands to replace with strings. Instead of writing like this:
var world = "world"; console.log("Hello" + world);
we can write like this:
var world = "world"; console.log ("Hello %s", world);
You use %s to
replace with the String described as the second parameter of the log()
However, each variable type must be represented with a different code. For example:
- String –
- Integer –
- Objects and Arrays –
- Floats –
You can also add more than one variable, just add additional parameters.
var a = "first"; var b = 2 console.log("we start with %s and go to %i", a, b);
Styling the log
If you want, you can do cool things with the log you put in the console. One of these things is the stylization with CSS of what is placed.
To do this, simply enter the %c command at t
he beginning of where you want to style. For example:
console.log("%cThis text will be large and blue", "color: blue; font-size: 50px");
If you want to stop the style until a certain time or pass other styles to other parts of the log, then you have to use your own %s as
console.log('This part %cé red %ce this next part %cé verde.', 'color: red;', '', 'color: green;');
Of course, you can use your creativity and do many things with these types of commands.
When we’re messing around a lot in the Console tab of our browsers, the screen may be full of information. So sometimes we just want to clean up that information to have a clean console.
We use con
sole.clear() for this. In some browsers, you may find a button that already does this cleaning, but it’s good to know that it exists if you want to speed up just by typing the command without taking your hand off the keyboard.
Debug() error() warn() info() commands
console.debug() console.error() console.warn() console.info()
are essentially the same thing as c
onsole.log(). However, browsers will show them differently.
For example, in Chrome you’ll see them as follows:
When we are creating the desired records in the console, we can distinguish between something that is an error, an information, a warning and so on. These distinctions are good both to make it easier to watch the console and filter logs according to type.
Of course, what you have access to with co
nsole.log(), such as string substitution, can also be used in debug, error, info, and warn.
If you want to count how many times a given action or command has rotated in your code, you can
use console.count() to do this.
For example, you might want to know how many times a function has been called in code.
If you simply call the count
() it will count how many times you just called it. However, things start to get interesting when we use an identifying string inside it. For example:
console.count('function 1'); console.count('function 1'); console.countReset('function 2'); console.count('function 1');
The result will show the count up to 3 of function 1 and the count up to 1 of function 2.
You can include the
console.count() within the function itself so that it is called along with the function call.
If you want to reset the count for some reason, you can call the console
.countReset() command. Of course, if you just want to reset the count of a particular counter, use con
Some other interesting commands
The above commands are a bit more practical for us to use in website development. However, there are some other interesting commands also worth mentioning to let you know.
- console.table() – You can pass a series of parameters so that the result is a table in the console. Good use for demonstrating multiple data at the same time.
- console.group() – you can create a retractable list with elements within it. Good for showing a sequence of items.
- console.time() – you can show the time result. Good for showing the duration of events, for example.
- console.trace() – similar to warn(), here you can show the sequence of errors through the files and code calls.
There are a number of applications for co
nsole command in our browsers. These commands help us better de-debum our code and also understand how the language works.
We often need to use these commands and I think it can help you on your journey to becoming a better developer or developer.
Tell me in the comments if you have already managed to apply some of these commands and which one else you use.