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/client/SuperDebug.svelte';

<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: "wendat@example.com",
  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: "wendat@example.com",
  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: "wendat@example.com",
  birth: 1649-01-01T00:00:00.000Z
}

Without label and status

<SuperDebug data={$form} status={false} />

{
  name: "Gaspar Soiaga",
  email: "wendat@example.com",
  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: "wendat@example.com",
    birth: 1649-01-01T00:00:00.000Z
  },
  $errors: {
    email: [
      "Cannot use example.com as email."
    ]
  }
}

SuperDebug loves stores

You can pass a store directly to SuperDebug:

<SuperDebug data={form} />

200

{
  name: "Gaspar Soiaga",
  email: "wendat@example.com",
  birth: 1649-01-01T00:00:00.000Z
}

Custom styling

<SuperDebug 
  data={$form} 
  theme="vscode" 
  --sd-code-date="lightgreen" 
/>

200

{
  name: "Gaspar Soiaga",
  email: "wendat@example.com",
  birth: 1649-01-01T00:00:00.000Z
}

CSS variables available for customization

Display variables

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-v1.vercel.app/super-debug",
  data: {},
  form: null
}