$inspect

Grundsyntax

<script>
    let count = $state(0);
    let doubled = $derived(count * 2);

    $inspect(count, doubled);
</script>

<button onclick={() => count++}>+1</button>

In der Browser-Konsole erscheint bei jedem Klick:

init 0 0
update 1 2
update 2 4
update 3 6

Pro Änderung ein Eintrag, mit allen übergebenen Werten.

Tiefes Inspecting bei Objekten

Bei $state-Proxys verfolgt $inspect automatisch alle Eigenschaften, die sich verändern:

<script>
    let user = $state({ name: 'Anna', age: 30, tags: ['admin'] });
    $inspect(user);
</script>

<button onclick={() => user.age++}>+1</button>
<button onclick={() => user.tags.push('vip')}>VIP</button>

Jede Mutation eines Properties (auch verschachtelt) löst einen Log-Eintrag aus.

.with(...) – eigener Logger

Statt console.log lässt sich auch eine eigene Funktion einsetzen — z. B. für strukturiertes Logging, einen Toast oder eine Test-Spy:

<script>
    let count = $state(0);

    $inspect(count).with((type, value) => {
        if (type === 'update') {
            console.warn(`count veränderte sich auf ${value}`);
        }
    });
</script>

Das erste Argument der Callback-Funktion ist 'init' oder 'update', dann folgen die übergebenen Werte. Damit lassen sich Inspector-Aufrufe gezielt filtern.

$inspect.trace() – Stack-Trace bei Re-Renders

In komplexeren Komponenten ist oft die Frage: Warum lief diese Komponente gerade neu? $inspect.trace() setzt im aktuellen Effect oder Derived einen Marker, der bei jedem Lauf einen Trace ausgibt:

<script>
    let count = $state(0);
    let multiplier = $state(2);

    $effect(() => {
        $inspect.trace('counter-effect');
        console.log(count * multiplier);
    });
</script>

In der Konsole erscheint pro Lauf ein Trace mit Label und den Werten, die Reaktivität ausgelöst haben — sehr nützlich, um „warum läuft das schon wieder”-Fragen zu beantworten.

$inspect vs. console.log in $effect

Manuell könnte man dasselbe so schreiben:

$effect(() => {
    console.log('count:', count);
});

Vorteile von $inspect:

• Automatisches Init-vs-Update-Tagging.
• Tiefes Tracking ohne manuelles Lesen aller Properties.
• Production-Stripping: $inspect-Aufrufe werden im Production-Build vom Compiler entfernt. console.log bleibt — du müsstest manuell aufräumen.

Faustregel: Für Debugging immer $inspect, für gezielte Diagnose-Logs in Produktion eher console.log.

Mehrere Werte gleichzeitig

$inspect akzeptiert beliebig viele Argumente:

<script>
    let firstName = $state('Anna');
    let lastName = $state('Schmidt');
    let title = $state('Dr.');

    $inspect(firstName, lastName, title);
</script>

Pro Update ein Log mit allen drei Werten.

Praktische Anwendungsfälle

Form-Debugging

<script>
    let form = $state({
        email: '',
        password: '',
        rememberMe: false,
    });

    $inspect(form);
</script>

<input bind:value={form.email} />
<input type="password" bind:value={form.password} />
<input type="checkbox" bind:checked={form.rememberMe} />

Conditional Logging

<script>
    let count = $state(0);

    $inspect(count).with((type, value) => {
        if (value > 100) console.warn('count groß!', value);
    });
</script>

Re-Render-Analyse

<script>
    let { items } = $props();

    let visibleItems = $derived.by(() => {
        $inspect.trace('visibleItems-recompute');
        return items.filter((i) => i.visible);
    });
</script>

Häufige Stolperfallen

$inspect für Production-Logging nutzen. Wird vom Compiler entfernt — taucht in Production nicht auf. Für echtes Logging console.log oder eine Telemetrie-Bibliothek einsetzen.

Erwarten, dass $inspect in normalem .ts funktioniert. Funktioniert nur in .svelte, .svelte.js oder .svelte.ts. In normalem TS gibt es ein Fallback-Modul svelte/dev mit ähnlichen Helpers.

Performance-Sorgen wegen vielen $inspect-Calls. Im Production-Build kein Thema (Stripping). In Development klar mehr Logging, aber meist vernachlässigbar.

$inspect mit nicht-reaktiven Werten. Funktioniert: gibt einmalig den Initialwert aus, dann nichts mehr (es gibt nichts zu tracken).

Weiterführende Ressourcen

Externe Quellen

• $inspect – svelte.dev

Verwandte Artikel

• $state
• $derived
• $effect