Svelte Virtual List logo

Debug Mode

Debug mode provides detailed information about the virtual list’s internal state, useful for development and troubleshooting.

Item 0
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Debug Output

Scroll to see debug info...

Enabling Debug Mode

Via Props

<VirtualList {items} debug={true}>
    {#snippet renderItem(item)}
        <div>{item.text}</div>
    {/snippet}
</VirtualList>
<VirtualList {items} debug={true}>
    {#snippet renderItem(item)}
        <div>{item.text}</div>
    {/snippet}
</VirtualList>

Via Environment Variable

PUBLIC_SVELTE_VIRTUAL_LIST_DEBUG=true
PUBLIC_SVELTE_VIRTUAL_LIST_DEBUG=true

Debug Information

When enabled, the component provides:

PropertyDescription
startIndexFirst rendered item index
endIndexLast rendered item index
totalItemsTotal items in the list
visibleItemsCountNumber of items currently visible
processedItemsItems with measured heights
averageItemHeightCalculated average height
atTopWhether scrolled to top
atBottomWhether scrolled to bottom
totalHeightTotal calculated content height

Custom Debug Handler

Capture debug info programmatically:

<script lang="ts">
    import VirtualList from '@humanspeak/svelte-virtual-list'
    import type { SvelteVirtualListDebugInfo } from '@humanspeak/svelte-virtual-list'

    function handleDebug(info: SvelteVirtualListDebugInfo) {
        console.log('Visible range:', info.startIndex, '-', info.endIndex)
        console.log('Average height:', info.averageItemHeight)
    }
</script>

<VirtualList
    {items}
    debug={true}
    debugFunction={handleDebug}
>
    {#snippet renderItem(item)}
        <div>{item.text}</div>
    {/snippet}
</VirtualList>
<script lang="ts">
    import VirtualList from '@humanspeak/svelte-virtual-list'
    import type { SvelteVirtualListDebugInfo } from '@humanspeak/svelte-virtual-list'

    function handleDebug(info: SvelteVirtualListDebugInfo) {
        console.log('Visible range:', info.startIndex, '-', info.endIndex)
        console.log('Average height:', info.averageItemHeight)
    }
</script>

<VirtualList
    {items}
    debug={true}
    debugFunction={handleDebug}
>
    {#snippet renderItem(item)}
        <div>{item.text}</div>
    {/snippet}
</VirtualList>

Visual Overlay

When debug={true}, a visual overlay displays real-time stats in the corner of the viewport.