Web Development Course:
Chrome Console Log: Main Tips
- Console panel helps to diagnose issues related to the execution of code.
- These Chrome logs let you analyze variables at specific moments of execution.
Logging: Print Messages to Console
To perform basic Chrome DevTools logging, use the
Note: for logging arrays, you should use console.table to get more neatly organized data.
Take a look at an example of the
console.log which prints messages to the Console:
console.log("The current time is: ", Date.now());
The command will output this:
To clear the console of all printed messages, use
The Chrome Console log also displays a drop-down menu with suggestions based on previously written code. As a result, it saves you time typing or copying commands.
Commands for Logging Errors
Additionally, you have the methods
console.warn(). This Chrome logging makes messages stand out from the rest.
Here is an example of
console.error() inside the console:
Now, take a look at how the
console.warn() output is displayed:
Tip: the console.trace() helps to find more information about the way the method was invoked and executed. It shows the order in which functions executed.
console.assert() lets you log errors conditionally. This Chrome logging method causes an error to pop up if the specified condition returns false.
Two parameters are taken for this method: the condition and the message to display if the condition is not met.
Here is an example of how it looks inside the console:
Simply put, we have the boolean variable named condition, and its value is false. The condition of
console.assert() checks if it is true. Since that condition is not met, it displays a Chrome error log.
Methods for Grouping Logs
console.groupEnd() are for sorting Chrome logs.
To begin, you use
console.group(), which takes a single parameter. This parameter is for naming the group of logs.
All matching Chrome logs after that will be put into the group you created.
The grouping ends
Take a look at how this sorting looks inside the console:
Alternatively, you can start a group with the group collapsed initially if you do not need everything that is being logged visible.
console.groupCollapsed performs this action:
You can also nest groups of Chrome Console logs. It is useful for when you need to have a large group of logs displayed in smaller, convenient pieces:
Formating: Use of Format Specifiers
The first output message parameter of the
console.log() method can contain format specifiers.
Format specifiers are for indicating the formatting applied to a value.
Here is a list of possible specifiers:
|%s||Sets value format to string|
|%i or %d||Sets value format to integer|
|%f||Sets value format to floating-point value|
|%o||Sets value format to an expandable DOM element, as shown in the elements panel|
|%c||Apply CSS to the output text, as the second parameter dicta|
Let us take a look at a simple example, illustrating the use of specifiers:
console.log("Hello, %s !", "World");
The output message of this code is
Hello, World !. You can view the format specifier as a placeholder for a certain value.
Also, we can see that the value to insert in the place of the specifier is the following parameter of the function.
Parameter values are listed in the same order as they were in the first parameter.
Here is an example to illustrate this as well:
console.log("My name is %s and I'm %i years old.", "John Doe", "30");
As a result, the output of this one will be
My name is John Doe and I'm 30 years old.
Notice how we used different specifiers to indicate that the format of these parameters is different.
%s indicated it had to be a string and
%i indicated it had to be an integer.
The CSS you input as the second parameter when you use the
%c format specifier applies to the line of text that you included the format specifier.
To make this more clear, we should take a look at an example:
console.log("%cThis will be formatted with large, red text", "color: red; font-size: 30px");
This is how it will look in the console:
Tip: styling Chrome Console logs is useful if you want messages to stand out visually.
%o specifier or using the
Chrome Console Log: Summary
- You can sort Chrome logs, style them, or mark them as errors.