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

arr 2 items
0 :
str 'normal boring string' 20 chars
str 'cool \n multi-line \n render 😎' 30 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 value = {
    neverResolve: new Promise(() => {}),
    resolveInAFew: new Promise((resolve) => {
      setTimeout(() => {
        resolve('yep')
      }, 2000)
    }),
    rejectsInAFew: new Promise((_, reject) => {
      setTimeout(() => {
        reject('nope')
      }, 3500)
    })
  }
</script>

<Inspect {value} name="promises" />

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

obj 2 entries

Functions

Display bodies of functions with hljs syntax highlighting.

obj 2 entries
arrowFunction :
fn

URLs

obj 3 entries

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 value = $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 {value} />
obj 5 entries

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)

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