dev tools

[jkelleyrtp]

Specific Demand

Dioxus core now absorbs function names, tracks memory consumption, and knows why a component re-renders. All of this instrumentation should be available to the developer.

Implement Suggestion

Either

1. a custom browser extension with configuration
2. integration with the dioxus-cli in the form of a TUI (any app launched with the Dioxus CLI can be debugged repl-ish)

I am leaning towards 2) with some ideas on:

• piping browser logs into the TUI (as an alternative to wasmlogger) with filtering support (per-component, handler, task, module)
• viewing the mutation lists of the dom to debug core
• viewing raw events and async scheduling
• viewing time-to-diff and time-to-apply
• two-way binding of certain text/element nodes
• force updating components
• tracing spans
• task/coroutine/future control/debugging
• hot-reloading of CSS/rsx
• other fun debugging tools

I would love to get ideas from the community on other features they would enjoy using to debug their apps.

[autarch]

• piping browser logs into the TUI (as an alternative to wasmlogger) with filtering support (per-component, handler, task, module)

This sounds great. The current level of logging control that wasm_logger provides is pretty minimal, and it makes leaving logging in your app a hassle. I generally end up having to comment out lots of existing logging to make the output usable for a specific task.

Another thing might be really nice is the ability to inject events. For example, spawning a future that fetches something from the backend and updates the app's state. I think for this to work you'd have to instrument your app with appropriate hooks, though.

It might be helpful to be able to hot add/remove logging for things like onX handlers, to answer questions like "is this event even being triggered".

[mrxiaozhuox]

how about provide a web-console for desktop & web app ?

[itsezc]

I'm a huge fan of Nuxt's dev tools, I'd love to see something like that for Dioxus (and Tokamak) but for that it could be integrated into Dioxus CLI and available on dev builds, or alternatively be a browser extension like how some JS frameworks ship.