CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-devtoolsconsole.log
Estus Flask
Estus Flask

Reputation: 222309

console.log object/function properties in Chrome dev tools

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?

Upvotes: 2

Views: 3304

Answers (1)

Gideon Pyzer
Gideon Pyzer

Reputation: 23958

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.

Upvotes: 4

Related Questions