DeLorean

Overview:

DeLorean is a debugging tool designed specifically for Svelte developers. It allows users to record snapshots of their application’s state changes and jump to any previously recorded state. DeLorean also provides an information panel within Chrome Developer Tools, displaying the names and values of all variables in the application at the time of each snapshot. This tool simplifies the tracking of state changes over time and reduces the need for console.log.

Features:

• Dev tool information panel: DeLorean displays all stateful data within Chrome Developer Tools. It shows the names of components and variables, along with their values, making it easy to access and analyze them.
• Application state time-travel: DeLorean allows users to reset an application’s state to any previously recorded values. This feature enables step-by-step examination of state change sequences, enhancing the understanding of application behavior.
• Create new timelines: While testing the application in previous states, DeLorean enables users to make changes and interact with the application differently. These changes create new timelines that are tracked in the Dev Tools panel.

Installation:

To install DeLorean, follow these steps:

1. Fork and clone the DeLorean repository if you want to learn more about how it works.
2. Alternatively, download the chrome_extension folder and save it on your computer.
3. Open Chrome’s extensions page and make sure you are in developer mode.
4. Click on “Load unpacked” and select the downloaded chrome_extension folder.
5. Open the DevTools panel and check if DeLorean is available in the dropdown menu of the navbar.

Summary:

DeLorean is a powerful debugging tool for Svelte developers. Its key features include the Dev Tool information panel, which displays all stateful data in the application, the ability to time-travel and reset the application’s state, and the creation of new timelines for testing. By simplifying state tracking and providing detailed variable information, DeLorean streamlines the debugging process for Svelte applications.