Jan 20, 2022
Time Travel Debugging in Svelte with DeLorean
Why Svelte?
If you’re already familiar with Svelte, feel free to skip to the next section. If you’re not, here’s a primer on why you should be.
Svelte is a front-end JavaScript framework-like compiler that approaches conditional rendering differently than the most common frameworks today. Where React gains its advantage over full-page refreshes from its virtual DOM, Svelte does away with the virtual DOM altogether by dividing the actual DOM into small, updatable fragments. This means that there is no diffing algorithm between the real DOM and the virtual — any changing variables that Svelte is watching simply cause their corresponding DOM fragments to re-render. These updates are so surgical that the net effect is more performant than using a virtual DOM without the overhead code of a virtual DOM library and its diffing algorithm.
Svelte also natively offers more flexibility and fewer opinions for state management than most front-end frameworks. It allows developers to update and pass stateful variables as props, save state in a central subscribable store, and to change stateful variables from within child components, without passing down a method to set state. This combination of two-way data flow, central storage, and top-down data-flow paradigms can get very confusing without imposing guardrails.
Why DeLorean?
DeLorean is here to help with understanding how data changes within your Svelte application over time. DeLorean is un-opinionated — it doesn’t care how you manage your state, it just makes keeping track of those changes easier. This can help you debug by allowing you to travel back into the history of your application’s state and see exactly how your app updated as changes were made. That ability to freeze state changes as they occur — and step through their processes moment-by-moment — allows you to see the exact sequence of stateful updates, helping to clarify data flow and timing as you test your application.
Features
Application state changes display
All stateful data is easily accessible from within DeLorean’s Chrome Developer Tools panel. The name of each component and the names of all variables that each component contains, alongside their values, are displayed.
As you make changes to your app, each component’s state at the time of the state change is stored in a snapshot and cached. These snapshots are then displayed in the Dev Tools panel, and also allow for the next feature:
Time-travel through snapshots
In addition to displaying component and variable information, DeLorean resets your application’s state to the values it contained at any point since DeLorean was connected to your application. This allows for step-by-step examination of state change sequences within an application, easing the challenge of tracking state changes over time and reducing the need to use console.log.
Create new timelines
As DeLorean renders an app in its previous state, a user may want to interact with the application in a different way than before. Apps remain fully functional while being tested with DeLorean, so any changes the user makes will simply create a new timeline that is now tracked in the Dev Tools panel.
How to Install DeLorean
To install DeLorean simply navigate to the DeLorean GitHub page. If you’re interested in learning more about how DeLorean works, feel free to fork and clone the repo! Otherwise, just download the chrome_extension folder and save it somewhere on your computer.
Then navigate to Chrome’s extensions page. Ensure you are in developer mode by clicking the ‘Developer Mode’ switch in the top-right corner of the page. Click on ‘Load Unpacked’, and select the chrome_extension folder downloaded earlier. Open up your Dev Tools panel, and check to make sure DeLorean is available in the dropdown menu of the navbar as a panel!
How to Use DeLorean
Click Connect
Once your app is up and running, open the Dev Tools and select DeLorean from the dropdown in the navbar. Then click the connect button, and you should see your application’s initial state loaded in the panel.
Make some state changes, then click the state buttons
Have fun! DeLorean tracks every stateful update and reflects it in real time in the Dev Tools panel. If you click on the state buttons that appear in the Dev Tool panel, you will see your application’s state at that moment reflected in the application, as well as each component’s variables with their names and values displayed in the devtool.
Changing state after clicking on a previous state button will lead to the creation of a new memory stack. This erases the old changes made to your application’s state and allows you to explore a different sequence of state changes on your application, without needing to refresh or restart your application.
Note:
DeLorean requires some prerequisites in order to run properly. For one, you must be running your application in dev mode. Svelte code compiled in dev mode contains certain emitters that are vital to DeLorean’s processing.
Second, you must run your app on a localhost port. DeLorean’s permissions are scoped to only allow access to these ports.
Third, your Svelte application must be appended to the DOM via an element with the id “root”. This is how DeLorean discovers and interacts with your Svelte application.
Bright Future
We have many plans to make the DeLorean experience even better.
We envision a DeLorean app with more interactivity within the dev tool panel. Beyond clicking state buttons to see different moments in your app’s history, we’d like users to be able to seamlessly glide between states with a drag-and-drop slider. Eventually, as users travel back in time and make state changes, DeLorean should also allow for branching timelines to compare and contrast state changes at crucial decision points. And users should be able to ignore state updates to variables they don’t want to track — things like scroll height, or ticks from a repetitive source.
As far as the setup experience goes, we’d like to make getting started with DeLorean even simpler. Removing the need to append the Svelte app to the DOM via a specific element id is a high priority for us.
How to Contribute
DeLorean is an open-source product in active development, and we’d love to hear your ideas for improvements! The product is on GitHub and maintained by OS Labs, an open-source tech accelerator. Feel free to reach out with issues or feature ideas, or fork the repo and submit pull requests with bug fixes.
Thanks!
We appreciate your time and hope that DeLorean makes developing Svelte apps even simpler for you.
For more info, check out our website!
Get in touch with the DeLorean team:
Albert Han — GitHub | LinkedIn
Aram Krakirian — GitHub | LinkedIn
Trevor Leung — GitHub | LinkedIn
