Some of the console API is probably muscle memory for web developers, but thereis so much more than justconsole.log() for you to use. Deno has great supportfor this API, so whether you’re writing JavaScript for the browser of for theserver it’s worth learning about these helpful utilities.

Let’s take a look at some of this API’s most useful methods. Your debugging isgoing to get so much easier!

console.log()Jump to heading#

Hello, old friend! You’ll most likely be using this to output logging messagesto the console to help you debug.

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

You can output multiple items by separated by commas like so:

const person={"name":"Jane","city":"New York"};console.log("Hello, ", person.name,"from ", person.city);// "Hello, Jane from New York"

Or you can use string literals:

const person={"name":"Jane","city":"New York"};console.log(`Hello${person.name} from${person.city}`);// "Hello, Jane from New York"

You can alsoapply some styling using CSS using the%c directive:

console.log("Wild %cblue","color: blue","yonder");// Applies a blue text color to the word "blue"

…but there is much more you can do with the console API.

console.table()Jump to heading#

Thetable method is helpful for outputting structured data like objects foreasier inspection.

const people={"john":{"age":30,"city":"New York",},"jane":{"age":25,"city":"Los Angeles",},};console.table(people);/*┌───────┬─────┬───────────────┐│ (idx) │ age │ city          │├───────┼─────┼───────────────┤│ john  │ 30  │ "New York"    ││ jane  │ 25  │ "Los Angeles" │└───────┴─────┴───────────────┘*/

You can also specify the properties of your object that you’d like to include inthe table. Great for inspecting a summary of those detailed objects to see justthe part you are concerned with.

console.table(people,["city"]);/* outputs┌───────┬───────────────┐│ (idx) │ city          │├───────┼───────────────┤│ john  │ "New York"    ││ jane  │ "Los Angeles" │└───────┴───────────────┘*/

Timer methodsJump to heading#

Understanding how long specific parts of your application take is key toremoving performance bottlenecks and expensive operations. If you’ve everreached for JavaScript’s date method to make yourself a timer, you’ll wish you’dknow this one long ago. It’s more convenient and more accurate.

Tryusingconsole.time(),console.timeLog(),andconsole.timeEnd()instead.

console.time("My timer");// starts a timer with label "My timer"// do some work...console.timeLog("My timer");// outputs the current timer value, e.g. "My timer: 9000ms"// do more work...console.timeEnd("My timer");// stops "My timer" and reports its value, e.g. "My timer: 97338ms"

You can create multiple timers each with their own label. Very handy!

Counting things withconsole.count()Jump to heading#

It can be helpful to keep a count of how many times specific operations in yourcode have been executed. Rather than doing this manually you can useconsole.count()which can maintain multiple counters for you based on the label you provide.

// increment the default counterconsole.count();console.count();console.count();/*"default: 1""default: 2""default: 3"*/

This can be very handy inside a function and passing in a label, like so:

functionpat(animal){  console.count(animal);return`Patting the${animal}`;}pat("cat");pat("cat");pat("dog");pat("cat");/*"cat: 1""cat: 2""dog: 1""cat: 3"*/

Going deeper withconsole.trace()Jump to heading#

For a detailed view of what is happening in your application, you can output astack trace to the console withconsole.trace():

// main.jsfunctionfoo(){functionbar(){    console.trace();}bar();}foo();/*Trace    at bar (file:///PATH_TO/main.js:3:13)    at foo (file:///PATH_TO/main.js:5:3)    at file:///PATH_TO/main.js:8:1*/

There’s more to explore, but these handy methods can give your JavaScriptdebugging a boost and they are ready and waiting for you to use right in yourbrowser or in your Deno application.

Take a look atconsole support in the API Reference docs.for more.