Svelte <Inspect {value} />

Examples

JSON

Inspect works well for basic object and array-values aka "JSON".
If needed, strings that start with '[' or '{' can be parsed. Try it:

:
obj 11 entries
id :
undefined
firstName :
str 'Bob' 3 chars
lastName :
str 'Alice' 5 chars
email :
str 'bob@alice.lol' 13 chars
age :
num -42
emailVerified :
bool true
jsonString :
str '[{ \"message\": \"i can be parsed if desired\" }]' 45 chars

Multi-line strings

Expandable view for multi-line strings

normal :
str 'normal boring string' 20 chars
:
str 'cool\n\tmulti-line\n\t\t\trender 😎' 29 chars 
cool
	multi-line
			render 😎

Map & Set

Inspect handles map and set instances.

:
obj 2 entries

Promises

example
<script>
  import Inspect from 'svelte-inspect-value'

  const promises = {
    neverResolve: new Promise(() => {}),
    resolveInAFew: new Promise((resolve) => {
      setTimeout(() => {
        resolve('yep')
      }, 2000)
    }),
    rejectsInAFew: new Promise((_, reject) => {
      setTimeout(() => {
        reject('nope')
      }, 3500)
    })
  }
</script>

<Inspect.Values {...promises} />

Stores

Objects with a subscribe function are recognized as stores or observables. The stores will be subscribed to and the latest emitted value will be displayed.
If the store does not return a valid unsubscriber or the subscribe-function throws an error the store will be displayed as a regular object using the default object-view.

clickObservable :
undefined

This can be enabled / disabled with the stores-prop:

HTML Elements

element view
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
htmlElement :
undefined

Classes

Display "static" properties of classes

Functions

Display bodies of functions with hljs syntax highlighting.

arrowFunction :
fn
asyncFn :
async fn
generator :
fn*
asyncGenerator :
async fn*

URLs

Getters and Setters

Getters and setters render as interactive nodes as to avoid executing potential side effects until they are manually called.
Setters can be called with valid JSON input.

example
<script lang="ts">
  import Inspect from 'svelte-inspect-value'

  let value = $state({
    value: 10,
    multiplier: 4.2,
    get current() { return this.count },
    set current(value) {
      if (typeof value !== 'number') throw 'not a number'
      this.value = value
    },
    get double() { return this.value * 2 },
    set currentMultiplier(value: number) { this.multiplier = value },
    get multiplied() {
      return this.value * this.multiplier
    },
  })
</script>

<Inspect {value} />
:
obj 12 entries
value :
num 10
multiplier :
num 4.2
lastChecked :
str ''empty

Iterators & Generators

Iterators have to be iterated manually since doing so directly affects the source iterator.

example
<script>
  import Inspect from 'svelte-inspect-value'

  function* fibonacci() {
    let current = 1
    let next = 1
    while (true) {
      yield current
      ;[current, next] = [next, current + next]
    }
  }

  let iterators = $state({
    fibonacci: fibonacci(),
    array: [1, 2, 3, 4].values(),
    set: new Set([12, 34, 45]).values(),
    map: new Map<unknown, unknown>([
      [0, 0],
      [{ id: 123 }, 1],
      [[1, 2, 3], 2],
    ]).entries(),
    stringIterator: 'abdcdefghijklmnopqrstuvwxyz'[Symbol.iterator](),
  })
</script>

<Inspect.Values {...iterators} />

URL-strings and image/audio links

If a string is a url and ends with a known file extension for image or audio,
embed the media as an img or audio-tag. This is disabled by default.

Note: This example has the option set to true and won't be affected by global options

:
obj 7 entries
name :
str 'squirtle' 8 chars
type :
str 'water' 5 chars
:
arr 2 items
0 :
str 'tackle' 6 chars
1 :
str 'bubble' 6 chars
:
str 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgBAMAAAAQtmoLAAAAMFBMVEUAAAAQEBApc4NanKRiKQCDKQCLxc205u69agDNeynVlFLVzc3mrFr/1Wr/5pz///8R5ETqAAAAAXRSTlMAQObYZgAAAb1JREFUWMPtlL9KxEAQxi/JC2QvnihaeAkXCwtNBheus7eUPIBZXLGy82ohnZVi4cIl76A2h1ZqJaz2Bxd7C1PoCzgr9jcpBIv9uoX5sfPnm+l0rKysrKz+pwDCdvGjkWxDeBgv5RodWB+dIJCT491D80GLL1wMFm2ACIM5cJlSgYH5YeVWJFRgk0u5z26ADAwM0PukA31M6bgF4JqmHvS+yIBzwjEnAfSUumZqEIHvhZRRbG05iyIMB3uwxkmdjVOW9JTKIOEy8glOxWyC7SyDtCtzCmCMtB9hxcu3kjZrdJJIGVvVsaT1yQWAcV3rRy7AJ3U1hGFZT9UFprWDL8KqsuG7GtfTCJaKTigFYRbVx2vzMX1gk8LFmRPWomoQ0Hp3UkS03f4BSgROgeexmF+6equaaa3PJgsAcU4AqmelVT27uisg5ZLQ3Kqpmlk5u7w/hYTicq80NTw/pRtEgB/VL9glvDPXAMH8jDx5pJXWT+gpY0JGMTjWrB8RCCjxxuDbWqsLBPqMYj8HbZppfc4l9QwEmHnGWES+GxjJfjnaIRNxYlJ3cJNoG8ScnzhHLPb9Thv9glZWVlZWf69vfHii3k2wjfUAAAAASUVORK5CYII=' 790 chars
sprite
:
str '/_app/immutable/assets/squirtle_cry.CeGl-Bpc.ogg' 48 chars
attack :
fn
:
obj 3 entries
speed :
num 20
strength :
num 42
defense :
num 15

Sprite and audio courtesy of pokeapi.co

Other

Other types handled includes Error, Date, regexp, and just about any object with enumerable properties.
This example also demonstrates the entry indicators flashing when their values are updated (enabled / disabled with the flashOnUpdate-prop)

error :
undefined
dash :
str '- ' 10 chars
number :
num 0
global options