SuperDebug

SuperDebug is a debugging component that gives you colorized and nicely formatted output for any data structure, usually $form returned from superForm. It also shows the current page status in the top right corner.

It’s not limited to the Superforms data, other use cases includes debugging plain objects, promises, stores and more.

Usage

import SuperDebug from 'sveltekit-superforms';
<SuperDebug data={$form} />

Props reference

<SuperDebug
  data={any}
  display={true}
  status={true}
  label=''
  collapsible={false}
  collapsed={false}
  stringTruncate={120}
  raw={false}
  functions={false}
  theme='default'
  ref={HTMLPreElement} 
/>
Prop Type Default value Description
data any Data to be displayed by SuperDebug. The only required prop.
display boolean true Whether to show or hide SuperDebug.
status boolean true Whether to show or hide the HTTP status code of the current page.
label string "" Add a label to SuperDebug, useful when using multiple instances on a page.
collapsible boolean false Makes the component collapsible on a per-route basis.
collapsed boolean false If the component is collapsible, sets it to initially collapsed.
stringTruncate number 120 Truncate long string field valuns of the data prop. Set to 0 to disable truncating.
raw boolean false Skip promise and store detection when true.
functions boolean false Enables the display of fields of the data prop that are functions.
theme “default”, “vscode” "default" Display theme, which can also be customized with CSS variables.
ref HTMLPreElement Reference to the pre element that contains the data.

Examples

Change name here, to see it update in the SuperDebug instances:

Default output

<SuperDebug data={$form} />
200
{
  name: "Gaspar Soiaga",
  email: "[email protected]",
  birth: 1649-01-01T00:00:00.000Z
}

With a label

A label is useful when using multiple instance of SuperDebug.

<SuperDebug label="Useful label" data={$form} />
Useful label
200
{
  name: "Gaspar Soiaga",
  email: "[email protected]",
  birth: 1649-01-01T00:00:00.000Z
}

With label, without status

<SuperDebug label="Sample User" status={false} data={$form} />
Sample User
{
  name: "Gaspar Soiaga",
  email: "[email protected]",
  birth: 1649-01-01T00:00:00.000Z
}

Without label and status

<SuperDebug data={$form} status={false} />
{
  name: "Gaspar Soiaga",
  email: "[email protected]",
  birth: 1649-01-01T00:00:00.000Z
}

Display only in dev mode

<script lang="ts">
  import { dev } from '$app/environment';
</script>

<SuperDebug data={$form} display={dev} />

Promise support

To see this in action, scroll to the product data below and hit refresh.

// +page.ts
export const load = (async ({ fetch }) => {
  const promiseProduct = fetch('https://dummyjson.com/products/1')
    .then(response => response.json())

  return { promiseProduct }
})
<SuperDebug label="Dummyjson product" data={data.promiseProduct} />
Dummyjson product
200
undefined

Rejected promise

// +page.ts
export const load = (async ({ fetch }) => {
  const rejected = Promise.reject(throw new Error('Broken promise'))
  return { rejected }
})
<SuperDebug data={rejected} />
200
undefined

Composing debug data

If you want to debug multiple stores/objects in the same instance.

<SuperDebug data={{$form, $errors}} />
200
{
  $form: {
    name: "Gaspar Soiaga",
    email: "[email protected]",
    birth: 1649-01-01T00:00:00.000Z
  },
  $errors: {
    email: [
      "Cannot use example.com as email."
    ]
  }
}

Displaying files

SuperDebug displays File and FileList objects as well:

<SuperDebug data={$form} />
200
{
  file: {}
}

SuperDebug loves stores

You can pass a store directly to SuperDebug:

<SuperDebug data={form} />
200
{
  name: "Gaspar Soiaga",
  email: "[email protected]",
  birth: 1649-01-01T00:00:00.000Z
}

Custom styling

<SuperDebug 
  data={$form} 
  theme="vscode" 
  --sd-code-date="lightgreen" 
/>
200
{
  name: "Gaspar Soiaga",
  email: "[email protected]",
  birth: 1649-01-01T00:00:00.000Z
}

CSS variables available for customization

Note that styling the component produces the side-effect described in the Svelte docs.

Page data

Debugging Svelte’s $page data, when the going gets tough. Since it can contain a lot of data, using the collapsible prop is convenient.

<script lang="ts">
  import { page } from '$app/stores';
</script>

<SuperDebug label="$page data" data={$page} collapsible />
$page data
200
{
  error: null,
  params: {},
  route: {
    id: "/super-debug"
  },
  status: 200,
  url: "https://superforms.rocks/super-debug",
  data: {},
  form: null,
  state: {}
}