@debug

The @debug directive prints values to the browser console. It is used for debugging component parameters.

Syntax

@debug arg1, arg2, arg3;

Accepts one or more comma-separated arguments. It is declared inside a @block, including inside @if and nested rules.

Arguments

The following can be passed as arguments:

• a literal of any type: a string, number, color, unit
• a reference to a @param — prints the value passed at the call site
• a reference to a @const — prints the constant's value

Enabling

By default, @debug is disabled and does not make it into the final bundle. To enable it, set enableDebug: true in the configuration file:

// ecss.config.ts
import { defineConfig } from '@ecss/config';

const config = defineConfig({
  enableDebug: true,
});

export default config;

WARNING

Do not use enableDebug: true in production builds.

Example

@block Button {
  @param --is-active boolean;
  @param --variant Variant;

  @debug "Button rendered, variant:", --variant;

  @if (--is-active) {
    @debug "active state, variant:", --variant;
    background: #646cff;
  }
}

When rendering the block with isActive: true and variant: "primary", the console will show:

"Button rendered, variant: primary"
"active state, variant: primary"

See also

• Configuration — the enableDebug option
• @const — constants as @debug arguments
• @param — parameters as @debug arguments