Bug 142656 – Web Inspector: Expose a way for developer provided object previews

• Status: NEW
• Component: Web Inspector

[Joseph Pecoraro]

* SUMMARY
Expose a way for developer provided object previews.

* IDEA (nvasilyev)

The idea here is that instead of just showing the first 5 properties of an object in Object Previews, we could show more useful previews based on what the developer of the object may deem most useful to expose.

For example an object might display poorly:

  js> obj
  ▶︎ MyObject {_root: Object, __owner: undefined, __hash: undefined...}

We can provide a hook for the developers to provide better previews. For example, we could check if the object has a Symbol.preview getter in the prototype chain, and if so use that object in the prototype chain

For example:

  MyObject.prototype = {
    toJSON() { ... },
    get [Symbol.preview]() { return this.toJSON(); },
  };

Would produce:

  js> obj
  ▶︎ MyObject {x: 2, y: 42, color: "red"}


* NOTES
- "Symbol.preview" is probably bad, since that is a built-in object.
- "console.preview" is likely better, after all this is for the "console" / debugger

[Radar WebKit Bug Importer]

<rdar://problem/20149654>

[Timothy Hatcher]

Chrome seems to do this with a global map hanging off window (window.devtoolsFormatters). Yuck.

https://docs.google.com/document/d/1FTascZXT9cxfetuPRT2eXPQKXui4nWFivUnS_335T3U/preview

[Salam]

Hi,

Now that both Google Chrome[1] and Mozilla Firefox[2] implemented this feature, is it possible for WebKit/Safari to do the same so that developers (myself included) who use Safari as their primary browser for development can benefit from it as well? The community of developers that can benefit from this feature seem not so insignificant as evidenced by the backlash when the Google Chrome team made an announcement of removing this feature from Google Chrome[3].

Thanks.

[1] https://docs.google.com/document/d/1FTascZXT9cxfetuPRT2eXPQKXui4nWFivUnS_335T3U/
[2] https://fxdx.dev/firefox-devtools-custom-object-formatters/
[3] https://twitter.com/ChromeDevTools/status/1263421789671239681