The first time-travelling debugger for Svelte applciations
DeLorean is a debugging tool for Svelte developers. It records snapshots when a target applications's state changes, and allows users to jump to any previously recorded state. It displays the values of all variables in state at the time of the snapshot alongside the jump button.
DeLorean features a clean, minimal UI that's easily accessible from within the Chrome developer tools panel.
It will time travel your app state.
To install DeLorean, simply add the extension to your browser from the Chrome Web Store. After instlallation is complete it will be available within the developer tools panel in Chrome.
Importantly, this debugging tool can only operate on Svelte applications being run in dev mode. Without dev mode enabled, Svelte's internal compiler strips some internal functionality to reduce overall bundle size. DeLorean requires that functionality, so ensure dev mode is enabled.
At this time, DeLorean searches the tested application for an id of "root" to find Svelte components to test. An example format for an html page and its main svelte component: index.html:
<head></head>
<body>
<div id="root" />
</body>
main.js:
import App from './App.svelte';
new App({
target: document.getElementById('root'),
});
This extension has
This needs to be done in order.
Have fun!
[] Is your application running in dev mode?
[] Is your Svelte component attached to an element with the id of "root"?
[] Are you running your app from something other than a localhost url?
[] Are there multiple components in your application? Dang.
... some articles
Albert Han - @alberthan1 Aram Krakirian - @aramkrakirian Erick Maese - @ErickMaese Trevor Leung - @trevleung Sam VanTassel - @SamVanTassel