When debugging my code I often use Chrome dev tools and console logging instead of debugging with Visual Studio Code or using more advanced features of the dev tools. It simply feels faster when I wish to see the value of a variable or the contents of an object.

One thing has bugged me though. Traditionally, when wanting to display the contents a variable, I've used console.log(`value: ${value}`) to see both the actual value and a reference to the name of the variable being logged. With objects though, this would lead to the logger to output [object Object] instead of the object in a usable form, because the object is converted to a string.

You could often use JSON.stringify() to convert the object to a more readable form, but I have often found myself writing to lines of logging instead, one for the reference and other for the object:

console.log("value")
console.log(value)

This makes the object traversable in the console but leads to repetition and extra work. Luckily, there is a better way.

If you directly log an object, you can have the reference and the object in a traversable form written on a single line of code:

const myObject = {
  a: "foo",
  b: "bar"
}

console.log({ "MyObject contents": myObject })

With this method, you also have the added benefit of logging multiple variables or objects with a single line:

const myObject = {
  a: "foo",
  b: "bar"
}

const myValue = "some value"

console.log({
  "myObject contents": myObject,
  myValue: myValue
})

This method of logging has become my default way of logging, unless I am simply logging a line of text only. It increases productivity by saving time both in writing code and during actual debugging.