Flipper: Discussion: Any plans to have the React Native Log plugin implement the Chrome Console API?

[AustP]

When I use Chrome as the debugger for my React Native app, I have access to the Chrome Console API. I tried out Flipper today and found that the React Native Log plugin is missing all of the features of Chrome's console that make logging good.

Are there any plans to make the logger behave more like Chrome's console? My main problem is the fact that when I do console.log(someObject), Flipper outputs someObject as unformatted JSON. If it is really long, it goes off the screen and there's no way to see the information without copying it and pasting it into a text editor. Chrome, on the other hand, gives us an explorable object that is very nice.

[mweststrate]

No we don't have such plans on the short term (to achieve that a full debugger connection would be necessary, rather than a read-only log stream, to be able to inspect and expand complex objects, without needing to transfer them eagerly).

As a work around, when the Hermes debugger is connected, I'd expect the console.log to have the full features inside the debugger.

[AustP]

Okay, I haven't made the jump to Hermes yet. I'm waiting for Android app bundle support before I do. Maybe someone else can confirm that workaround?

[plrdev]

This is currently holding me back from using logging from Flipper, I still open debugger to be able to see the explorable objects.

[MakhouT]

Same here

This is currently holding me back from using logging from Flipper, I still open debugger to be able to see the explorable objects.

[elkinjosetm]

Same here, and like @mweststrate said, Hermes does work. But it only apply for Android development, Hermes is not currently supported on iOS.

[elkinjosetm]

Would also be nice and could be a potential workaround to know how does React-Native initial log, which looks like objects, get rendered somehow nice by flipper

[mweststrate]

I'll be making some improvements to the logs plugin soon and will look into the multiline issue as well

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[elkinjosetm]

Any update on this?

[mweststrate]

Multiline support is being worked on, but full object inspection API isn't something we won't have the bandwidth for soon, so closing this issue for now. But if anyone wants to investigate this further let us know!

[dngconsulting]

How is it possible to close this issue ? The most important feature of a log viewer is good multi line support. Many of the objects users display are thru JSON.stringify(object). In react navigation, I trace navigation history which can be quite long. With flipper I end up by having "..." everywhere at the end of each log line. With no way to see the full log except by copy/pasting the line in a text editor. Otherwise, please provide a way to relax the max length limitation ...

[mweststrate]

@dngconsulting multiline support is currently being worked on at the moment and multiline stringifies should be fine in the future, but this issue is not related to that, it is about supporting the chrome console api which allows for remote inspection of objects that are in RN memory, which is a much more fundamental change. (n.b. the reason it takes a while is because it requires us to swap both the virtualisation technique and storage layer, but it should have been addressed in Q1)

[dngconsulting]

Thanks @mweststrate. It's really multiline support that is the main issue for now (we have to juggle between chrome and flipper, very painful), supporting Chrome console API can wait. When do you think that multiline will be ready ?

[mweststrate]

but it should have been addressed in Q1

[mweststrate]

For all clarity, multi line support was released a few releases ago. For debug protocol based inspection (a.k.a. lazily expandable objects), using console.log in combination with the Hermes Debugger plugin will do the trick.