142656 2015-03-12 23:44:04 -0700 Web Inspector: Expose a way for developer provided object previews 2026-01-12 09:08:23 -0800 1 1 1 Unclassified WebKit Web Inspector 528+ (Nightly build) All All NEW InRadar P2 Normal --- 1 joepeck joepeck 0.cynics-squints graouts inspector-bugzilla-changes jonowells webkit-bug-importer ysuzuki oldest_to_newest 1076870 0 joepeck 2015-03-12 23:44:04 -0700 * 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 1076871 1 webkit-bug-importer 2015-03-12 23:44:42 -0700 <rdar://problem/20149654> 1180952 2 timothy 2016-04-05 13:36:14 -0700 Chrome seems to do this with a global map hanging off window (window.devtoolsFormatters). Yuck. https://docs.google.com/document/d/1FTascZXT9cxfetuPRT2eXPQKXui4nWFivUnS_335T3U/preview 1972250 3 0.cynics-squints 2023-08-19 13:05:22 -0700 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