Superform by Delta Clan
✨ ClonablesSocialResourcesSuperform Home
v2
v2
  • 🏁Getting Started
    • Introduction
    • Quick Start
  • 🫀Essentials
    • Form Container
    • Step Container
    • Navigation - Overview
      • Direct
      • Logic / Conditional
      • Hook
    • Variables
      • Form Data ($f)
      • Step Index ($s)
      • Progress Percentage ($p)
      • Scoring Variables ($v)
    • Progress Bar
    • Reset
    • Radio Groups
    • Checkbox Groups
    • Cheatsheet
  • ⚙️Global Options
    • Step Delay Controls
    • Animations
      • Step Animation
      • Step Animation Duration
      • Step Animation Ease
    • Save Data & Progress
    • Pre-fill Form
    • Prevent Content Flash
    • Debug
    • Third-party Integrations
    • Cheatsheet
  • 🎛️Input Validation & Errors
    • Validation
      • length()
      • words()
      • minmax()
      • checkbox()
      • must()
      • hook()
    • Error Management
      • Automatic Error Setup
      • Manual Error Setup
  • ⚡Reactivity
    • Update Text
    • Visibility
    • Class Toggle
    • Value
    • Set Attribute
  • 🔢Score Tracking
    • Score Setup & Calculation
    • Score Ranking
  • ⌨️Accessibility
    • Enter & Backspace Bindings (↩, ⌫)
    • Checkbox & Radio Bindings
  • 🛠️Javascript SDK
    • Intro to Superform API
    • Superform Instance
    • Cheatsheet
  • 📖Additional Resources
    • WTF is an expression ? 🆕
    • Integrations
    • Tutorials
    • Changelog
    • FAQ 🚧
    • Join Discord
Powered by GitBook
On this page
  • Setup
  • 1. sf-debug or sf-debug = true
  • 2. sf-debug = steps

Was this helpful?

  1. Global Options

Debug

Detailed console output for debugging.

Last updated 9 months ago

Was this helpful?

Setup

Attribute: sf-debug

Values: none , true or steps

Default: false

Where: Apply to the script tag of Superform within the <head> or just before </body>.

Enables detailed console output for debugging purposes during form interaction. It logs form data, step count, progress percentage, and scores at each step change, providing a collapsible and organized view of form state changes.

Enables also step expansion for total control of all steps at the same time inside a debug view.

1. sf-debug or sf-debug = true

Console logging of data.

index.html
<!-- Superform by Delta Clan -->
<script defer sf-debug src="https://cdn.jsdelivr.net/npm/@deltaclan/superform@2/dist/superform.js" >
</script>

2. sf-debug = steps

Activates console logging alongside step expansion specifically designed to enhance debugging in multi-step forms. By enabling sf-debug="steps", you can ensure thorough oversight and easier management of form dynamics.

index.html
<!-- Superform by Delta Clan -->
<script defer sf-debug="steps" src="https://cdn.jsdelivr.net/npm/@deltaclan/superform@2/dist/superform.js" >
</script>
⚙️
Setting sf-debug inside the script tag.
Console output of sf-debug and/or sf-debug=true
Console output legend.
Example. Expanded steps inside Wized to control all elements at the same time inside a multistep-form.