consoo

A set of helper functions for quick and dirty frontend debugging.

Usage

First, install the package:

npm install -D consoo
# or
pnpm install -D consoo

Then, import and initialize:

import { initConsoo } from "consoo";

initConsoo({
  // ... init options
});

consoo.log("foo");
consoo("bar").debug("baz");
// ...

If you use typescirpt:

import { initConsoo, type Consoo } from "consoo";

declare global {
  const so: Consoo;
}

initConsoo({
  alias: "so",
  // ... init options
});

so.log("foo");
so("bar").debug("baz");
// ...

Init options and the defaults:

initConsoo({
  noop: false, // if true, all methods will be no-op
  alias: "consoo", // string | string[], global access names, e.g. "so"
  defaultLogLevel: "info", // "info" | "warn" | "error" | "debug"
  prefix: undefined, // string | undefined, prefix for all messages
  markStyle: {
    padding: "2px",
  }, // mark css style
  markColors: [
    { bg: "#5151db", fg: "#fff" },
    { bg: "#5cc290", fg: "#fff" },
    { bg: "#860418", fg: "#fff" },
    { bg: "#dddddd", fg: "#000" },
    { bg: "#000000", fg: "#fff" },
    { bg: "#555555", fg: "#fff" },
    { bg: "#ff664d", fg: "#fff" },
    { bg: "#d4b475", fg: "#fff" },
    { bg: "#8f5465", fg: "#fff" },
    { bg: "#3fffff", fg: "#000" },
    { bg: "#7f4ac3", fg: "#fff" },
    { bg: "#fc9cff", fg: "#fff" },
  ], // mark color list
});

Helpers

console wrapper & message mark

• All console methods are also available in consoo object: log info warn error debug trace dir dirxml table group groupCollapsed groupEnd clear count countReset assert time timeLog timeEnd timeStamp profile profileEnd

• consoo can be called with a string or number first, which will be printed with a colored background, acting as a mark/tag for the following message.

consoo.log("foo");
consoo("mark").log("foo");

pause after delay

• Pause the script execution after a delay, can be useful when debugging hover-state ui or dom-changing issues.

• You may call it directly in devtools console.

consoo.pause(3000); // default delay is 0 ms

message separator

• Print a separator line in the console panel.

consoo.sep("=", 80); // (repeator?: string, len?: number) => void

inspect & trace & monitor

• Inspect (print to console) a variable or expression, return the value as is, can be useful when you don't borther to add a separate console.log line or re-type all the expression.

consoo.inspect(foo);
consoo.inspect("mark", foo + bar * baz); // you can add a mark too

• Print the call stack and arguments every time the specific function is called.

let foo = (a, b) => a + b;
foo = consoo.traceFn(foo);
foo(1, 2); // will print the call stack and arguments

• Print the call stack every time the specific object property is accessed (get or set).

consoo.traceProp(obj, "prop");

• Monitor the document.activeElement change.

consoo.monitorActiveElement(); // return a function to stop monitoring
consoo.stopMonitorActiveElement(); // or you can stop it directly

vconsole for mobile debugging

• Load and initialize vConsole (A simulated devtool for mobile web page) on the fly, without installing it as a dependency.

consoo.v(); // (VConsoleInitOption?: { theme: "dark" | "light" }) => void