If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

Display more informative output when console.logging objects




Developer Tools: Console
2 years ago
a year ago


(Reporter: sole, Unassigned)




Firefox Tracking Flags

(firefox42 affected)


(Whiteboard: [DevRel:P3])

I'm doing some Three.js work and it uses lots of Vector3, Box, Mesh, etc objects. The output from console.log could be way more helpful and save me loads of time if a few things were changed.

E.g. if I console.log(box), the output in the console is:

Object { min: Object, max: Object }

Then I have to click on each "Object" value to see the values on the right hand side panel.

This is a) very counterintuitive and not obvious (there's no hint that I can click on the 'Object') b) slow and cumbersome

A better output would be:

THREE.Box3 { min: { x: 1, y: 3, z: 4}, max: { x: 3, y: 30, z: 5} }

For reference, Chrome does something half-way. It logs THREE.Box3 with a triangle to unfold the full contents of the box (but using the triangle is cumbersome for small amounts of data).

So what I'm asking for is for the console to:

- show the constructor name if available, not just "Object"
- show the values of properties of objects (for reasonable numbers of properties)

Victor says that "what if there are many properties". My answer would be: ellipsise! For the most common use cases this would be an incredible amount of time saved not clicking on objects to unfold, and time saved is developer happiness.
Whiteboard: [DevRel:P3]
We are working towards inline object expansion in the console in Bug 1243802 which might make expanding feel less 'heavyweight' in the UI, and also change the implementation plan for including more properties.
Depends on: 1243802
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.