@nzz/et-components-debugging

Features

• 2 debug modes
  • debugLayout
  • debugControls
• utilities to enter/exit debug modes
  • queryparams
  • gestures/keyboard combos
• utilities for layout debugging
  • background grid
  • semitransparent textbox

Usage

Setup

npm install @nzz/et-components-debugging

Init and access state

// init:
setDebugState(new DebugState());

// access from anywhere:
getDebugState();

debug mode A: "debugLayout"

Apply debug layouts in your css: 4x4 grids, plain background, semi-transparent content etc.

| colored debug areas | debug grid | debug text | | -------------------------------------------------------------------- | --------------------------------------------------- | -------------------------------------------------- | | | | | | useful to see margins etc. | useful to see how much is cropped at the top/bottom | useful to measure without devTools |

// toggle debug mode
<app-container
  class:layout-debug-mode={getDebugState().debugLayout}

// debug grid/debug area in some component scss:
@use '@nzz/et-components-debugging/styles/mixins' as debug-mixins;
@forward '@nzz/et-components-debugging/styles/styles.scss';

:global {
    .layout-debug-mode {
      .some-area {
        @include debug-mixins.debugGrid(4,4, rgba(0, 0, 0, 0), rgba(211, 81, 81, 0.2), 0.5);
      }
      .other-area {
        @include debug-mixins.debugArea(rgba(209, 163, 47, 0.4));
      }
    }
}

// debug text
{#if debugState.debugLayout}
  <div class="debug-layout-info">
    // TODO your debug info
  </div>
{/if}

debug mode B: "debugControls"

Show some more controls when in debugControls mode

{#if getDebugState().debugControls}
     // TODO add your debug controls
{/if}

How to enter the debug modes

layout debugging

debug options

Develop

Run example:

pnpm install

pnpm run dev:svelte

Publish:

• update version number in package.json

npm publish