refine Devtools RFC

[omeraplak]

Hey refiners 👋

Providing you with the best developer experience has always been the greatest source of motivation in our journey 💥

We are extremely excited to announce that we have started working on refine's Devtools, which will include many features to simplify your development process.

refine has grown a large and passionate community 🏆 We always listen to the community's feedback to continue refining refine, and we need your help. Remember, every voice counts! 👊

To give you an idea of the features we want to add to the refine Devtools:

• Inspector/Monitor for data hooks and their details
• Authentication and Authorization screens, showing the current status, previous calls, and provider details.
• Live Update monitor/inspector
• Router inference screen, displaying the current router status, params, resource, etc.
• <Refine> configuration, provided options, and providers.
• And your idea! 🎯

We want to make this process more fun. If your suggested feature is added to the Devtools, we will credit your name/signature, immortalizing your contribution! ✍️

Anyone who proposes a feature idea will be granted early access to the Devtools! 🔓

You can share your ideas in the comments or in Discord Server 📢

Let's make this Devtool together and take refine to new heights! 🕶

[mateusabelli]

Hello there, I think that it would be cool if we could interact with the generated code by inferencer, have some buttons and fields to do a few fine tweaks on some of the core properties of the hooks and components.

I also feel like the generated code could be better displayed inside the Devtools instead of the current popup window.

[omeraplak]

Great ideas, thanks! ⚡️

[BatuhanW]

Hello @mateusabelli, thanks for the suggestions, we'll review and see what we can do. You can apply for beta version from here: https://s.refine.dev/devtools, looking forward to your initial impression!

[dipbazz]

Hey @omeraplak,

I am happy to see refine growing and becoming more mature daily. I would love to see a components traceback on refine dev tools if you guys think it is something that should be implemented. So, what I mean by component trackback is that where user should be able to view:

• Which components are responsible for generating the current page they are on.
• Which component re-mounted how many times, based on state change.
• If possible refine dev tools should suggest an optimization technique on components.

[omeraplak]

Thank you very much for the ideas, we are evaluating all of them. With dom-select, you will be able to see which component called which hooks. I think you will love this feature. I will let you know when it's ready for you to try

[BatuhanW]

Hello Dipesh, you can apply for Devtools beta now! https://s.refine.dev/devtools

We'll release new features on coming weeks. 🎉

[Susmita-Dey]

Hey, you'll have done a great job. The devtools are great

[omeraplak]

Thank you so much! 🌟 Thrilled to hear you're enjoying the devtools. Your feedback keeps us motivated!

[BatuhanW]

Hey @Susmita-Dey you can apply for beta now! Check the link: https://s.refine.dev/devtools

[w20k]

Hey @omeraplak, and a refine.dev team!

Thanks for an awesome product! I haven't dived into the devtools yet and have mostly been tinkering with refine on my own. But, just for laughs, I've joked about letting the whole team go and just keeping one person on board to use refine for the admin panel, and being no track with every task that they currently have 😄.

Few crazy ideas:

• Introduce a feature that lets you re-run a specific query/event for a particular rendering. Say, for instance, a faulty query messed up all the components and you want to test it again. Implementing this might be challenging, but it essentially follows the Redux principle with a rewind feature.
• Include a checkbox or feature to attempt adding a component lazily (probably would be only possible for the core elemtns).
• Offer an option to delay or throttle requests so you can see how your app/UI responds (same as in chrome, but still would be useful). Also, as a part of the same option, you would be able to experiment with different UI rendering options, like Mutation Modes (optimistic and etc).
• Add a checkbox to highlight components that get re-rendered.

Taking it up a notch:

• Incorporate an animation for queries, displaying an overlay over the specific component that shows the request duration, the number of requests (if there was dev query), and a summary of successful/failure statuses.
• Introduce an in-app documentation pop-up or an intelligent guide that offers hints and quick access to a local copy of documentation for specific combinations (like antd + refine.dev + strapi -> would be great if it could detect your setup also) or comprehensive documentation.

[omeraplak]

Hey @w20k, Thank you for your interest and feedback. We will review and contact you if necessary 🎯