Debugging Svelte apps with the newly released Svelte DevtoolsSeptember 28, 2019
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.
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
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.
Also check out my earlier post on Svelte: Boost your legacy apps with Svelte 3 components