Svelte Inspect

Live & interactive object inspector for Svelte, inspired by DevTools.

``console
npm install --save svelte-inspect
`

Try the example in the svelte.dev REPL. Use mouse and keyboard to inspect the todos.

`html



`

Types

See REPL demo of most of the types. These types have special formatting:

- Arrays (including TypedArrays)
- Objects
- Functions (including async functions)
- Classes
- Map and Set
- RegExps
- Dates
- Booleans
- undefined and null
- Numbers (including BigInt)
- Strings
- Symbols
- Errors
- 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.

Keyboard navigation

You can use your keyboard to move around in the object hierarchy.

Keys | | Action
:--- | :--- | :---
A…Z 0…9 | Type anything | Jump using fuzzy matching
⇥ | Tab | Focus next
⇧⇥ | Shift + Tab | Focus previous
⯇ | Left | Close or step out
⯈ | Right | Open or step in
⯅ | Up | Focus previous
⯆ | Down | Focus next
      | Space | Toggle
↵ | Enter | Open & step in
esc | Escape | Step out

API

$3

Create one inspector for every value passed in as a prop, with default colors.

`html



`

$3

Inspect a single value, without showing the name of the prop. Also takes an optional depth directly as a prop.

`html



`

$3

Inspector with color palette suitable for dark backgrounds.

`html



`

$3

Inspectors pre-configured with {depth: 0-10}.

`html



`

$3

Create an inspect component with custom configuration.

`html



`

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:

#### {depth: number}

Set how many levels of the object hierarchy should start in the open state. Defaults to 1.

`html




`

Non-enumerable properties will not be opened.

#### {palette: {...colors}}

Create a component with a customized color palette. Values are any valid CSS color, keys are red, blue, green, purple, orange, yellow, brown, pink, gray, black, white and selection (note that not all of these colors are currently used).

(work in progress; expect to change)

`html

``