npm library

Log with scope.
Filter without noise.

Tag your logs per file, filter them in real time, and watch them stream into a sleek in-page panel — without opening DevTools.

zero dependencies framework agnostic TypeScript ready zero cost in production shadow DOM panel

How it works

Init once

Call initConsole() at your entry point. The panel mounts and starts listening immediately.

Create scoped loggers

Call useLogger('MyScope') per file. Every log is tagged with that scope automatically.

Filter in the panel

Toggle scopes and levels. Logs still appear in DevTools too — nothing changes about your existing workflow.

Ships as zero bytes

In production, everything is replaced with no-ops via export conditions. No tree-shaking config needed.

Usage

main.js / main.ts js

import { initConsole } from '@bajzik/scoped-console'
initConsole()

UserProfile.vue ts

import { useLogger } from '@bajzik/scoped-console'

const logger = useLogger('UserProfile')

async function fetchUser(id: string) {
  logger.info('fetching', id)
  try {
    await userStore.fetch(id)
    logger.log('done')
  } catch (err) {
    logger.error('failed', err)
  }
}

OrderView.vue js

import { useLogger } from '@bajzik/scoped-console'
const logger = useLogger('OrderView')

export default {
  mounted() { logger.log('mounted') },
  methods: {
    async fetchOrder(id) {
      logger.info('fetching', id)
      try {
        const order = await this.$http.get(`/orders/${id}`)
        logger.log('loaded', order)
      } catch (err) {
        logger.error('failed', err)
      }
    }
  }
}

api.js js

import { useLogger } from '@bajzik/scoped-console'
const logger = useLogger('service:api')

export async function getUser(id) {
  logger.info('GET /users/', id)
  const res = await fetch(`/api/users/${id}`)
  if (!res.ok) {
    logger.error('request failed', res.status)
    throw new Error('fetch failed')
  }
  return res.json()
}

Scope naming convention — prefix with context for clarity: component:UserProfile · store:cart · service:api

The panel

Renders at the bottom of the page in a shadow DOM container. Toggle scopes and levels interactively. All state persists to localStorage.

Scopes

Level

12:04:01 log OrderView mounted

12:04:02 info service:api GET /orders/ 42

12:04:02 info UserProfile fetching user abc-123

12:04:03 warn service:api slow response — 1240ms

12:04:03 log UserProfile done

12:04:04 error OrderView request failed — 404 Not Found

12:04:04 debug UserProfile raw payload { id: "abc-123", role: "admin" }

Features

🏷

Scope colors

Each scope gets a unique consistent color derived from its name — visible on tabs and log entries.

📍

Source location

Exact file, line, and column via stack trace parsing. No guessing where a log came from.

🎨

Object highlighting

Objects and arrays render with colored keys, strings, numbers, and booleans — DevTools-style.

↕

Resizable columns

Drag dividers to resize time, level, scope, and file columns. Sizes persist to localStorage.

🔒

Shadow DOM

The panel is encapsulated in shadow DOM so your app styles never bleed into it — or vice versa.

🚀

Zero prod cost

Export conditions stub everything out in production. Works in Vite, webpack 5, Rollup, esbuild.

API

function	description
initConsole(config?)	Initialize the library. Call once before anything else. `config.mount` defaults to `'body'`.
useLogger(scope)	Returns a scoped logger with `log`, `info`, `warn`, `error`, `debug` methods. Re-asserts scope before every call — safe in async contexts.
destroyConsole()	Restore the original `console` and remove the panel from the DOM.

Changelog

1.0.0

First stable release

0.5.2

Improved stack trace parsing — removed <anonymous> from internal frame filtering for more accurate source location

0.5.1

Panel UI encapsulated in shadow DOM — no more style conflicts with the host application

0.5.0

Line and column tracking — each log shows the exact source location where it was called

DevTools-like syntax highlighting for objects and arrays in the panel

0.4.0

Source file column — auto-detected via stack trace parsing

Scope colors — unique consistent color per scope name

Resizable columns with localStorage persistence

0.3.0

Production build stubs via package export conditions — zero bundle cost, no config required

0.2.0

Replaced defineScope with useLogger — fixes async timing issues in reactive frameworks

0.1.0

Initial release — scoped logging, in-page panel, scope/level filtering, localStorage persistence

Log with scope.Filter without noise.