@debug

Директива @debug выводит значения в консоль браузера. Используется для отладки параметров компонента.

Синтаксис

@debug arg1, arg2, arg3;

Принимает один или несколько аргументов через запятую. Объявляется внутри @block, в том числе внутри @if и вложенных правил.

Аргументы

В качестве аргументов можно передавать:

• литерал любого типа: строку, число, цвет, единицу
• ссылку на @param — выведет значение, переданное при вызове
• ссылку на @const — выведет значение константы

Включение

По умолчанию @debug отключён и не попадает в итоговый бандл. Для включения установите enableDebug: true в конфигурационном файле:

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

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

export default config;

WARNING

Не используйте enableDebug: true в production-сборках.

Пример

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

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

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

При рендере блока с isActive: true и variant: "primary" консоль покажет:

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

См. также

• Конфигурация — параметр enableDebug
• @const — константы как аргументы @debug
• @param — параметры как аргументы @debug