Cool Console stuff: Easy object inspection

So here’s a weird thing.

The console methods have their own C-like String Substitution methods.

Wait, String Substitution?

Literally, substituting part of a string for something else. In Programming land, that usually means buil…

So here’s a weird thing.

The console methods have their own C-like 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:

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?

The Console methods let you use a unique (“C-Like” formatting)[https://developer.mozilla.org/en-US/docs/Web/API/console#outputting_text_to_the_console]. You can use Template Literals, or string concatenation, but you can also use templates with placeholders, passing the replacement strings as part of the method arguments:

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:

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 on an Object, you’re likely to get back the stunningly unhelpful default toString output:

Assertion failed: [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)

console.log("%O", losses)

//Output:
{ pounds: 150, reputation: 45.7, body_parts: 'Teeth', Faith: ['The Markets', 'New-Fangled Steam'] }

Multi-Line (with %o)

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)

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:

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.


Print Share Comment Cite Upload Translate
APA
Dylan Lacey | Sciencx (2024-03-29T01:13:52+00:00) » Cool Console stuff: Easy object inspection. Retrieved from https://www.scien.cx/2022/04/06/cool-console-stuff-easy-object-inspection/.
MLA
" » Cool Console stuff: Easy object inspection." Dylan Lacey | Sciencx - Wednesday April 6, 2022, https://www.scien.cx/2022/04/06/cool-console-stuff-easy-object-inspection/
HARVARD
Dylan Lacey | Sciencx Wednesday April 6, 2022 » Cool Console stuff: Easy object inspection., viewed 2024-03-29T01:13:52+00:00,<https://www.scien.cx/2022/04/06/cool-console-stuff-easy-object-inspection/>
VANCOUVER
Dylan Lacey | Sciencx - » Cool Console stuff: Easy object inspection. [Internet]. [Accessed 2024-03-29T01:13:52+00:00]. Available from: https://www.scien.cx/2022/04/06/cool-console-stuff-easy-object-inspection/
CHICAGO
" » Cool Console stuff: Easy object inspection." Dylan Lacey | Sciencx - Accessed 2024-03-29T01:13:52+00:00. https://www.scien.cx/2022/04/06/cool-console-stuff-easy-object-inspection/
IEEE
" » Cool Console stuff: Easy object inspection." Dylan Lacey | Sciencx [Online]. Available: https://www.scien.cx/2022/04/06/cool-console-stuff-easy-object-inspection/. [Accessed: 2024-03-29T01:13:52+00:00]
rf:citation
» Cool Console stuff: Easy object inspection | Dylan Lacey | Sciencx | https://www.scien.cx/2022/04/06/cool-console-stuff-easy-object-inspection/ | 2024-03-29T01:13:52+00:00
https://github.com/addpipe/simple-recorderjs-demo