Cool Console stuff: Easy object inspection
Tags: javascript, debugging, console
Published: 2022-04-06 02:37:06

---
title: Cool Console stuff: Easy object inspection
published: true
description: Write better, easier console messages with String Substitution
tags: JS, Javascript, Debugging, Console
series: Better Console Driven Debugging
cover_image: https://images.unsplash.com/photo-1607472586893-edb57bdc0e39?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80
---
# So here's a weird thing.
The `console` methods have [their own C-like](https://developer.mozilla.org/en-US/docs/Web/API/console#outputting_text_to_the_console) String Substitution methods.

## Wait, String Substitution?
Literally, substituting part of a string for something else.  In Programming land, that usually means building strings via interpolation or formatting strings:
```JS
guest = {name: "Fortesque-Delcourt", calling_gift: "a rather nice sherry"}
console.log( `Sir, Mr ${guest.name} has called. He's bought ${guest.calling_gift}` );

// Output:
"Sir, Mr Fortesque-Delcourt has called.  He's bought a rather nice sherry."
```

# OK so you can add strings, so what?
You can use Template Literals, or string concatenation, but the ["_C-Like_" formatting referred to in the docs](https://developer.mozilla.org/en-US/docs/Web/API/console#outputting_text_to_the_console) say you can also use templates with placeholders, passing the replacement strings as part of the method arguments:
```JS
console.log(
    "Sir, Mr %s has called. He's bought %s", 
    guest.name, 
    guest.calling_gift
);

// Output:
"Sir, Mr Fortesque-Delcourt has called.  He's bought a rather nice sherry."
```
You're not restricted to substituting literal strings.  Instead, the templating engine tries to convert the passed object into the data type specified by the placeholder.

Let's say we have an object representing the investment losses of a Victorian gentleman:
```JS
let losses = {
	pounds: 150,
	reputation: 45.7,
	body_parts: "Teeth"
        faith: ["The Markets", "New-Fangled Steam"]
}
```
Here's what you get when you pass various types to the different placeholders:

| **Template String** | losses.body_part | losses.pounds | losses.reputation |
|---------------------|------------------|---------------|-------------------|
| "Lost: %s"          | "Lost: Teeth"    | "Lost: 150"   | "Lost: 45.7"      |
| "Lost: %i"          | "Lost: NaN"      | "Lost: 150"   | "Lost: 45"        |
| "Lost: %f"          | "Lost: NaN"      | "Lost: 150"   | "Lost: 45.7"      |

# Is this useful?  
No, not particularly.  It does let you see at a glance if you pass a String in as an Integer or Float but... That's not gonna save the world.

What _is_ useful is the Object placeholders, `%o` and `%O`.

# The Object Placeholders
If you call `console.log` while combining an Object with a String (eg `console.log("Your Object, Sir" + obj)`, you're likely to get back the stunningly unhelpful default `toString` output:
```
[object Object]
```
This is Gross... But!  If you use one of the Object placeholders, you'll get _something_ that represents an enumeration of the properties and their values.  What _kind_ of something depends on the operator, and what kind of console you're using.

## Node.js CLI
From the CLI, calling `console.log` with the uppercase `%O` operator will generate an inline enumeration.

Using the lowercase `%o` will generate a multi-line enumeration.

### Inline (with %O)
```JS
console.log("%O", losses)

//Output:
{ pounds: 150, reputation: 45.7, body_parts: 'Teeth', Faith: ['The Markets', 'New-Fangled Steam'] }
```
### Multi-Line (with %o)
```JS
console.log("%o", losses)

//Output:
{
  pounds: 150,
  reputation: 45.7,
  body_parts: 'Teeth',
  Faith: ['The Markets', 'New Fangled Steam', [length]: 2]
}
```
## Browser Console
In the Chrome console, things act sort of backwards.  Here, the lowercase "%o" operator will return an =inline= enumeration:

### Inline (with %o)
```JS
console.log("%o", losses)

// Output:
> { pounds: 150, reputation: 45.7, body_parts: 'Teeth', Faith: ['The Markets', 'New-Fangled Steam'] }
```
### Object Linking (with %O)
The cool part, however, is with `%O`.  Using the uppercase format, the output string will contain only the object's _name_... Which is clickable, taking you to the inspector to let you poke around!

Let's say our `losses` object is an instance of the `Losses` class, and it also contains some sort of `history` object.  We can create a rich, readable debugging message which gives us easy access to object internals, but doesn't clutter up the console:
```JS
console.log(
	"Your %O exceed %d pounds. See %o.", 
	losses,
	losses.pounds,
	losses.history
)

//Output:
Your >Losses exceed 150 pounds. See >History.
```
# Wrap-up
So that's the power of Console String Substitution!  Easy formatting for terse but richly informative console messages.

If you liked this, please hit the Dopamine (❤️) Switches (🦄) on the left, and subscribe to my writing for the next entry in the JS Console Debugging series!

# Recognition
Header image is by [@Sigmund](https://unsplash.com/@sigmund), used under the Unsplash License.