DEV Community

Chintan Shah
Chintan Shah

Posted on

Your console.log deserves better

#logging #devtools #typescript #opensource

I kept copy-pasting the same logging code into every new project. Eventually I just packaged it up. It's called logfx — a tiny library that makes your console output a bit easier to read.

The problem I kept running into 

console.log('DEBUG: starting process')
console.log('INFO: connected')
console.log('ERROR: something broke')
Enter fullscreen mode Exit fullscreen mode

It works, but it's hard to scan. Everything looks the same.

A small improvement 

import { log } from 'logfx'

log.debug('Starting process')
log.info('Connected')
log.error('Something broke')
Enter fullscreen mode Exit fullscreen mode

Output:

🔍 DEBUG   Starting process
💡 INFO    Connected
🔴 ERROR   Something broke
Enter fullscreen mode Exit fullscreen mode

Just a bit of color and structure — but it makes a difference when you're debugging.

When logfx might help

logfx is a lightweight option for when you want:

  • Something simple — no config, just import and go
  • Readable dev logs — easier to scan in your terminal
  • A small footprint — ~2KB gzipped, zero dependencies
  • Quick projects — prototypes, scripts, side projects
  • Universal support — Node.js, browsers, Bun, Deno

What's inside

Lightweight

~2KB gzipped with zero dependencies. Tried to keep it minimal.

Nice defaults

Colors and structure out of the box — no setup needed.

TypeScript support

Built in TypeScript with full type inference.

Smart log levels

Debug logs auto-hide in production.

Transports

Console, file, webhook — in case you need to send logs somewhere.

A few examples

Namespaced loggers:

import { logger } from 'logfx'

const auth = logger('auth')
const db = logger('db')

auth.success('User logged in')  
// ✅ SUCCESS [auth] User logged in

db.info('Query executed')
// 💡 INFO [db] Query executed
Enter fullscreen mode Exit fullscreen mode

Timers:

import { time, timeEnd } from 'logfx'

time('api-call')
await fetch('/data')
timeEnd('api-call')  
// ⏱️ api-call: 245.32ms
Enter fullscreen mode Exit fullscreen mode

Pretty boxes:

import { box } from 'logfx'

box('Server running on port 3000', { title: 'Ready' })
Enter fullscreen mode Exit fullscreen mode 
╭─ Ready ─────────────────────────╮
│  Server running on port 3000    │
╰─────────────────────────────────╯
Enter fullscreen mode Exit fullscreen mode

Tables:

import { table } from 'logfx'

table([
  { name: 'John', role: 'Admin' },
  { name: 'Jane', role: 'User' },
])
Enter fullscreen mode Exit fullscreen mode 
┌─────────┬─────────┐
│ name    │ role    │
├─────────┼─────────┤
│ John    │ Admin   │
│ Jane    │ User    │
└─────────┴─────────┘
Enter fullscreen mode Exit fullscreen mode

JSON output:

import { createLogger, transports } from 'logfx'

const log = createLogger({
  transports: [transports.console({ format: 'json' })]
})

log.info('Request', { method: 'GET', path: '/api' })
// {"timestamp":"2025-12-18T...","level":"info","message":"Request","method":"GET","path":"/api"}
Enter fullscreen mode Exit fullscreen mode

Try it out 

npm install logfx
Enter fullscreen mode Exit fullscreen mode

Links

Top comments (0)