1 unstable release
0.0.1 | Oct 19, 2023 |
---|
#31 in #dev-tools
4KB
50 lines
YewDebugger
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
, andYewComponentDebug
. - 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
- Clone the repository:
git clone --depth=1 git@github.com:JADSN1894/yew-debugger.git
- Change to directory
yew-debugger
:cd yew-debugger
- Open yew-debugger folder in VsCode:
code .
- Install the extension Dev Containers
- Open the Dev Container
- Install the extensions (Optional)
- When see the "...Done. Press any ke to close the terminal." press
c
:
- Open new terminal:
- Execute:
make demo
- Execute:
python3 -m http.server --directory ./dist-example/
- In a chromium-based open extensions window:
chrome://extensions/
- At right top corner enable Developer mode
- Click at
Load unpacked
button - Open the
crx
folder, (If comming from actions artifacts section, the folder name isyew-debugger-crx
) - Click at
service worker(inactive)
- Check if show at least this two logs:
- [From background module]: Hello from YewDebugger
- Yew Debugger devtools tab clicked
- Open in new tab:
http://localhost:8000/
- Open DevTools pressing
F12
orcrtl + shift + i
- At DevTools panel tab open the tab
Yew Debugger
- And controll your application. 😎
From actions artifacts
- Download the artifacts:
yew-debugger-crx.zip
dist-example-yew-debugger-counter-layout.zip
dist-example-spreadsheet-cells-with-yew-debugger.zip
- Create a folder named: yew-debugger
- Change to directory:
cd yew-debugger
- Extract the compressed files :
unzip yew-debugger-crx.zip -d crx
unzip dist-example-yew-debugger-counter-layout.zip -d dist-example-yew-debugger-counter-layout
unzip dist-example-spreadsheet-cells-with-yew-debugger.zip -d dist-example-spreadsheet-cells-with-yew-debugger
- 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
- 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!
Dependencies
~8–10MB
~190K SLoC