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

#!/JoePea joe at trusktr.io
Wed Jan 9 21:31:51 UTC 2019


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?
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20190109/893aaeee/attachment-0001.html>


More information about the es-discuss mailing list