A simple dev tool to help you debug your Svelte stores.
This dev tool is intended to help with inspecting and debugging Svelte stores by showing the data that is contained in the store as they are modified. You can also modify the data in the stores and see your app update with the new data.
Install the svelte-store-tools package.
npm install svelte-store-toolsIn your svelte-kit route, import the StoreTools component and register from svelte-store-tools
import { StoreTools } from 'svelte-store-tools';Add the component
<StoreTools />Register the stores that you want to be able to debug when in development. First parameter is the name of the store that will be displayed in the dev tool, followed by a reference to the Svelte store.
register('Simple Store', SimpleStore);If you need to clear the stores that have been registered, there is a clearRegisteredStores function that can be imported and excuted. For example, in an onDestroy() function.
The following props can be passed to the StoreTools component
allowInProduction - A modifier to allow this tool to bypass the environment check and be used in production environment. Note: this is required to use this in a REPL.height - Specify the initial height of the dev panel.