svelte-debug-console

debug.js implementation for Svelte SPA, SSR and sveltekit static sites. See your debug statements in the browser.

Features

• svelte server side rendering (SSR) friendly.
• works with sveltekit SPA, SSR and static site adapters.
• auto scrolls to the last entry.
• typescript definitions are included for LSP.

Demonstration

svelte-debug-console demo

Getting Started

# install as a development dependency
pnpm install -D svelte-debug-console

Basic Usage

Import the library onto your template:

import { Debug } from "svelte-debug-console";
/*
 │Debug: svelte <Debug> component.
 */

In your parent component, add the <Debug>:

<Debug discard={"false"} />

If you want to start fresh, set discard option to true.

By default, debug.js will only create a single instance across your application. svelte-debug-console will inject itself into the main debug instance.

For some use cases, this may not be desired.

Issues

If any trouble, please create an issue. PRs are most welcome.

Todo

• Add CSS variables to allow console customization
• Improve line formatting to distinct between the message and the label. (probably an arrow or something in between)
• Add copy to clipboard option
• Add filtering and search