Sveltool parses your webpage and extracts the components, as well as their associated state and props.
The tool then displays your component structure in an easy-to-understand, tree-like visualization powered by the D3.js libray.
This allows you to view the hierarchical structure of your webpage and easily find the state and props of any component.
Sveltool is in the process of being added to the Chrome Web Store. At that point, downloading Sveltool will automatically integrate it into your Chrome DevTools.
In the meantime, you can fork and clone this repository. From there open Sveltool in your IDE in the terminal run
cd [Sveltool/name of directory]then run:
npm install
npm run buildAfter you run build, navigate to the Google Chrome Extensions page in your browser, turn developer mode on, and click “Load Unpacked” (in the top left). Go to the Sveltool file and upload the “build” folder into Chrome Extensions. When your Svelte app is open right click and go to “inspect”, where you will see the option to open Sveltool!
If your components are still not displaying make sure your application is in “dev mode”. This can be configured in your root component or in your Webpack/Vite config files.
If you're having trouble seeing Sveltool in the browser, double check that you have uploaded the “build” folder when clicking “Load Unpacked”.
If your components aren't displaying within the tool, simply refresh the page.
If none of these helped your problem, open an issue with us on our GitHub page!
Sveltool is currently in alpha, we would love to hear your feedback, encouragement, advice, suggestions, or problems! If you would like to contribute please contact us at info@sveltool.com
-
Developer settings: Customize settings to meet needs based on project
-
Cache Snapshots of previous state: As users interact with site, Sveltool will cache snapshots of previous states
-
Rank components by render-time: Optimize application by tracking component render-time
-
Time Travel debugging: Navigate backwards and forwards between previous and current state
Check out our website here
Read our latest blog here
Follow us on Twitter @Sveltool
Contact us info@sveltool.com
- Daniel Aurand • LinkedIn • Github
- Jessica Davila• LinkedIn • Github
- Micheal Grant • LinkedIn • Github
- Adepeju Orefejo• LinkedIn • Github
- Meow Puttamadilok• LinkedIn • Github
MIT