Bug 142656 - Web Inspector: Expose a way for developer provided object previews
Summary: Web Inspector: Expose a way for developer provided object previews
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Joseph Pecoraro
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-03-12 23:44 PDT by Joseph Pecoraro
Modified: 2023-08-19 13:05 PDT (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Joseph Pecoraro 2015-03-12 23:44:04 PDT
* 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
Comment 1 Radar WebKit Bug Importer 2015-03-12 23:44:42 PDT
<rdar://problem/20149654>
Comment 2 Timothy Hatcher 2016-04-05 13:36:14 PDT
Chrome seems to do this with a global map hanging off window (window.devtoolsFormatters). Yuck.

https://docs.google.com/document/d/1FTascZXT9cxfetuPRT2eXPQKXui4nWFivUnS_335T3U/preview
Comment 3 Salam 2023-08-19 13:05:22 PDT
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