Svelte Slicer
Svelte Slicer: Comprehensive Time Travel Debugging in Svelte
You’ve probably heard of Svelte by now, one of the newest front-end frameworks which allows for faster development of reactive web applications. It accomplishes this through its component compiler, which serves a small bundle of pure vanilla JavaScript to your browser. Created by Rich Harris, it is a component framework similar to its predecessors React and Vue. However, Svelte is meant to be more powerful and easier to code, thanks to its ready-made imperative code, which can be explored with the provided playground on its website.
Svelte was top-ranked in the 2020 State of JavaScript survey for developer satisfaction, and shows great promise in other comparisons on a number of metrics including bundle size, brevity of code, and Chrome Lighthouse measures of performance. While its popularity is rising, one frequent critique of the framework is that its ecosystem and community are smaller and less developed than more established technologies.
Introducing Svelte Slicer
Svelte Slicer is intended to help diversify the current Svelte ecosystem, improve the developer experience, and encourage further adoption of this up-and-coming technology.
Simply put, Svelte Slicer is a feature-packed Chrome Developer Tool intended to aid developers in debugging Svelte applications. It offers a practical and intuitive option for the inspection of current and past state, and for visualization of variables and component hierarchy.
Features
Component Visualization
A graphical representation of the component hierarchy can be seen under the Component >>> Chart tabs, and a collapsible tree view is available under the Component >>> Tree tabs. Under the hood, Svelte Slicer examines the Abstract Syntax Tree of all Svelte files exposed by the Chrome DevTool API’s inspectedWindow.getResources method, and teases out parent/child relationships based on import statements in each file. The interactive tree and chart give developers a visual representation of the file structure of their inspected web app, and facilitates understanding of the component relationships within the app.
State Snapshots
Svelte Slicer’s core functionality is its ability to parse, store and visualize user-generated state changes. As the developer interacts with their application in the inspected browser, the tool captures “snapshots” of application state with each change to the DOM. Each snapshot can be viewed as a hierarchical state chart, a state tree with details on underlying state variables, or a “diff” displaying specific DOM and variable changes from the previous snapshot.
The state tree view (State >>> Tree) shows a list of all stateful components on the DOM for the selected snapshot, with a collapsible view of the current values of all variables in the component’s state.
The hierarchical state chart view (State >>> Chart) provides an interactive display of each component instance that makes up the DOM for a given snapshot. Hovering over a tree node in the chart reveals the component’s variables and current values.
To further speed the development process, the diff view (State >>> Diff) allows developers to see how state is evolving over time by displaying the specific variables and components that changed from snapshot to snapshot. This can provide reassurance of whether variable changes are being propagated accurately to obtain the desired functionality. Diffing also gives the ability to view what variables were in use when a potential bug has been discovered during build.
To help developers identify the specific moments they might want to revisit, each snapshot related to user interactions with the DOM is labeled with the specific component, event, and event handler that triggered the changes. Additionally, making further insightful analysis is enabled through use of the filter to find specific snapshots.
Time Travel
Svelte Slicer’s most distinctive feature is time travel, providing the ability to slice through state changes at will. As demonstrated below, the “Data” buttons allow the user to see snapshot data for any given snapshot in the right panel, while the “jump” buttons allow the user to see the snapshot data while also re-rendering the selected snapshot in the browser.
More than just providing a window to peer into previous states, however, Svelte Slicer actually enables the developers to truly time travel through their applications by enabling them to build new snapshots starting from any previous snapshot, thus potentially creating an entirely new timeline (new snapshots will always build off the initial state).
As a simple example, a developer might start a session and interact with their app from its initialized state, resulting in, say, four snapshots. After examining the existing snapshots, the developer could decide that they want to see what would happen if they used a different input at the moment of the second snapshot. Using the “jump” button, they could time travel back to that moment, and then begin a new timeline simply by continuing to use their app, but this time with the alternate input. Their next interactions will create subsequent snapshots showing application state based on the new, alternate timeline.
The old timeline (the third and fourth snapshots in this case) is retained in case the developer wants to compare the changes, but are washed out in Svelte Slicer’s UI to indicate that they are not part of the history of the new snapshots. In the “Clear Snapshot” section, the developer can choose to clear out this old timeline and only see the new timeline by clicking on the “Path” button. The developer may also use the “Previous” and “Forward” buttons to help clear out all snapshots before or after the currently active snapshot.
Getting Started
To use Svelte Slicer, begin by downloading the extension app from the Chrome Web Store. Then fire up your Svelte app with the Svelte compiler’s dev option set to true. (If you’re using Svelte’s provided templates for rollup or webpack, “dev: true” is the default when running “npm run dev”.) Go to your browser’s Developer Tools and open the tab for “Slicer” to open the DevTool. Svelte Slicer will refresh your app, and then show your app’s initial state in the panel. Interact with your app to create snapshots, and use the Svelte Slicer panel interface to explore your application’s state!
Next Steps
We see two areas in particular for future development of Svelte Slicer.
First, because the current implementation relies on the MutationObserver interface as its cue to create and store a new snapshot, changes to state are only captured if they result in adjustments to the DOM tree. So user interactions that result in a change to a property or attribute of an existing DOM element without altering the structure of the DOM tree do not currently trigger the creation of a new snapshot. In the future, we hope to develop a method for accurately detecting all state changes, whether they alter the DOM tree or not.
Second, Svelte Slicer does not currently have the ability to deal with routing in applications, as a change to the URL will disable the extension. Developers can still use Svelte Slicer to examine individual pages within a routed site, and we hope to work towards robust support for multi-page applications in the future.
If you would like to contribute to these improvements or have other feedback, please let us know! You can find the product on Github, visit our website, or reach out to us via our LinkedIn profiles below. Svelte Slicer is an open-source product maintained by OSLabs, an open-source tech accelerator.
Svelte Slicer will be available on the Chrome Web Store by March 2022!
The Svelte Slicer Team
Heather Barney — LinkedIn
Rachel Collins — LinkedIn
Lynda Labranche — LinkedIn
Anchi Teng — LinkedIn
