Svelte <Inspect {value} />

Usage

The Inspect component offers a lot of different functionality and interactivity.
This page covers how to interact with the component outside of code.
See the Getting Started and Examples-pages for installation instructions and code examples.

Keyboard Controls

Every node/row/line in Inspect is focusable. Using the Tab key will shift focus between every focusable element and is required to focus the tools or get / next-actions of getters / iterables.
Using Tab in combination with the following keyboard shortcuts, everything should be reachable using only your keyboard.

Type to focus

Search and Text Highlight

If search is enabled, a search input will be visible in the header.
Typing a query and hitting enter will index the inspected values, search it and highlight any paths with keys, paths and values that matches the query.

Search results can be narrowed by using multiple terms and the following prefixes:

• value: to search the content of the value, e.g. true / 'foo' / 12356n
• type: to search that matches a specific type, e.g. number / boolean / date
• key: to search within a values key
• path: to search within the path to a value, e.g. people.3.contact.email

Wrapping terms in quotes will require an exact match. With a prefix it would look like value:"1234"

Multiple terms

If multiple terms are entered (separated by space) a mode-selector appears letting you choose between and / or-mode. The initial mode can be set with the searchMode-prop.

For example, querying type:"string" path:foo would match all string values and / or values with 'foo' in their path / key.

Expanding matches

All matching paths will be expanded. To keep highlighted matching paths expanded after clearing the search results, hit Enter again without changing the query.
The Esc-button will clear the input and search results when the search field is focused, and if the search field was focused using the keyboard shortcut, the last focused node will be re-focused.

If highlightMatches is enabled, matching text will be highlighted when you type your query.
Text highlighting also respects prefixes like path and type.

Note: Text highlighting and indexed search works a bit differently. For example, the query type:undefined type:null will highlight any visible value with type undefined and null regardless of search mode, but since a value can't be both undefined and null at the same time, no values will be a match in and-mode. So, even if something is highlighted it might not count as a match.