Skip to content

You are reading the documentation for version 0.6, which is not the latest release.

The $debug API

Function signature

ts
$debug<T>(
  level: 'error' | 'warning' | 'info' | 'debug' | 'success' | 'trace',
  payload: string | Error | T,
  options?: {
    showStack?: boolean
    showSource?: boolean
    tag?: string
    prefix?: string // override the rendered prefix for this call
  }
): void

showSource defaults to the showSourceLocation plugin option, and prefix falls back to the configured prefix when omitted. tag doubles as the namespace used by the runtime filter. In 0.6 the location names the plugin's own code; see showSourceLocation.

Payload typeRendered
stringas-is
Errorerror.message (stack appended when showStack: true)
object / arrayJSON.stringify with circular guard, truncated at 500 chars
Map / Setconverted to plain shape, then stringified
Vue ref.value unwrapped, then standard rules apply
DOM Node<tag#id.class> summary
Promise[Promise] (not awaited)

$debug also exposes runtime controls (ns, enable, disable, setLevel, setPrefixFilter; see Namespaces and filtering) and utility helpers (assert, time/timeEnd, count, group/groupEnd).

Levels

LevelDefault labelDefault color (browser / terminal)Browser console methodOrder
traceTrace#a855f7 / magentaconsole.trace0
debugDebug#6b7280 / grayconsole.debug1
infoInfo#3b82f6 / blueconsole.info2
successSuccess#10b981 / greenconsole.log3
warningWarning#f59e0b / yellowconsole.warn4
errorError#ef4444 / redconsole.error5

minLevel keeps every level at or above the threshold (trace < debug < info < success < warning < error); levels is an explicit allowlist. Labels and colors can be changed per level with the colors option.

Utility helpers

$debug carries console-style helpers. Every one is stripped from production builds along with the base calls, including method ($debug.time(...)) and chained ($debug.ns('x')('info')) forms.

ts
$debug.assert(user.id != null, "user must have an id", { tag: "auth" });
// logs at "error" level ONLY when the condition is falsy

$debug.time("render");
renderExpensiveThing();
$debug.timeEnd("render"); // → MARS-TECH Debug [render] - render: 12.4ms

$debug.count("api-call"); // → api-call: 1
$debug.count("api-call"); // → api-call: 2

$debug.group("checkout");
$debug("info", "validating cart"); // indented under the group
$debug("info", "charging card");
$debug.groupEnd();
HelperBehavior
assert(condition, payload, opts?)Logs payload at error level only when condition is falsy.
time(label?) / timeEnd(label?)Logs elapsed ms between the two calls at debug level. Label defaults to default.
count(label?)Increments and logs a named counter at debug level.
group(label?) / groupEnd()Indents subsequent output one level (label, if given, is logged as the title).

The label doubles as the namespace or tag, so helpers respect the active filter too. Timing uses performance.now() when available.