While most developers are familiar with basic console logging using console.log(), there are many other powerful methods provided by the console object that can make debugging more efficient and effective.

In this comprehensive guide, we will explore various console logging tricks such as console.table, console.group, console.assert, and more. These tricks can help you organize your debugging process, visualize complex data structures, and catch errors early on in your development workflow.

Table of Contents

1. Introduction to Console Logging
2. Basic Console Logging
3. Advanced Console Logging Tricks
   – [console.table](#heading-31-consoletable)
   – console.group and console.groupCollapsed
   – [console.assert](#heading-33-consoleassert)
   – console.count and console.countReset
   – console.time and console.timeEnd
   – [console.trace](#heading-36-consoletrace)
   – [console.dir](#heading-37-consoledir)
   – [console.clear](#heading-38-consoleclear)
4. Best Practices for Console Logging
5. Conclusion

1. Introduction to Console Logging

Console logging is a technique used by developers to output messages, variables, and other information to the browser's console. This is particularly useful for debugging purposes, as it allows developers to inspect the state of their code and track its execution flow.

The console object in JavaScript provides various methods for logging different types of information. While console.log() is the most commonly used method, there are several other methods that can be used to enhance your debugging experience.

2. Basic Console Logging

Before we dive into the advanced console logging tricks, let's start by revisiting the basics of console logging using console.log(). This method accepts any number of arguments and outputs them to the console.

const name = "Femi";

const age = 30;

console.log("Name:", name, "Age:", age);

In the above example, we are logging the name and age variables to the console using console.log(). This will output:

Name: Femi Age: 30

You can use console.log() to log strings, numbers, booleans, objects, arrays, and more.

3. Advanced Console Logging Tricks

3.1 console.table

The console.table() method allows you to display tabular data in the console. It takes an array or an object as input and presents it as a table.

const users = [

{ name: "Chris", age: 25 },

{ name: "Dennis", age: 15 },

{ name: "Victor", age: 17 }

];

console.table(users);

The above code will output a table in the console:

(index)  |  name  |  age
-------------------------
0    |  Chris  |   25
1    |  Dennis |   15
2    |  Victor |   17

console.table() is particularly useful when dealing with arrays of objects or other tabular data structures.

3.2 console.group and console.groupCollapsed

The console.group() and console.groupCollapsed() methods allow you to group related log messages together in the console. This can help organize your debugging output and make it easier to understand.

// Start a new console group named "Group 1"
console.group("Group 1");

// Log messages inside "Group 1"
console.log("Message 1");
console.log("Message 2");

// End "Group 1"
console.groupEnd();

// Start a new collapsed console group named "Group 2"
console.groupCollapsed("Group 2");

// Log messages inside "Group 2"
console.log("Message 3");
console.log("Message 4");

// End "Group 2"
console.groupEnd();

In the above example, we create two groups of log messages. The first group is expanded, while the second group is collapsed by default. This helps keep the console output organized and easy to navigate.

If you run this code in a browser's developer console, the output will look something like this:

Group 1
  Message 1
  Message 2
Group 2
  ▶ Message 3
  ▶ Message 4

In this example, "Group 1" is expanded by default, showing the messages inside it. On the other hand, "Group 2" is collapsed initially (indicated by the ▶ symbol), and you need to click on it to expand and reveal the messages inside. The collapsing of "Group 2" makes it visually neater in the console, especially when dealing with a large number of log messages.

3.3 console.assert

The console.assert() method allows you to assert whether a condition is true or false. If the condition is false, it will log an error message to the console.

const x = 5;

// Check if the condition x === 10 is true, if not, log the error message
console.assert(x === 10, "x is not equal to 10");

In this case, the condition being checked is x === 10, which compares the value of the variable x to 10. Since the value of x is 5, the condition is false. As a result, the console.assert method will log the error message to the console.

If you run this code in a browser's developer console, you would see an assertion error in the console output with the specified error message:

Assertion failed: x is not equal to 10

This is a helpful way to include runtime checks in your code and log informative messages if certain conditions are not met.

3.4 console.count and console.countReset

The console.count() method allows you to count the number of times a particular piece of code is executed. You can also reset the count using console.countReset().

function greet() {
  // Log and count the number of times "greet" is called
  console.count("greet");

  // Return a greeting message
  return "Hello!";
}

// Call greet() two times
greet();
greet();

// Reset the counter for "greet"
console.countReset("greet");

// Call greet() again
greet();

console.count("greet");: This line logs the number of times "greet" is called. The count is initially 1 when greet() is first called and increments with each subsequent call.

If you run this code in a browser's developer console, the output might look like this:

greet: 1
greet: 2
greet: 1

The first two calls to greet increment the count, and the third call, after the reset, starts the count again from 1. The count is specific to the label "greet."

3.5 console.time and console.timeEnd

The console.time() and console.timeEnd() methods allow you to measure the time taken by a block of code to execute.

console.time("timer");

for (let i = 0; i < 1000000; i++) {

// Some time-consuming operation

}

console.timeEnd("timer");

In the above example,

• console.time("timer");: This starts a timer with the label "timer" when the loop
• console.timeEnd("timer");: This stops the timer labeled "timer" and logs the elapsed time to the console.

If you run this code in a browser's developer console, the output will look like this:

timer: XXms

The "XX" will be replaced with the actual time taken by the loop to execute the time-consuming operation. This measurement is useful for profiling and understanding the performance of a specific code block or operation.

3.6 console.trace

The console.trace() method outputs a stack trace to the console. This can be helpful for debugging purposes to see the call stack leading to the current execution point.

function foo() {
  // Call the bar function
  bar();
}

function bar() {
  // Log a trace of the call stack
  console.trace("Trace:");
}

// Call the foo function
foo();

• foo function: Calls the bar function.
• bar function: Logs a trace of the call stack using console.trace.
• foo is called: This triggers the call to bar, and the trace is logged.

If you run this code in a browser's developer console, the output might look something like this:

Trace:
bar @ (index):8
foo @ (index):3
(anonymous) @ (index):12

The output shows the call stack at the time console.trace was called. It includes information about the functions in the stack, such as the function names and their respective locations in the code. In this example, the call stack is displayed in reverse order, with the most recent function call at the top.

3.7 console.dir

The console.dir() method allows you to display an interactive listing of the properties of a JavaScript object.

const obj = { name: "Chris", age: 25 };

// Display an interactive listing of the properties of the object
console.dir(obj);

The console.dir method is commonly used to log an interactive representation of an object to the console. If you run this code in a browser's developer console, the output might look something like this:

Object
  age: 25
  name: "Chris"
  __proto__: Object

This output provides a visual representation of the object's properties, including their names and values. It also shows the prototype of the object (__proto__). The console.dir method is particularly useful when dealing with complex objects or nested structures, as it allows you to explore the object's properties in a more interactive way than console.log.

3.8 console.clear

The console.clear() method clears the console of all previous log messages.

console.log("Message 1");

console.clear();

console.log("Message 2");

In the above example, console.clear() will clear the console before logging "Message 2".

4. Best Practices for Console Logging

While console logging can be a powerful debugging tool, it's important to use it judiciously and follow best practices:

• Avoid Excessive Logging: Too many log messages can clutter the console and make it difficult to find relevant information. Only log what is necessary for debugging.
• Use Descriptive Messages: When logging messages, use descriptive labels to make it clear what each message represents.
• Use Console Methods Wisely: Choose the appropriate console method (log, table, group, and so on) based on the type of data you are logging and how you want it to be displayed.
• Remove Debugging Code in Production: Remember to remove or disable console logging statements in your production code to avoid unnecessary overhead.

5. Conclusion

Console logging is a powerful tool for debugging JavaScript code. By leveraging advanced console logging tricks such as console.table, console.group, console.assert, and others, you can streamline your debugging process and gain deeper insights into your code's behavior.

In this comprehensive guide, we covered various console logging tricks, along with examples demonstrating how to use them effectively. By incorporating these techniques into your development workflow and following best practices, you can become a more efficient and effective developer.

Experiment with these console logging tricks in your own projects to see how they can help you debug and understand your code better. Happy debugging!

In this article, we will explore the console object and the variety of methods that will help you debug your code.

What is the console Object?

The console object is a global object that provides access to the browser's debugging console. This object has a variety of methods that can be used to log messages, errors, warnings and other information to the console.

In this article, we will look at the more commonly used methods such as console.log, console.warn, and console.error.

How to Access the Console in Your Browser

To access the console in your browser, you can right click on the page and select Inspect. This will open the developer tools. You can also use the keyboard shortcut Ctrl + Shift + I on Windows or Cmd + Option + I on Mac.

How to Use the console.log() Method

The most commonly used method to debug applications is the console.log method. This method is used to log messages and variables to the console.

console.log("Hello, world!");

When you run this code in your browser, you will see the message "Hello, world!" logged to the console.

This method is also useful for logging the value of variables to the console and finding bugs in your code.

Let's say we wanted to build out a Mad Libs generator. This is a popular game where you fill in the blanks of a story with random words.

Here is the code we have created so far:

function madLibsGenerator(verb, adjective, noun) {
  return `We shall ${verb} the${adjective}${noun}.`;
}

console.log(madLibsGenerator("dance", "big", "dog"));

We want to see what our function is doing, so we have a console.log(madLibsGenerator("dance", "big", "dog"));. But when we check the console, we notice some spacing issues with the printed sentence.

Now that we know where the issue is, we can fix those spacing issues in the function here:

function madLibsGenerator(verb, adjective, noun) {
  return `We shall ${verb} the ${adjective} ${noun}.`;
}

console.log(madLibsGenerator("dance", "big", "dog"));

Now the console should print the correct result.

What is the console.warn() Method?

The console.warn method is used to log warning messages to the console. This method is useful for logging messages that are not errors, but are still important for the developer to be aware of.

For example, if you are building an application that is using a deprecated method, you can use the console.warn method to log a warning message to the console.

console.warn(
  "This method is deprecated and will be removed in the next version"
);

When you run this code in your browser, you will see the warning message "This method is deprecated and will be removed in the next version" logged to the console.

What is the console.error() Method?

The console.error method is used to log error messages to the console. This method is useful for logging messages that indicate an error has occurred in your application.

Let's say that you have an application that is trying to fetch data from an API, but the API is down. You can use the console.error method to log an error message to the console.

Here is an example of how to use the console.error method to log an error message to the console:

fetch("https://api.example.com/data")
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((error) =>
    console.error("There was an error fetching the data", error)
  );

If there is an error fetching the data from the API, you will see the error message "There was an error fetching the data" logged to the console.

Conclusion

There are so many more methods that you can use with the console object to help you debug your code. In this article, we have only scratched the surface.

To learn more about the console object and the variety of methods that you can use, check out the MDN docs.

I encourage you to play around with the console object and the variety of methods that it has to offer. It is a powerful tool that will help you debug your code and find the source of any issues that you may run into.

In this tutorial, you'll learn how to add a randomized delay to the console.log statements in JavaScript and Node.js.

Why would you want to do this?

First of all, programming should be fun. And making a boring thing like console.log look nice is very pleasing.

If you want to get quick access to the source code, you can check out this GitHub repository.

Step 1: Create a function that takes the string and passes it into console.log

To make sure that every step is clear, we'll start small and create a function that accepts a string as a parameter and logs it to the console.

const log = (s) => {
  console.log(s);
}

Step 2: Log characters of the string one-by-one

Before we can add a delay between the output of the individual chars, we need to make sure that they're actually split.

Let's add a for loop that iterates over each letter of the string and prints it to the console.

const log = (s) => {
  for (const c of s) {
    console.log(c);
  }
}

Step 3: How to fix the newline issue

Now, each letter is printed on a new line as every call to console.log adds an empty line.

We'll replace the console.log with _**process**_.stdout.write which essentially does the same thing, but doesn't add a new line after the output.

Now, however, we've lost the newline in the very end of the output, which is still desirable. We'll add it by explicitly printing the \n character.

const log = (s) => {
  for (const c of s) {
    process.stdout.write(c);
  }
  process.stdout.write('\n');
}

Step 4: Implement the sleep function

In JavaScript we can't simply stop the execution of the synchronous code for some amount of time. To make this happen, we need to write our own function. Let's call it sleep.

It should accept a single parameter ms and return a Promise that resolves after the delay of ms milliseconds.

const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
};

Step 5: Add the delay

So, we're ready to add a delay to our output! We need a couple of things here:

• add a parameter delay to the function log
• make the function log asynchronous by adding the keyword async
• call a sleep function that will delay the next loop iteration by delay milliseconds

const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
};

const log = async (s, delay) => {
  for (const c of s) {
    process.stdout.write(c);
    await sleep(delay);
  }
  process.stdout.write('\n');
}

Step 6: Implement randomized delay

The output will look even better if we randomize the timing.

Let's add another boolean parameter randomized to the function log. If it's true, then the argument passed into sleep should be in the range from 0 to delay milliseconds.

const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
};

const log = async (s, delay, randomized) => {
  for (const c of s) {
    process.stdout.write(c);
    await sleep((randomized ? Math.random() : 1) * delay);
  }
  process.stdout.write('\n');
}

I've used a ternary operator, but you can replace it with a regular if statement:

if (randomized) {
  sleep(Math.random * delay);
} else {
  sleep(delay);
}

Step 7: Make the log configurable

Right now, we've implemented pretty much everything we wanted to. But calling it isn't very clean as we have to pass the delay and randomization flag every time we want to print something to the console.

log('Hello, world!', 100, true);
log('What\'s up?', 100, true);
log('How are you?', 100, true);

It'd be nice if we could have a configurable log that could be called with a single parameter - a string that we want to output.

To do this, we'll have to rewrite our code. Here's the plan:

• wrap all current functionality into a single function funkylog that accepts an object with 2 fields, delay and randomized
• funkylog should return the anonymous arrow function. Its implementation should be the same as log, that we've implemented on steps 1 through 6
• parameters delay and randomized should be removed from the log function as now they'll be passed down from the funkylog

const funkylog = ({ delay, randomized }) => {
  const sleep = (ms) => {
    return new Promise(resolve => setTimeout(resolve, ms));
  };

  return async (s) => {
    for (const c of s) {
      process.stdout.write(c);
      await sleep((randomized ? Math.random() : 1) * delay);
    }
    process.stdout.write('\n');
  }
};

Step 8: Add the finishing touch

Let's take a look at what we've got:

const log = funkylog({ delay: 100, randomized: true });

log('Hello, world!');
log('What\'s up?');
log('How are you?');

• We can create a configurable logger using the function funkylog
• We can select any delay we want
• Using the logger doesn't require us to pass the delay every time we call it

One more improvement that we can make is providing a default value for the delay parameter.

const funkylog = ({ delay = 100, randomized }) => {
    ..
    ..

So, now we can create the funkylog without any arguments and it will still work!

const log = funkylog();

console.log('Hello, world!');

Improvement ideas

As I've said from the very beginning, first of all, programming should be fun. Otherwise it'll become a routine and you won't enjoy doing it.

Do make further improvements to the funkylog and let me know what your results look like! For example, you can spice up the output by colorizing it. You can use the npm module chalk for it.

Then, once you have implemented different colors, you can add another flag that would add an additional delay between the words in the string.

Thank you for staying with me, throughout the whole tutorial!
I write a programming blog at learn.coderslang.com and build a Full Stack JS course.

If you have feedback or questions on this tutorial, feel free to Tweet me @coderslang or jump into the discussion on Telegram @coderslang_chat

But, did you know that there is more to console than just log? In this article, I'll show you how to print to the console in JS, as well as all of the things you didn't know console could do.

Firefox Multi-line Editor Console

If you've never used the multi-line editor mode in Firefox, you should give it a try right now!

Just open the console, Ctrl+Shift+K or F12, and in the top right you will see a button that says "Switch to multi-line editor mode". Alternatively, you can press Ctrl+B.

This gives you a multi-line code editor right inside Firefox.

console.log

Let's start with a very basic log example.

let x = 1
console.log(x)

Type that into the Firefox console and run the code. You can click the "Run" button or press Ctrl+Enter.

In this example, we should see "1" in the console. Pretty straightforward, right?

Multiple Values

Did you know that you can include multiple values? Add a string to the beginning to easily identify what it is you are logging.

let x = 1
console.log("x:", x)

But what if we have multiple values that we want to log?

let x = 1
let y = 2
let z = 3

Instead of typing console.log() three times we can include them all. And we can add a string before each of them if we wanted, too.

let x = 1
let y = 2
let z = 3
console.log("x:", x, "y:", y, "z:", z)

But that's too much work. Just wrap them with curly braces! Now you get an object with the named values.

let x = 1
let y = 2
let z = 3
console.log( {x, y, z} )

Console Output

You can do the same thing with an object.

let user = {
  name: 'Jesse',
  contact: {
    email: 'codestackr@gmail.com'
  }
}
console.log(user)
console.log({user})

The first log will print the properties within the user object. The second will identify the object as "user" and print the properties within it.

If you are logging many things to the console, this can help you to identify each log.

Variables within the log

Did you know that you can use portions of your log as variables?

console.log("%s is %d years old.", "John", 29)

In this example, %s refers to a string option included after the initial value. This would refer to "John".

The %d refers to a digit option included after the initial value. This would refer to 29.

The output of this statement would be: "John is 29 years old.".

Variations of logs

There are a few variations of logs. There is the most widely used console.log(). But there is also:

console.log('Console Log')
console.info('Console Info')
console.debug('Console Debug')
console.warn('Console Warn')
console.error('Console Error')

These variations add styling to our logs in the console. For instance, the warn will be colored yellow, and the error will be colored red.

Note: The styles vary from browser to browser.

Optional Logs

We can print messages to the console conditionally with console.assert().

let isItWorking = false
console.assert(isItWorking, "this is the reason why")

If the first argument is false, then the message will be logged.

If we were to change isItWorking to true, then the message will not be logged.

Counting

Did you know that you can count with console?

for(i=0; i<10; i++){
  console.count()
}

Each iteration of this loop will print a count to the console. You will see "default: 1, default: 2", and so on until it reaches 10.

If you run this same loop again you will see that the count picks up where it left off; 11 - 20.

To reset the counter we can use console.countReset().

And, if you want to name the counter to something other than "default", you can!

for(i=0; i<10; i++){
  console.count('Counter 1')
}
console.countReset('Counter 1')

Now that we have added a label, you will see "Counter 1, Counter 2", and so on.

And to reset this counter, we have to pass the name into countReset. This way you can have several counters running at the same time and only reset specific ones.

Track Time

Besides counting, you can also time something like a stopwatch.

To start a timer we can use console.time(). This will not do anything by itself. So, in this example, we will use setTimeout() to emulate code running. Then, within the timeout, we will stop our timer using console.timeEnd().

console.time()
setTimeout(() => {
  console.timeEnd()
}, 5000)

As you would expect, after 5 seconds, we will have a timer end log of 5 seconds.

We can also log the current time of our timer while it's running, without stopping it. We do this by using console.timeLog().

console.time()

setTimeout(() => {
  console.timeEnd()
}, 5000)

setTimeout(() => {
  console.timeLog()
}, 2000)

In this example, we will get our 2 second timeLog first, then our 5 second timeEnd.

Just the same as the counter, we can label timers and have multiple running at the same time.

Groups

Another thing that you can do with log is group them. ?

We start a group by using console.group(). And we end a group with console.groupEnd().

console.log('I am not in a group')

console.group()
console.log('I am in a group')
console.log('I am also in a group')
console.groupEnd()

console.log('I am not in a group')

This group of logs will be collapsible. This makes it easy to identify sets of logs.

By default, the group is not collapsed. You can set it to collapsed by using console.groupCollapsed() in place of console.group().

Labels can also be passed into the group() to better identify them.

Stack Trace

You can also do a stack trace with console. Just add it into a function.

function one() {
  two()
}
function two() {
  three()
}
function three() {
  console.trace()
}
one()

In this example, we have very simple functions that just call each other. Then, in the last function, we call console.trace().

Console Output

Tables

Here's one of the most mind-blowing uses for console: console.table().

So let's set up some data to log:

let devices = [
  {
    name: 'iPhone',
    brand: 'Apple'
  },
  {
    name: 'Galaxy',
    brand: 'Samsung'
  }
]

Now we'll log this data using console.table(devices).

Console Output

But wait – it gets better!

If we only want the brands, just console.table(devices, ['brand'])!

Console Output

How about a more complex example? In this example, we'll use jsonplaceholder.

async function getUsers() {
  let response = await fetch('https://jsonplaceholder.typicode.com/users')
  let data = await response.json()

  console.table(data, ['name', 'email'])
}

getUsers()

Here we are just printing the "name" and "email". If you console.log all of the data, you will see that there are many more properties for each user.

Style ?

Did you know that you can use CSS properties to style your logs?

To do this, we use %c to specify that we have styles to add. The styles get passed into the second argument of the log.

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

You can use this to make your logs stand out.

Clear

If you are trying to troubleshoot an issue using logs, you may be refreshing a lot and your console may get cluttered.

Just add console.clear() to the top of your code and you'll have a fresh console every time you refresh. ?

Just don't add it to the bottom of your code, lol.

Thanks for Reading!

If you want to revisit the concepts in this article via video, you can check out this video-version I made here.

I'm Jesse from Texas. Check out my other content and let me know how I can help you on your journey to becoming a web developer.

• Subscribe To My YouTube

• Say Hello! Instagram | Twitter

• Sign Up For My Newsletter

The console object is a very useful feature of browsers that has been around for many years. It provides access to the browser’s debugging console.
Most web developers know how to print messages to the console using console.log. But I’ve found that many don’t know about other features of the console, even though they can be very useful for every web developer.

In this post, I’ll go over some of these lesser known features and capabilities. I hope that you will find them useful and interesting, and will incorporate them into your day to day workflow and code.

I added a screenshot of the result of each example. If you want to try things for yourself, just open the DevTools and copy-paste the examples.

Using multiple arguments

It is quite common to log several values together. These may be a message along with a related value or the content of several related variables.

Here are two ways I’ve seen developers achieve this:

1. String concatenation

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('Foo bar ' + a + ' ' + b + ' ' + c);

Result of string concatenation

2. Using multiple calls

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('Foo bar');console.log(a);console.log(b);console.log(c);

Result of multiple calls

These methods may work (sort of), but:

• They are not flexible
• They are not very readable
• They are cumbersome to write
• They need special means to work properly with object variables

There are several better alternatives for outputting many variables. The most useful one for quick data dump is sending multiple arguments to console.log, like so:

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('Foo bar', a, b, c);

Result of multiple arguments

This is very handy for debugging, but the output is not very controllable. For output that is intended to be read (like for a library), I would use a different method, which we’ll get to later on.

Using different log levels

Besides the familiar console.log, there are other logging methods that correspond to different log levels:

console.debug('Debug message');console.info('Info message');console.log('Good old log message');console.warn('A warning message');console.error('This is an error');

Log levels as seen in Google Chrome

Each log level may have a different default style, which makes spotting errors and warnings at a glance easier.

You can usually also filter which log levels you want to be visible in the DevTools console. This may help reduce clutter.

Filtering log levels in Google Chrome

The appearance of the different levels and the filtering granularity changes from browser to browser.

Grouping console lines

Some times it is useful to group log messages together. It may allow for more organised and readable output.

This is actually very simple to achieve:

console.group();console.log('First message');console.log('Second message');console.groupEnd();

Grouped log messages

Note that log groups can also be nested and labeled:

console.group('Group aaa');console.log('First message');console.group('Group bbb');console.log('level 2 message a');console.log('Level 2 message b');console.groupEnd();console.log('Second message');console.groupEnd();

Nested and labeled groups

In case you want the group to appear collapsed, use console.groupCollapsed()

Measuring performance

Measuring the time between points in the code can serve as a quick way to check the performance of some operations.

Here is a trivial way to do this:

const start = Date.now();// do some stuffconsole.log('Took ' + (Date.now() - start) + ' millis');

This works, but there’s a more elegant way to achieve something similar:

console.time('Label 1');// do some stuffconsole.timeEnd('Label 1');

Measuring time with the console

The code is shorter, the measurement is more accurate, and you can keep track of up to 10,000 different timers in parallel on a page.

String substitution

Previously we learned that you can pass multiple arguments to console.log to output multiple values simultaneously. Another way to achieve something similar is to use string substitution. This method requires familiarity with the available placeholders, but offers greater control over the output.

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('number %d string %s object %o', a, b, c);

Logging with string substitution

Take a look at the documentation (link in the end) for a list of available placeholders.

Styling

It can be nice to style different log messages differently to increase readability.

We already mentioned that browsers give different default styling to some log levels, but this can also be customized according to your specific needs. Styling is done using a subset of CSS rules, passed in a string as the second parameter, and applied using the marker %c.

Note that you can have different styles for different parts of the log message.

For example:

console.log("Normal %cStyled %clorem %cipsum", "color: blue; font-weight: bold", "color: red", "background-image: linear-gradient(red, blue); color: white; padding: 5px;");

Styled log messages

Summary

In this post we have seen some of the features of console that I think are less well-known and more useful. This is by no means an exhaustive list of everything the console can do, as it has many more tricks up its sleeve.

If this got you interested and you want to find out what other things you can do with the console, I recommend reading the relevant documentation on MDN and trying things out in DevTools.

If you found this useful please share this article on social media.
You can also follow me on twitter (@giladaya). Thanks for reading!

One of the most basic debugging tools in JavaScript is console.log(). The console comes with several other useful methods that can add to a developer’s debugging toolkit.

You can use the console to perform some of the following tasks:

• Output a timer to help with simple benchmarking
• Output a table to display an array or object in an easy-to-read format
• Apply color and other styling options to the output with CSS

The Console Object

The console object gives you access to the browser’s console. It lets you output strings, arrays, and objects that help debug your code. The console is part of the window object, and is supplied by the Browser Object Model (BOM).

We can get access to the console in one of two ways:

1. window.console.log('This works')
2. console.log('So does this')

The second option is basically a reference to the former, so we’ll use the latter to save keystrokes.

One quick note about the BOM: it does not have a set standard, so each browser implements it in slightly different ways. I tested all of my examples in both Chrome and Firefox, but your output may appear differently depending on your browser.

Outputting text

Logging text to the console

The most common element of the console object is console.log. For most scenarios, you’ll use it to get the job done.

There are four different ways of outputting a message to the console:

1. log
2. info
3. warn
4. error

All four work the same way. All you do is pass one or more arguments to the selected method. It then displays a different icon to indicate its logging level. In the examples below, you can see the difference between an info-level log and a warning/error-level log.

Simple and easy to read output

With many things going on this can become hard to read

You may have noticed the error log message - it’s more showy than the others. It displays both a red background and a stack trace, where info and warn do not. Though warn does have a yellow background in Chrome.

These visual differences help when you need to identify any errors or warnings in the console at a quick glance. You would want to make sure that they are removed for production-ready apps, unless they are there to warn other developers that they are doing something wrong with your code.

String Substitutions

This technique uses a placeholder in a string that is replaced by the other argument(s) you pass to the method. For example:

Input: console.log('string %s', 'substitutions')

Output: string substitutions

The %s is the placeholder for the second argument 'substitutions' that comes after the comma. Any strings, integers, or arrays will be converted to a string and will replace the %s. If you pass an object, it will display [object Object].

If you want to pass an object, you need to use %o or %O instead of %s.

console.log('this is an object %o', { obj: { obj2: 'hello' }})

Numbers

String substitution can be used with integers and floating-point values by using:

• %i or %d for integers,
• %f for floating-points.

Input: console.log('int: %d, floating-point: %f', 1, 1.5)

Output: int: 1, floating-point: 1.500000

Floats can be formatted to display only one digit after the decimal point by using %.1f. You can do %.nf to display n amount of digits after the decimal.

If we formatted the above example to display one digit after the decimal point for the floating-point number, it would look like this:

Input: console.log('int: %d, floating-point: %.1f', 1, 1.5)

Output:int: 1, floating-point: 1.5

Formatting specifiers

1. %s | replaces an element with a string
2. %(d|i)| replaces an element with an integer
3. %f | replaces an element with a float
4. %(o|O) | element is displayed as an object.
5. %c | Applies the provided CSS

String Templates

With the advent of ES6, template literals are an alternative to substitutions or concatenation. They use backticks (`) instead of quotation marks, and variables go inside${}`:

const a = 'substitutions';

console.log(`bear: ${a}`);

// bear: substitutions

Objects display as [object Object] in template literals, so you’ll need to use substitution with %o or %O to see the details, or log it separately by itself.

Using substitutions or templates creates code that’s easier to read compared to using string concatenation: console.log('hello' + str + '!');.

Pretty color interlude!

Now it is time for something a bit more fun and colorful!

It is time to make our console pop with different colors with string substitutions.

I will be using a mocked Ajax example that give us both a success (in green) and failure (in red) to display. Here’s the output and code:

Successful bears and failing bats

const success = [ 'background: green', 'color: white', 'display: block', 'text-align: center'].join(';');

const failure = [ 'background: red', 'color: white', 'display: block', 'text-align: center'].join(';');

console.info('%c /dancing/bears was Successful!', success);console.log({data: { name: 'Bob', age: 'unknown'}}); // "mocked" data response

console.error('%c /dancing/bats failed!', failure);console.log('/dancing/bats Does not exist');

You apply CSS rules in the string substitution with the %c placeholder.

console.error('%c /dancing/bats failed!', failure);

Then place your CSS elements as a string argument and you can have CSS-styled logs. You can add more than one %c into the string as well.

console.log('%cred %cblue %cwhite','color:red;','color:blue;', 'color: white;')

This will output the words ‘red’, ‘blue’ and ‘white’ in their respected colors.

There are quite a few CSS properties supported by the console. I would recommend experimenting to see what works and what doesn’t. Again, your results may vary depending on your browser.

Other available methods

Here are a few other available console methods. Note that some items below have not had their APIs standardized, so there may be incompatibilities between the browsers. The examples were created with Firefox 51.0.1.

Assert()

Assert takes two arguments — if the first argument evaluates to a falsy value, then it displays the second argument.

let isTrue = false;

console.assert(isTrue, 'This will display');

isTrue = true;

console.assert(isTrue, 'This will not');

If the assertion is false, it outputs to the console. It’s displayed as an error-level log as mentioned above, giving you both a red error message and a stack trace.

Dir()

The dir method displays an interactive list of the object passed to it.

console.dir(document.body);

Chrome displays dir differently

Ultimately, dir only saves one or two clicks. If you need to inspect an object from an API response, then displaying it in this structured way can save you some time.

Table()

The table method displays an array or object as a table.

console.table(['Javascript', 'PHP', 'Perl', 'C++']);

Output for an array

The array’s indices or object property names come under the left-hand index column. Then the values are displayed in the right-hand column.

const superhero = {     firstname: 'Peter',    lastname: 'Parker',}console.table(superhero);

Output for an object

Note for Chrome users: This was brought to my attention by a co-worker but the above examples of the table method don’t seem to work in Chrome. You can work around this issue by placing any items into an array of arrays or an array of objects:

console.table([['Javascript', 'PHP', 'Perl', 'C++']]);

const superhero = {     firstname: 'Peter',    lastname: 'Parker',}console.table([superhero]);

Group()

console.group() is made up of at least a minimum of three console calls, and is probably the method that requires the most typing to use. But it’s also one of the most useful (especially for developers using Redux Logger).

A somewhat basic call looks like this:

console.group();console.log('I will output');console.group();console.log('more indents')console.groupEnd();console.log('ohh look a bear');console.groupEnd();

This will output multiple levels and will display differently depending on your browser.

Firefox shows an indented list:

Chrome shows them in the style of an object:

Each call to console.group() will start a new group, or create a new level if it’s called inside a group. Each time you call console.groupEnd() it will end the current group or level and move back up one level.

I find the Chrome output style is easier to read since it looks more like a collapsible object.

You can pass group a header argument that will be displayed over console.group:

console.group('Header');

You can display the group as collapsed from the outset if you call console.groupCollapsed(). Based on my experience, this seems to work only in Chrome.

Time()

The time method, like the group method above, comes in two parts.

A method to start the timer and a method to end it.

Once the timer has finished, it will output the total runtime in milliseconds.

To start the timer, you use console.time('id for timer') and to end the timer you use console.timeEnd('id for timer') . You can have up to 10,000 timers running simultaneously.

The output will look a bit like this timer: 0.57ms

It is very useful when you need to do a quick bit of benchmarking.

Conclusion

There we have it, a bit of a deeper look into the console object and some of the other methods that come with it. These methods are great tools to have available when you need to debug code.

There are a couple of methods that I have not talked about as their API is still changing. You can read more about them or the console in general on the MDN Web API page and its living spec page.

_[https://developer.mozilla.org/en/docs/Web/API/console](https://developer.mozilla.org/en/docs/Web/API/console" rel="noopener" target="blank" title=")