vite-plugin-console-log-advanced

Zero-dependency Vite plugin for advanced dev logging. Pretty grouped console output, caller info, log levels, CSS styling — silent in production. Configure once in vite.config.js, use console.logger everywhere.

Features

• No imports in app code — plugin injects init into your entry
• console.logger with .debug / .info / .warn / .error
• Auto caller info: file, line, function
• Log level filtering, %c CSS themes, smart value formatting
• Production-safe — logger code stripped at build time

Install

npm i vite-plugin-console-log-advanced

Requires Vite 5+.

Quick start

1. Plugin (vite.config.js)

import { defineConfig } from 'vite'
import consoleLogAdvanced from 'vite-plugin-console-log-advanced'

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

2. Log anywhere

console.logger('user', { id: 1, name: 'Ada' })
console.logger.debug('cache', cacheKey)
console.logger.warn('api', response, { comment: 'slow response' })
console.logger.error('fetch', error)
console.logger.table('users', users)

Configuration

All options go in vite.config.js:

consoleLogAdvanced({
  // Plugin
  inject: true,
  injectEntries: ['src/main.ts'],
  injectPattern: '**/bootstrap.{ts,js}',
  warnInProduction: true,

  // Logger
  logLevel: 'debug',
  collapsed: true,
  showPath: true,
  showLine: true,
  showFunction: true,
  showType: true,
  time: true,
  timestampFormat: 'locale',

  cssStyles: {
    debug: 'color:#8b5cf6',
    info: 'color:#0284c7',
    warn: 'color:#d97706;font-weight:700',
    error: 'color:#dc2626;font-weight:700',
  },
})

| Option | Default | Description | |--------|---------|-------------| | inject | true | Auto-inject into app entries | | injectEntries | [] | Extra entry globs | | injectPattern | — | Glob or RegExp for injection | | warnInProduction | true | One-time prod warning | | logLevel | 'debug' | Minimum level to print | | collapsed | true | Collapse console groups | | showPath / showLine / showFunction | true | Caller info fields | | showType | true | Show value type | | time | true | Show timestamp | | timestampFormat | 'locale' | locale · iso · time-only · date-only | | cssStyles | built-in | %c CSS per level |

Per-call options

console.logger('payload', data, {
  level: 'warn',
  comment: 'after mutation',
  collapsed: false,
  enabled: true,
  path: 'src/App.vue',
  line: 42,
  function: 'onSubmit',
})

Examples

API response

const users = await fetch('/api/users').then((r) => r.json())
console.logger.info('users', users, { comment: 'GET /api/users' })

Error handling

try {
  await saveProfile(form)
} catch (error) {
  console.logger.error('saveProfile', error)
}

Map / Set

console.logger.debug('cache', new Map([['user:1', user]]))

Node.js (without Vite)

import log from 'vite-plugin-console-log-advanced/logger'

log.info('server', { port: 3000 })

import { attachToConsole, createLogger } from 'vite-plugin-console-log-advanced/logger'

attachToConsole(
  createLogger({
    dev: process.env.NODE_ENV !== 'production',
    logLevel: 'info',
  }),
)

How it works

1. Plugin config sets compile-time flags from Vite mode and serializes logger options as JSON.
2. Virtual module virtual:vite-plugin-console-log-advanced imports the logger runtime and attaches console.logger.
3. transform prepends the virtual import to Rollup entry files.
4. In production builds, dead-code elimination removes logger bodies.

Development

npm run build
npm run dev      # watch
npm test

License

MIT — Amir Maghami

See CHANGELOG.md for release history.