Click here to Skip to main content
15,506,023 members
Articles / Web Development
Tip/Trick
Posted 12 Aug 2019

Stats

5.7K views
1 bookmarked

Console.log Object Display

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
14 Aug 2019CPOL2 min read
Object inspection with %O in the console output

Introduction

When I am slugging away in some JavaScript or web app or whatever, I am sure I am like a large number of people and throw/sprinkle console.log into the code so I can see the various stages, or what function is receiving or what a function is away to return, etc. and can follow what is going on in the console as I am clicking away or doing whatever I am writing/testing.

How many times have you seen in the output [object Object] appear, and you are like AAARGHH!

You then go and spend time messing around with stringify or other code to make it readable.

Well, I ONLY found out yesterday, and that probably the whole world knows and I maybe missed the memo, but.........

Using the Code

.....if you change the console.log statement to look something like:

console.log("Result is: %O", theObject) where you guessed it, theObject is the thing you want to see, and note that it is a %O for Object not a 0 (zero).

As an example, if I open up Chrome DevTools and go to the console and enter: (I picked at random one of the inbuilt objects, try it with some others.)

C#
console.log(ImageCapture)

Image 1

You are returned with some text and reference to native code and not a lot you can inspect.

However, if I put in:

C#
console.log("Image Capture: %O", ImageCapture)

You can see, I can now start drilling down into the ImageCapture object:

Image 2

So, before you start sprinkling your code with extra stuff to see what's in an object, maybe take %O for a spin!

Update 14-Aug-2019: I went looking at the Mozilla specifications for console, and there is actually a specific method for doing this, dir().

So, if you were to do console.dir(ImageCapture), you would get the drill down view of the object. See, every day is a school day!

For more information on the console specification from Mozilla, and the numerous other methods that can be applied, visit this link.

Points of Interest

Every day is a school day!

History

  • 14th August, 2019 - Updated with dir() info and Mozilla link
  • 13th August, 2019 - First published

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Engineer
Scotland Scotland
I have been working in the Oil & Gas Industry for over 30 years now.

Core Discipline is Instrumentation and Control Systems.

Completed Bsc Honours Degree (B29 in Computing) with the Open University in 2012.

Currently, Offshore Installation Manager in the Al Shaheen oil field, which is located off the coast of Qatar. Prior to this, 25 years of North Sea Oil & Gas experience.

Comments and Discussions

 
QuestionYou're a legend! Pin
Member 1453048015-Aug-19 13:09
Member 1453048015-Aug-19 13:09 
Questiongreat tip Pin
Sacha Barber14-Aug-19 2:34
Sacha Barber14-Aug-19 2:34 
AnswerRe: great tip Pin
DaveAuld14-Aug-19 3:56
professionalDaveAuld14-Aug-19 3:56 
Answerthere's more simple way to show object with text Pin
Debashis 1043365614-Aug-19 1:50
Debashis 1043365614-Aug-19 1:50 
GeneralRe: there's more simple way to show object with text Pin
DaveAuld14-Aug-19 3:51
professionalDaveAuld14-Aug-19 3:51 
You have lost me with your comment.........I showed that example in the text, but it does allow drilldown of the object.

This may be tooling dependent, and what I have put above relates to Chrome, other browser dev tools or console debuggers may produce different outputs.
Dave
Find Me On:Web|Youtube|Facebook|Twitter|LinkedIn
Folding Stats: Team CodeProject

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.