Repository files navigation

Svolte is an open source Chrome developer tool for time travel debugging and component hierarchy visualization in Svelte applications. Svolte enables developers to record snapshots of component states, visualize component props, inspect and jump between snapshots. Svolte is the first Svelte time travel debugger that is compatible with writable stores and includes a skip feature.

Developed with

Visualize the hierarchy of your Svelte app and check the props of each component.

Record the states of your components to see how each state has changed.

• Jump through each snapshot to recreate state changes.

• Have a snapshot you want to skip? Simply toggle skip to ignore that snapshot when you jump.

Download the chrome extensionhere.

This extension is only compatible with Svelte projects running indevelopment mode, so be sure to check that configuration if you are not starting up your project withnpm run dev.

Fork and clone this repository into your local machine. Once that is done, run the commandsnpm i andnpm run build to download the dependencies and build the dev tool. Finally, making sure you toggle Developer modeon in your Chrome browser, you can load unpack the extension folder (located in the root level of the repository).

After installing the Chrome extension open up your project in Chrome, and be sure your Svelte application is running indevelopment mode.

Right click your application andInspect or pressf12 to open up Chrome Dev Tools, and navigate to the Svolte panel (which may be hidden behind>> if you have too many tabs).

You are then ready to debug your Svolte application!

Harry Vu

Scott Kim

Ying-An Wang

Petros Ogbamichael

If you find Svolte to be useful please throw a 🌟 our way and share this project with your Svelte developer friends!

Svolte is developed under theMIT license.