MARS TECH

@mars-tech/vite-debug-pluginA global $debug() in dev, gone in production

An open-source Vite plugin by MARS TECH. One call prints in the browser console and in the Vite terminal, then disappears from your production build, arguments included.

Dual output
Every call renders in the browser console (styled) and in the Vite terminal (ANSI), with per-level colors, a tag and the source location.
How it works
Live browser inspection
Objects, class instances, DOM nodes and Error stacks stay interactive in the browser console, just like console.log.
Live object inspection
Vue DevTools
In Vue and Nuxt apps, every $debug call also appears in a MARS-TECH timeline layer and inspector inside Vue DevTools, with its payload and source location, once @vue/devtools-api is installed.
Vue DevTools
Zero production cost
Every $debug(...) call, method and chained forms included, is rewritten to void 0 at build time and tree-shaken away. Argument expressions never run.
Production builds
Ready for SSR
The global is installed on the server too, so router guards, store actions and page setup can log during server-side rendering.
Server-side rendering
Namespaces and runtime filtering
Scoped loggers with $debug.ns('auth'). Choose what shows at runtime with enable, disable or setLevel, the ?mt-debug= URL parameter, localStorage or the MT_DEBUG variable, with no restart.
Namespaces and filtering
Secret redaction
A safety net for a secret that slips into a log: mask tokens, email addresses and your own patterns. A pattern for a secret's shape masks the browser console too; a value you list as a string is masked on the server side and never sent to the page.
Redacting secrets
Utility helpers
console-style helpers: assert, time/timeEnd, count, group/groupEnd, table and dir, stripped from production builds like the base calls.
Utility helpers
Library authoring
library.debugBuild ships a dual variant: your library logs in development and is stripped from production builds.
Library authoring
TypeScript and ESLint ready
Global types ship in /client for every module-resolution mode, and /eslint provides a flat config that declares the $debug global.
Quickstart

Install

npmpnpmyarn

npm install -D @mars-tech/vite-debug-plugin

pnpm add -D @mars-tech/vite-debug-plugin

yarn add -D @mars-tech/vite-debug-plugin

Then register the plugin in vite.config.ts:

// vite.config.ts
import { defineConfig } from "vite";
import mtDebug from "@mars-tech/vite-debug-plugin";

export default defineConfig({
  plugins: [mtDebug()],
});

Register it unconditionally, in the top-level plugins array: during vite build the plugin is what strips the $debug calls. The Quickstart adds the global type and the ESLint configuration.

How it works

The demo below follows a Vue app through three pages. Each line starts with MARS-TECH, the default prefix of this MARS TECH plugin; the prefix option replaces it with your own.

Demo Vue app, Home page scrolled down: the end of a Vue DevTools smoke-test card with one button per payload type, then the Pinia counter card showing count: 2 after two clicks on +1. — How the plugin works, in 3 steps: the same $debug() calls printed in the browser console and in the Vite terminal.

Demo Vue app, About page: an Options API showcase card listing lifecycle hooks, a watcher, an async method and a computed label; after a click on Fire delayed (500 ms), the status reads fired ×1. — How the plugin works, in 3 steps: the same $debug() calls printed in the browser console and in the Vite terminal.

The How it works guide walks through the same flow and explains what happens to each call in a production build.

@mars-tech/vite-debug-pluginA global $debug() in dev, gone in production

Install​

How it works​

Install

How it works