Chrome's Custom Formatters

[roman01la]

Do you want to request a feature or report a bug?
Feature

Transferring feature request from the old repo facebook/react-devtools#989

Hi! Is there any plans on supporting Chrome's custom formatters to display custom data structures in readable format in React dev tools?

For example when debugging ClojureScript's immutable data structures we have a custom formatter that outputs data into the console in readable and inspectable format.

Here how it looks like

And here's how data looks like in React Dev Tools inspector (basically underlying implementation of a data structure as seen in plain JS)

I think this can be done for React Dev Tools since once Custom Formatters are defined they are applied everywhere in Chrome's Dev Tools where it's possible to inspect data.

[bvaughn]

Hi! Is there any plans on supporting Chrome's custom formatters to display custom data structures in readable format in React dev tools?

Still no plan to do this on our end. I think my comment from January would still be relevant:

My initial thoughts:

• This seems interesting and like it could help with inspecting certain data types.
• We probably won't want to invest time or effort into this for the current version of DevTools– but perhaps the rewrite I've recently started (since that will already be pulling props lazily from the backend).
• DevTools needs to support Firefox too, and it looks like Firefox doesn't support this. (Related issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1262914) So any integration would need to gracefully degrade.

I'd be interested in seeing a proof of concept 😄 but maybe not for a few weeks?

[gaearon]

I think we’d consider a pull request though. If you’re interested.

[roman01la]

@gaearon Yes sure. Is there any guidelines on the new architecture of the dev tools? Trying to understand where to start looking at that.

[gaearon]

https://github.com/bvaughn/react-devtools-experimental/blob/source/OVERVIEW.md

We’re also in the process of moving the code to React repo but haven’t managed yet.

[bvaughn]

We’re also in the process of moving the code to React repo

That PR is #16381

[orestis]

I saw that there was a similar issue about immutable.js that was fixed here: #16424 - it seems though the root cause was different.

I was wondering if we could do something from ClojureScript’s side to follow the code path used for immutable JS, eg we could provide a “render” function that would return a proper JS object at inspection time.

[darwin]

I just want to add that there is currently a workaround via "Store as global variable". This delegates value to Chrome DevTools which causes the value to be re-rendered with custom formatters applied (if enabled).

But I agree that this is doable and would be a great improvement in React Devtools not only for ClojureScript developers - but anyone who relies on custom formatters for debugging (e.g. Immutable.js).

My original comment still holds. A rewrite of JsonML renderer from Chrome DevTools is not that difficult IMO. The hairy part is to manage styles to achieve the same look. The HTML code generated by custom formatters relies heavily on ambient CSS present in Chrome DevTools Console (at least in case of cljs-devtools). React DevTools would have to try to emulate it and properly sandbox custom formatted html code and firewall those styles not to bleed into surrounding React DevTools UI.