A Chrome DevTool that enables Svelte developers to visualize their Svelte application's structure while quickly understanding the state and prop changes in real time.
- Component hierarchy visualization
- State and Props Display
Sveltechron creates a tree structure of the application's component hierarchy, allowing for a greater understanding of the structure of the application. Which is incredibly useful when digging through a larger-scale application containing a large amount of components.
When inspecting one of the components nodes in Sveltechron, users are also able to view the state and props are held in the selected component. this allows for an easy understanding of the data flow of the users application.
- Fork and clone this repo.
- Go to the projects root directory and execute npm install in the CLI.
- Execute npm run build in the CLI.
- Unload the dist folder in the Chrome extension manager page.
- Inspect the browser window when running your Svelte application in development mode and navigate to Sveltechron in the dev panel.
(Chrome extension coming soon!)
- Navigate to demo-app folder.
- Execute npm install in the CLI.
- Execute npm run dev in the CLI.
Distributed under the MIT License. See LICENSE.txt for more information.