DEV Community

Chris Achinga
Chris Achinga

Posted on • Originally published at chrisdevcode.hashnode.dev on

5 JavaScript Console Methods you should Know

All web developers are probably familiar with using the web console as their debugging tool. The most common way is using the famous console.log tool that JavaScript provides.

The console has more than just the .log() method that could be helpful. Check out some of the methods you could use:

1. console.log()

This is the most used method of all

It outputs messages to the web console. The message may be of any data type. can also pass in variables and functions as parameters.

Examples:

console.log('A message to the console')

console.log(451999)

Enter fullscreen mode Exit fullscreen mode

console-log.png

There are a lot of things you could do with the .log():

Showing a variable content:

let name = 'hashnode blog'

// displaying contents stored in name variable to the console
console.log(name)

Enter fullscreen mode Exit fullscreen mode

Calling a function

const Hello = str => {
 return `Hello ${str}`
}

console.log(Hello('World'))

Enter fullscreen mode Exit fullscreen mode

2.console.error()

This is used to output error messages on the web console.

Errors shown are in red text and have a light red background color.

error.png

3. console.warn()

It's used to output warning messages on the web console.

Warning texts will be in yellow over a light-yellow background on the console.

warning.png

4. console.table()

The method is used to display groups of data in a tabular layout on the web console. helps visualize complex data in form of arrays and objects in a tabular form. takes in two arguments, the data and the columns to be displayed.

Displaying Arrays

// an array of strings
console.table(["apples", "oranges", "bananas"]);

Enter fullscreen mode Exit fullscreen mode

tablearray.png

Objects

// an array of objects

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily]);

Enter fullscreen mode Exit fullscreen mode

table-array.png

5. console.clear()

This one clears everything from your console.

Conclusion

Visit MDN DOCS to learn more about the console API and its methods

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more