Introducing Svelte DevTools+
Finally, some good DevTools for Svelte
What is Svelte?
Svelte is a compiler that allows frontend developers to build web applications quickly and easily using components, styles, and markup. Svelte compiles all these building blocks into “small, efficient JavaScript modules that eliminate overhead traditionally associated with UI frameworks.” SvelteKit (which is a framework used for building apps that use Svelte) allows developers to build Single Page Applications (SPAs), Server Side Rendered (SSR) applications (with the help of a pre-constructed Vite server), and a variety of other types of applications. Svelte is beloved by its small but vibrant community of developers, and it was voted “most admired JS web framework” in Stack Overflow’s 2023 Developer Survey. So what’s the problem?
Problem: No Official DevTools
Svelte currently lacks vital tools that would allow for software engineers’ experiences to be optimized. The official DevTools were passed off to a 3rd party developer who has not updated it in over two years. Meanwhile, Svelte has been continuously releasing updates. If you click the link for the “official” Chrome extension, you see the following 404 error:
Our Solution? Build some DevTools!
Our team decided to create something the Svelte community has been clamoring for the past 2+ years: new DevTools. We built a Chrome extension incorporating several features that benefit those working with Svelte.
Dynamic Component Visualization
Svelte DevTools+ allows developers to inspect their app’s component hierarchy in step-like or tree-like structures. Both provide a visual representation of how components are nested within each other, allowing for greater ease of understanding of the application’s structure.
Real-Time State and Props Updates
Our DevTools allow engineers to see their changes to a component’s state and props in real-time, immediately reflecting updates within the DevTool panel itself. This allows for a simple analysis of the Svelte application’s behavior.
Component Inspection
When selecting an individual component in the component tree, developers can take a closer look at the props, state, and context of the component to aid in understanding the relationships between data and values.
Component State Modification
Developers are given the power to modify the state and props of a component directly from our DevTool panel. This creates a safe environment to test new ideas without affecting the source code.
State Rewind
Our extension includes time-travel debugging in the form of a slider bar that allows us to analyze state changes, helping us to catch potential errors along the way.
How to Get Started
Download our extension Chrome Web Store! You can also head to our website or GitHub for more information on the extension and how you can test it with a few of our own demo applications. Additionally, you can read more on our LinkedIn.