Runtime & Styling

How ZTracer adapts to Node.js and browser environments.

On this page

Environment Detection

ZTracer automatically detects whether it runs in Node.js or a browser by checking for process.versions.node. 

// src/modules/_env.ts
export const _isNode = (): boolean => {
  return (
    typeof globalThis !== "undefined" &&
    "process" in globalThis &&
    typeof globalThis.process?.versions?.node === "string"
  );
};

No configuration required — it just works.

Browser Styling

Uses CSS with console.group and the %c format specifier. 

// src/modules/_styling.ts
export const _styleBrowser = (
  background?: string,
  color?: string
): string => {
  const styles = [
    "border-radius: 5px; padding: 2.5px; font-style: italic;"
  ];
  if (background) styles.push(`background-color: ${background};`);
  if (color) styles.push(`color: ${color};`);
  return styles.join(" ");
};

Works in Chrome, Firefox, Safari, Edge, Opera.

Node.js Styling

Uses ANSI escape codes for colored output in the terminal. 

// src/modules/_styling.ts
export const _styleNode = (
  text: string,
  color?: string,
  backgroundColor?: string
): string => {
  const ANSI_RESET = "\x1b[0m";
  const foreground = color ? _hexToAnsiForeground(color) : "";
  const background = backgroundColor ? _hexToAnsiBackground(backgroundColor) : "";
  return `${foreground}${background}${text}${ANSI_RESET}`;
};

HEX colors are converted to ANSI 24‑bit color codes. Works in modern terminals.

Compatibility

For more details, see Contributing.

Next: Learn how to contribute to ZTracer in Contributing.