Chrome DevTools Extension for Loader and Action data

[moishinetzer]

It would be a MASSIVE productivity helper if we had an extension similar to react or redux chrometools that would let us see the actionData or loaderData being sent in to fetchers / loaders....

Is this something that might be developed in the future?

[kiliman]

I believe @sergiodxa is working on one.

Also @chris-kruining has his introspection library https://github.com/chris-kruining/epiphany

[chris-kruining]

I have 0 experience with making chrome extensions, but I have scowered through the codebase of the react devtools, and as far as I can see this should be a piece of cake to create using epiphany. this is because epiphany is more or less just a method of communication to the inspected page over postmesssage, and some filtering of react's fiber data.

[moishinetzer]

@sergiodxa What happened to this in the end?

[sergiodxa]

I published the code on GitHub and someone published it to npm, there's also remix-development-tools by @AlemTuzlak that does more things I think.

[AlemTuzlak]

@sergiodxa thanks for the shout-out, I was inspired by your package and added some more stuff on top of it, actively adding new stuff too.

[AlemTuzlak]

@moishinetzer is this something that could work for you:
https://www.npmjs.com/package/remix-development-tools
It shows you all outbound and incoming data from loaders,actions and fetchers

[BryceBlankinship]

great tool, do you think you can add a flamegraph for each line in a loader/action so I can see how my latencies add up... unless you know of a way to preview that in chrome

[AlemTuzlak]

@BryceBlankinship I'll try to get to that point, working on some performance measures but will see how deep i can go