[DevTools Bug]: Use console custom formatters

[sroussey]

Website or app

https://ellmers-web.netlify.app/

Repro steps

Quick background: I was one of the Firebug developers back in the day, and I used JS frameworks and hated that the console and the entire debugging UI always showed things in a lower level of abstraction than the user was dealing with. So in 2011, I created the first extension to Firebug to put extra panels in the devtools like your Components tab does now (it supported ExtJS, Backbone, YUI, Ember, Angular, etc).

One of the hooks I put in, was to not just let devs like you add panels, but also update the look of the objects themselves. So if you logged a ExtJS component, you saw what looked like an ExtJS component. 14 years later, you log some react stuff and it looks like goobligook.

I begged Paul Irish and Chrome devs to put it in, and they did, though you need to activate it in the settings panel. Firefox followed with their own using the Chrome api, though I think their docs for it are better.

Creating your own formatters is far better than the console.group thing you do now which requires going to the Components panel first.

If you are curious how they work, you can go here: https://ellmers-web.netlify.app/ open the console and follow instructions. But this is what it looks like:

Unfortunately, it only works in the console, where back in the day I had it working in the debugger as well where knowing what is what is actually more useful.

Thanks for taking the time to read this feature request.

PS: I have my own, though it would not have your distribution. When I tried, I could make the console objects get nice names and even mark with [memo] and show properties, but I don't know how to navigate the internals to get the other stuff that is shown in the Components tab like hooks and renderedBy.

Here is what it looks like with custom formatters off:

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)