Giter Club home page Giter Club logo

svolte's Introduction

Svolte banner

Overview

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

Svelte Typescript D3.js Tailwind CSS Vite Google Chrome

Features

Component Hierarchy and Props Visualization

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

tree demo gif

Record and Inspect Component State Snapshots

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

state inspection gif

Jumping and Skipping

  • 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.

time travel gif

Getting Started

Download from the Chrome Store

Download the chrome extension here.

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

Manual Installation for Developers

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

How to Use

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

Right click your application and Inspect or press f12 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!

open dev gif

The Svolte Team


Harry Vu
LinkedIn Icon GitHub Icon

Scott Kim
LinkedIn Icon GitHub Icon

Ying-An Wang
LinkedIn Icon GitHub Icon

Petros Ogbamichael
LinkedIn Icon GitHub Icon

Support

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

License

Svolte is developed under the MIT license.

svolte's People

Contributors

boilerpot avatar petroso123 avatar skottcim avatar yingan-wang01 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.