How to prettify output of objects in the console, when using get/set, like browsers do?

Jordan Harband ljharb at gmail.com
Wed Jan 9 21:59:59 UTC 2019


`console` isn't part of the language; node and browsers have their own
implementations (which is likely covered by an HTML spec), so you'd want to
look into it there.

node's `util.inspect`, for example, provides a `util.inspect.custom` symbol
that's invoked to get a custom string version of the object:
https://nodejs.org/api/util.html#util_util_inspect_custom

On Wed, Jan 9, 2019 at 1:32 PM #!/JoePea <joe at trusktr.io> wrote:

> Here's some nice output in the console in Chrome, for `DOMPoint` and
> `DOMPointReadOnly` classes:
>
> ```js
> const point = new DOMPoint(1,2,3,4)
> console.log(point)
> ```
>
> output:
>
> ```
> > DOMPoint {x: 1, y: 2, z: 3, w: 4}
> ```
>
> ([codepen example](https://codepen.io/anon/pen/xmaVej), open the devtools
> console then re-run the example to see the "nice" output)
>
> However if I use the my polyfill [here](
> https://github.com/trusktr/geometry-interfaces/blob/master/src/DOMPoint.js),
> then the output is not as helpful:
>
> ```js
> const point = new DOMPoint(1,2,3,4) // uses polyfill
> console.log(point)
> ```
>
> output (notice, it does not show the x,y,z,w values):
>
> ```
> > DOMPoint {}
> ```
>
> ([codepen example](https://codepen.io/anon/pen/QzVNeE), open the devtools
> console then re-run the example to see the expected output)
>
> When I expand the object in the console, I can see the getters, marked
> with `(...)`, and I can click on them to trigger them, but the output is
> limited and does not show the x,y,z,w values like the native one does.
>
> Is it possible to make the output nice with the polyfill? Or does the
> engine have internal mechanisms that we don't get to use in plain
> JavaScript?
> _______________________________________________
> es-discuss mailing list
> es-discuss at mozilla.org
> https://mail.mozilla.org/listinfo/es-discuss
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20190109/abc43cd4/attachment.html>


More information about the es-discuss mailing list