Console Command Guide in JavaScript and Browsers

For you who develop websites and systems in JavaScript, there is a certain command that we use quite often:

Console...

This feature has been available in browsers for many years and has only been improving to help us understand how our applications are working.

The 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 are 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:

Console.log Command

The simplest and perhaps most commonly used command of the console object is 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.

Because debuggering JavaScript isn’t always such a simple task, we use 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.

Strings Replacement

An interesting feature of log() 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() call.

However, each variable type must be represented with a different code. For example:

  • String – %s
  • Integer – %d or %i
  • Objects and Arrays – %o or %O
  • Floats – %f

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 the 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 a separator and pass more than one parameter. For example:

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.

Console.clear() command

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 console.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.

Source: CSS-Tricks

Debug() error() warn() info() commands

The commands

console.debug()
console.error()
console.warn()
console.info()

are essentially the same thing as console.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 console.log(), such as string substitution, can also be used in debug, error, info, and warn.

Console command.count()

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 console.countReset('function 1').

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.

Conclusion

There are a number of applications for console 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.

Enjoy!

Gostou do artigo?

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on whatsapp
WhatsApp
André Lug

André Lug

Leave a Reply

Your email address will not be published. Required fields are marked *