Live & interactive object inspector for Svelte, inspired by DevTools.
npm install --save svelte-inspect
Try the example in the svelte.dev REPL. Use mouse and keyboard to inspect the todos.
<!-- …and add an inspector anywhere on your page -->
See REPL demo of most of the types. These types have special formatting:
- Arrays (including TypedArrays)
- Functions (including async functions)
- Map and Set
- undefined and null
- Numbers (including BigInt)
- HTML elements
There's support for enumerable and non-enumerable properties, symbol keys,
__proto__, and getters (click to evaluate). It does not yet have any special support for e.g. iterators, promises.
You can use your keyboard to move around in the object hierarchy.
|A…Z 0…9||Type anything||Jump using fuzzy matching|
|⇧⇥||Shift + Tab||Focus previous|
|⯇||Left||Close or step out|
|⯈||Right||Open or step in|
|↵||Enter||Open & step in|
Create one inspector for every value passed in as a prop, with default colors.
Inspect a single
value, without showing the name of the prop. Also takes an optional
depth directly as a prop.
Inspector with color palette suitable for dark backgrounds.
Inspectors pre-configured with
Create an inspect component with custom configuration.
Note the use of
context="module", which is required for the Svelte compiler to understand that
CustomInspector can be used in the template.
The config is WIP. There are currently two options:
Set how many levels of the object hierarchy should start in the open state. Defaults to
<!-- 2 levels deep – will show `foo` and `array` but not `[1, 2, 3]` -->
Non-enumerable properties will not be opened.
Create a component with a customized color palette. Values are any valid CSS color, keys are
selection (note that not all of these colors are currently used).
(work in progress; expect to change)