Sveltechron

About me

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.

Features

• Component hierarchy visualization
• State and Props Display

Component hierarchy visualization

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.

State and Props Display

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.

How to use Sveltechron

1. Fork and clone this repo.
2. Go to the projects root directory and execute npm install in the CLI.
3. Execute npm run build in the CLI.
4. Unload the dist folder in the Chrome extension manager page.
5. Inspect the browser window when running your Svelte application in development mode and navigate to Sveltechron in the dev panel.

(Chrome extension coming soon!)

How to use the demo app

1. Navigate to demo-app folder.
2. Execute npm install in the CLI.
3. Execute npm run dev in the CLI.

Authors

jayachandra Kura

Kevin Wong

Sean Romine

Will Pratt

License

Distributed under the MIT License. See LICENSE.txt for more information.