DevTools extension

[teymour-aldridge]

Is your feature request related to a problem? Please describe. React has a browser extension which allows you to debug React applications called React DevTools which integrates into React's DevTools.

Describe the solution you'd like I'd like to be able to install a browser extension and use it to debug applications.

• See a component tree
• See a timeline of updates to different components
• See a timeline of agent calls

Describe alternatives you've considered

• Manual debugging with prinln!() calls (definitely not nearly as fun!).

Additional context I'm currently working on implementing this.

[JADSN1894]

Hello everyone, I encountered the same issue and would like to offer a suggestion.

https://github.com/JADSN1894/yew-debugger

Description

yew-debugger is a devtools extension for debugging Yew applications that includes the following features:

• It is built upon the minimally invasive implementation of only three traits: YewComponentModel, YewComponentMessage, and YewComponentDebug.
• It offers a detailed view of messages and changes in the Model during state transitions.
• It provides a real-time, straight-forward view of the application's MVU (Model, View, Update) cycles.

Screenshot

[ranile]

@JADSN1894 how well does it work with function components?