The Console object is a tool that allows us to display information on the screen (for example, for debugging or analyzing applications).
It is part of the global JavaScript API and does not need to be imported or instantiated. We simply have it available through the global console object.
Depending on where we are executing our JavaScript file
- In a browser, the output will be in the development tools (DevTools)
- In a runtime like Node.js, the output will be in the terminal
In JavaScript the console is used continuously. So let’s look at some of its main methods and utilities 👇.
What is console.log
The method you will use most frequently is console.log. Its main purpose is to print information to the console.
console.log(object);Where object can be any type of data you want to print
Let’s see it with a simple example. If we do,
let message = "Hello, LuisLlamas!";
console.log(message);When executing the above code in a browser, Hello, LuisLlamas! will be printed to the console.
This is useful to verify that variables contain the expected values and that the execution flow is correct (giving us messages when a point is crossed).
console.log is not only used to display texts. It can handle a wide variety of data types, from primitive types to more complex structures.
Additional options for console.log
In addition to its basic use, the console.log method offers various options to enhance console output.
Multiple parameters
You can pass multiple values to the console.log method, and it will print them consecutively, separated by a space.
console.log(value1, value2, ..., valueN);For example, it is possible to use it to include a label describing what you are showing:
console.log("Result of the operation:", result);
// Output: Result of the operation: <value of result>Or to show several related variables or values in a single line:
const name = "Maria";
const age = 25;
const city = "Madrid";
console.log("Name:", name, "Age:", age, "City:", city);
// Output: Name: Maria Age: 25 City: MadridFormatting with placeholders
console.log supports the use of placeholders, allowing you to control the format of the output.
%s(for strings)%d(for integers)%o(for objects)
const name = "Luis";
const age = 30;
console.log("Hello, my name is %s and I am %d years old", name, age);
// Output: Hello, my name is Luis and I am 30 years oldCustom styles in the console
In environments like browsers, you can apply CSS styles to your messages using the %c placeholder to visually highlight messages.
console.log("%cHello, World!", "color: blue; font-size: 20px; font-weight: bold;");
// Output: The text will appear styled in blue, with a large size and bold.You can use multiple styled declarations in a single message:
console.log(
"%cSuccess:%c The operation completed successfully.",
"color: green; font-weight: bold;",
"color: black;"
);
// Output: Success: appears in green and bold; the rest in normal black.Styles are supported in most modern browsers, but are not available in Node.js.
Additional console methods
In addition to console.log, the console object offers several additional methods that can be useful for different types of debugging:
console.error
Prints error messages to the console. Generally displayed in red to highlight errors.
console.error("This is an error message.");console.warn
Prints warning messages to the console, typically in yellow.
console.warn("This is a warning message.");console.info
Prints informational messages. It does not have a specific style by default and is used to show additional information.
console.info("This is an informational message.");console.debug
Prints debug messages. The visibility of these messages may depend on the environment’s configuration.
console.debug("This is a debug message.");console.table
Displays tabular data in a table format. It is especially useful for arrays of objects.
let users = [
{ name: "Laura", age: 28 },
{ name: "Luis", age: 32 }
];
console.table(users);console.group and console.groupEnd
Groups console messages to make the output more organized. You can use console.group to start a group of messages and console.groupEnd to close it.
console.group("User Data");
console.log("Name: Laura");
console.log("Age: 28");
console.groupEnd();console.time() and console.timeEnd()
Allows you to measure the execution time of an operation.
console.time("Calculation");
let sum = 0;
for (let i = 0; i < 1000000; i++) {
sum += i;
}
console.timeEnd("Calculation");Practical examples of using console.log
Code Debugging
console.log is commonly used for debugging code by allowing you to print the current state of variables and the execution flow. This is useful for identifying where errors may be occurring.
function add(a, b) {
console.log("Received values:", a, b);
return a + b;
}Value Verification
You can use console.log to verify the contents of variables and objects at specific points in the code.
let userData = {
name: "Miguel",
age: 29
};
console.log("User data:", userData);Execution Tracking
console.log helps track the flow of code execution, showing when certain functions or blocks of code are executed.
function startProcess() {
console.log("Process started.");
// Process logic
console.log("Process in progress.");
}Prefer more advanced debugging methods
In JavaScript, you will use console.log frequently, as a tool to check that an application works (this is inevitable, you will do it no matter how much I tell you not to)
But remember that there are also more advanced debugging tools, such as breakpoints and the integrated debugger in browsers.
Additional considerations
- Never in production: Limit the use of
consoleto the development stage. Make sure to remove debugging messages before production. - Security and privacy: Never use
consoleto print sensitive information, such as passwords or personal data.