JADSN1894 / yew-debugger

An Elm-like debugger DevTools extension for Yew.

YewDebugger

(derive)

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

Getting Started

Cloning the repository

1. Clone the repository: git clone --depth=1 [e-mail]:JADSN1894/yew-debugger.git
2. Change to directory yew-debugger: cd yew-debugger
3. Open yew-debugger folder in VsCode: code .
4. Install the extension Dev Containers
5. Open the Dev Container

6. Install the extensions (Optional)

7. When see the "...Done. Press any ke to close the terminal." press c:

8. Open new terminal:

9. Execute: make demo
10. Execute: python3 -m http.server --directory ./dist-example/
11. In a chromium-based open extensions window: chrome://extensions/
12. At right top corner enable Developer mode

13. Click at Load unpacked button
14. Open the crx folder, (If comming from actions artifacts section, the folder name is yew-debugger-crx)
15. Click at service worker(inactive)
16. Check if show at least this two logs:
    1. [From background module]: Hello from YewDebugger
    2. Yew Debugger devtools tab clicked
17. Open in new tab: http://localhost:8000/
18. Open DevTools pressing F12 or crtl + shift + i
19. At DevTools panel tab open the tab Yew Debugger
20. And controll your application. 😎

From actions artifacts

1. Download the artifacts:
   1. yew-debugger-crx.zip
   2. dist-example-yew-debugger-counter-layout.zip
   3. dist-example-spreadsheet-cells-with-yew-debugger.zip
2. Create a folder named: yew-debugger
3. Change to directory: cd yew-debugger
4. Extract the compressed files :
   1. unzip yew-debugger-crx.zip -d crx
   2. unzip dist-example-yew-debugger-counter-layout.zip -d dist-example-yew-debugger-counter-layout
   3. unzip dist-example-spreadsheet-cells-with-yew-debugger.zip -d dist-example-spreadsheet-cells-with-yew-debugger
   4. Directory after extract

    .
    ├── dist-example-spreadsheet-cells-with-yew-debugger
    │   ├── frontend-wasm
    │   │   ├── index_bg.wasm
    │   │   ├── index.js
    │   │   └── package.json
    │   ├── index.html
    │   ├── index.js
    │   └── output.css
    ├── dist-example-spreadsheet-cells-with-yew-debugger.zip
    ├── dist-example-yew-debugger-counter-layout
    │   ├── assets
    │   │   ├── index-0c5742a5.js
    │   │   ├── index_bg-2f50b49e.wasm
    │   │   └── index-d9ca7bb5.css
    │   ├── favicon.ico
    │   ├── index.html
    │   └── vite.svg
    ├── dist-example-yew-debugger-counter-layout.zip
    ├── yew-debugger-crx
    │   ├── assets
    │   │   ├── index-643717a7.css
    │   │   ├── index-df5db1f8.js
    │   │   └── panel_bg-88b3fac6.wasm
    │   ├── background
    │   │   ├── background_bg.wasm
    │   │   ├── background.js
    │   │   └── package.json
    │   ├── background.js
    │   ├── content-script.js
    │   ├── devtools.html
    │   ├── devtools.js
    │   ├── manifest.json
    │   └── panel.html
    └── yew-debugger-crx.zip
   

   3. Follow the steps from 8 of Cloning the repository instructions

👍 Acknowledgements

Huge thanks to afsec for giving me the idea for this project, sharing the inspiration behind it, and implementing the first iteration in Rust. Your contributions have been invaluable.

📪 Contact

Feel free to reach out to me at E-mail to discuss how yew-debugger can elevate the quality of your Yew development and improve the end-user experience!