Debugging Svelte apps with the newly released Svelte Devtools

A minor nuisance with using Svelte 3 (if you're coming from Vue or React) might be the lack of a browser plugin like Vue devtools, it offers convenient ways to inspect the app's component tree and direct access to component state.

There is now a community created devtools extension for Svelte, made by Timothy Johnson, which gives you some of the basic functionality found in similar tools for other frameworks.

Installation

Firefox - Install from the official store Chrome - The extension is, at the time of writing, under review for Chrome so you'll have to manually download a zip package according to the instructions in the Readme: https://github.com/RedHatter/svelte-devtools/blob/master/README.md

Usage

Svelte Devtools only work with Svelte version 3.12 or greater, so you might want to make sure that you've updated your Svelte NPM dependency.

1. Create a new Svelte app and compile it with development mode enabled

If you don't have a custom Svelte 3 project to use you can just go with the basic app template:

npx degit sveltejs/template svelte-app
cd svelte-app
npm install

npm run dev

2. Open the app in Firefox or Chrome, press F12 and select the "Svelte tab"

3. Inspect state & components and filter what's shown

In the main panel you can view and inspect all components and the HTML elements they contain. A component's props are shown both in the element/component view and in the state panel to the right.

Props and state can be updated directly from the devtools:

You can also filter which information you want to be shown, for example if you'd like to hide HTML elements and only show components.

Like what you see? At least make sure to star the repo on GitHub (https://github.com/RedHatter/svelte-devtools) and perhaps check if RedHatter wants any help on improving the tool.

Also check out my earlier post on Svelte: Boost your legacy apps with Svelte 3 components