console.log object/function properties in Chrome dev tools

Question

Logging a function/class

or a flat object/array

results in logging a string representation (with no dropdown ► icon).

Logging complex objects (with own non-scalar properties) results in having hierarchical representation:

I would prefer to have the latter behaviour for all logged objects - both things that are typed in console and things that are logged with console.log.

For this reason only Firebug console output looks much more beneficial than Chrome dev tools.

I'm aware of console.dir, though it is inefficient to type console.dir(someVar) instead of someVar in console, and it is not appropriate to replace all console.log occurrences with console.dir in existing apps.

Other console methods (console.warn, console.error) have the same problem as console.log, but they don't have console.dir counterpart for them!

Can this Chrome dev tools behaviour be changed? Is there something that can help with this problem?

As a guess - you might override the normal console object and it's functions. Personally, I won't really consider this that big of a problem to throw more than few minutes of effort into it and that seems like too much to really bother with. It might be that there is a library that replaces the vanilla console but I've not really sought one out. — VLAZ
– VLAZ, Commented Aug 31, 2016 at 22:58
FYI: You don't need to type console.dir(someVar), you can just type dir(someVar) — Rob M.
– Rob M., Commented Aug 31, 2016 at 22:59

Estus Flask · Accepted Answer · 2017-05-29 18:15:38Z

4

I would generally just use dir(myObj) if you just want something quick. i don't think it's much effort to replace your log statements.

However, you could look into Custom Object Formatters in Chrome DevTools. You need to enable this feature in the DevTools settings and then implement the window.devtoolsFormatters object with the header and (optional) body you would like.

Depending on the type of object passed in, you can provide a different formatter for each. For example, you can check if the object is an array with Array.isArray(myObj) and then you can traverse the array properties and expose and format the ones you feel are relevant as the return object for the body.

You would need to run this as a snippet each time, or create a Chrome Extension to automatically inject this when you run your application.

edited May 29, 2017 at 18:15

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

answered Sep 1, 2016 at 9:20

Gideon Pyzer

24.3k7 gold badges70 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

console.log object/function properties in Chrome dev tools

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related