Time-traveling debugger for Svelte applications

Related tags

Vue.js DeLorean
Overview

DeLorean

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.

Features

Dev Tool information panel

DeLorean features a clean, minimal UI that's easily accessible from within the Chrome developer tools panel.

Time-travel

It will time travel your app state.

Installation

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.

How To Use

Run in dev mode

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.

Attach your Svelte app to an element with the id "root"

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'),
});
Run the application from localhost*

This extension has

Click connect first, then the second button

This needs to be done in order.

Make some state changes, then click the state buttons

Have fun!

Troubleshooting

[] 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.

Learn More

... some articles

Contributors

Albert Han - @alberthan1 Aram Krakirian - @aramkrakirian Erick Maese - @ErickMaese Trevor Leung - @trevleung Sam VanTassel - @SamVanTassel

Comments
Owner
OSLabs Beta
OSLabs Beta
GitHub
A template to use GoLang Lorca package to make desktop applications using webview and Svelte for the frontend,

Svelte Lorca Template A starter project for building modern cross-platform desktop apps in Go, HTML, and Svelte. This project is a fork of lorca-ts-re

Ben Winchester 16 Jun 19, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.9k Jan 9, 2023
NativeScript empowers you to access native api's from JavaScript directly. Angular, Vue, Svelte, React and you name it compatible.

NativeScript empowers you to access native APIs from JavaScript directly. The framework currently provides iOS and Android runtimes for rich mobile de

NativeScript 22k Jan 4, 2023
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js conver

Matteo Bruni 4.7k Jan 4, 2023
bare bones demo of svelte-three

create-svelte Everything you need to build a Svelte project, powered by create-svelte; Creating a project If you're seeing this, you've probably alrea

Rich Harris 39 Jul 30, 2022
A svelte action for creating tippy.js tooltips with full typescript support

Tippy.js for svelte A svelte action for creating tippy.js tooltips. Getting started # Pnpm pnpm add svelte-tippy tippy.js # Yarn yarn add svelte-tipp

Brett Mandler 11 Jul 19, 2022
Add Routify to your Svelte project

?? Add (work in progress) Routify to Svelte This is an adder for svelte-add; you should read its README before continuing here. âž• Adding (work in prog

Svelte Add 5 Aug 3, 2022
Small library to accomplish common tasks in Svelte/SvelteKit

svelte-utilities svelte-utilities is a small utilities library for Svelte/SvelteKit that provides features I use in almost every project, such as: Laz

null 40 Nov 25, 2022
Vite Svelte plugin to remove console logs in prod.

vite-plugin-svelte-console-remover A Vite plugin that removes all console statements (log, group, dir, error, etc) from Svelte, JS, and TS files durin

Josh Hubbard 29 Oct 13, 2022
âš¡A zero-config bundler for JavaScript applications.

Poi is a bundler built on the top of webpack, trying to make developing and bundling apps with webpack as easy as possible. The Poi project is support

Eren Bets 5.3k Jan 4, 2023
:bento: Full-Stack solution to quickly build PWA applications with Vue.js and Firebase

Welcome to bento-starter ?? ?? bento-starter is an Open-Source Full-Stack solution that helps you to build fast and maintainable web applications usin

Franck Abgrall 1.5k Dec 24, 2022
Build performant, native and cross-platform desktop applications with native Vue + powerful CSS like styling.🚀

Vue NodeGui Build performant, native and cross-platform desktop applications with Vue. ?? Vue NodeGUI is powered by Vue ?? and Qt5 ?? which makes it C

NodeGui 765 Dec 30, 2022
Configure multi-pages applications and code splitting

vite-plugin-mp Configure multi-pages applications and code splitting Usage npm install vite-plugin-mp -D // vite.config.js import { defineConfig } fro

null 15 Dec 2, 2022
End-to-end typesafe APIs with tRPC.io in Nuxt applications.

tRPC-Nuxt End-to-end typesafe APIs with tRPC.io in Nuxt applications. The client above is not importing any code from the server, only its type declar

Robert Soriano 231 Dec 30, 2022
Frolics is an offline, lightweight, full-text search library for Frontend applications

Frolics What Is Frolics Installation Document Preparing Customized Fields Hand-on Example Cache Usage What Is Frolics ? Frolics is an offline, lightwe

null 13 Dec 4, 2022
Quasar Framework - Build high-performance VueJS user interfaces in record time

Quasar Framework Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid

Quasar Framework 22.7k Jan 9, 2023
The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Newest updates: https://blog.vuestorefront.io. Always Open Source, MIT license.

Vue Storefront - Headless PWA for any eCommerce Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommer

Vue Storefront 10.2k Jan 9, 2023
Some compile-time magic for your Vite project

?? You can help the author become a full-time open-source maintainer by sponsoring him on GitHub. vite-plugin-compile-time Use this plugin to generate

EGOIST 90 Dec 15, 2022
🌈 CLI tool to scaffold chakra ui projects, without wasting time.

Create Chakra Project (create-chakra) âš’ Tool to scaffold chakra apps, without wasting time. It uses existing tools like create-next-app and create-vit

Vedant Nandwana 13 Nov 29, 2022