dev-console-kit

v2.1.0

Published

16 days ago

The ultimate debugging toolkit for React & Next.js students. Features log levels, named loggers, useLogger hook, environment detection, mentor tips, component tracking, and CSS debugging.

Downloads

0High
0Medium
0Low

johnprice

logger debug debugger nextjs react education css-debugger mentor developer-tools console typescript learning log-levels

Dev Console Kit

A smart, colorful, and educational logging utility designed for React & Next.js students. It helps you debug faster, understand Server/Client environments, track component renders, and fix CSS layout issues instantly.

Features (v2.1.0)

Log Levels: Filter by debug < info < success < warning < error with setLevel() or configure({ level }).

React Hook: useLogger() from dev-console-kit/hooks — component-scoped logs, render tracking, mount/unmount.

Environment Detection: Automatically labels logs as [CLIENT] or [SERVER].

Configuration: configure() now actually applies showTimestamp, prefix, theme, and level.

Named Loggers: Logger.create('API') with the full API (time, inspect, per-logger setLevel).

Component Tracking: Track React component render cycles and performance.

Advanced CSS Debugging: Highlight padding, margins, overflow, and flexbox containers.

Mentor Tips: A random "Clean Code" tip in the console on every refresh (30+ categorized tips).

Pretty Logs: Color-coded success, error, warning, info, and debug messages.

Performance Tracking: Built-in timer functions to measure execution time.

Toggle Logging: Enable/disable all logs for production builds.

TypeScript Support: Full generic type definitions with enhanced type safety.

Installation

npm install dev-console-kit

yarn add dev-console-kit

React is an optional peer dependency. You only need it if you use useLogger.

import Logger from 'dev-console-kit';

Logger.success("dev-console-kit is working!");

🚨 Next.js Users - Important!

If you're using Next.js 13+ App Router, use the Provider pattern to ensure configuration works across all pages:

// app/providers.js
'use client';

import { useEffect } from 'react';
import { configure } from 'dev-console-kit';

export function LoggerProvider({ children }) {
  useEffect(() => {
    configure({
      enabled: process.env.NODE_ENV === 'development',
      persist: true // Saves to localStorage
    });
  }, []);
  
  return <>{children}</>;
}

// app/layout.js
import { LoggerProvider } from './providers';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <LoggerProvider>{children}</LoggerProvider>
      </body>
    </html>
  );
}

See examples/nextjs-usage.js for more details.

Usage

import Logger, { configure } from 'dev-console-kit';

1. Configuration

configure({
  enabled: process.env.NODE_ENV === 'development',
  showTimestamp: true,
  showTips: true,
  prefix: '[MY-APP]',
  theme: 'default', // 'default' | 'dark' | 'light'
  level: 'debug'    // 'debug' | 'info' | 'success' | 'warning' | 'error'
});

2. Log Levels (NEW in v2.1)

Messages below the active minimum are hidden. Hierarchy (most verbose → most severe):

debug < info < success < warning < error

Logger.setLevel('warning'); // only warning + error
Logger.debug('hidden');
Logger.info('hidden');
Logger.success('hidden');
Logger.warning('shown');
Logger.error('shown');

Logger.getLevel(); // 'warning'

configure({ level: 'error' }); // production: errors only

Named loggers can override the global level:

const api = Logger.create('API');
Logger.setLevel('error');
api.setLevel('debug'); // this logger still verbose

3. Named Loggers

const apiLogger = Logger.create('API');
const uiLogger = Logger.create('UI');

apiLogger.success("Request completed"); // [API] ✅ Request completed
uiLogger.error("Render failed");         // [UI] ❌ Render failed

apiLogger.time('fetchUsers');
apiLogger.inspect('payload', { id: 1 });
apiLogger.timeEnd('fetchUsers');

4. `useLogger()` Hook (NEW in v2.1)

Client Components only. Import from the hooks entry so the core package stays React-free:

'use client';
import { useLogger } from 'dev-console-kit/hooks';

function Checkout() {
  const log = useLogger('Checkout');

  log.success('ready');
  return <div>Checkout</div>;
}

By default this tracks renders and logs mounted / unmounted. Opt out if you want a quiet logger:

const log = useLogger('Checkout', {
  track: false,
  logLifecycle: false,
  props: { step: 2 }
});

5. Component Tracking

function MyComponent(props) {
  Logger.trackComponent('MyComponent', props);
  return <div>Hello</div>;
}

const stats = Logger.getComponentStats('MyComponent');
// { renderCount: 5, lastRender: 123.45, firstRender: 1.02 }

6. Smart Logging

Logger.success("User logged in successfully!");
Logger.error("API Connection Failed", { error: 500 });
Logger.warning("This component is deprecated.");
Logger.info("Application started on port 3000");
Logger.debug("Detailed debugging info", { state: "loading" });

Logger.success("User loaded", userData);

7. Performance Tracking

Logger.time("API Call");
await fetchUserData();
Logger.timeEnd("API Call"); // "API Call: 245.32ms"

8. Toggle Logging

if (process.env.NODE_ENV === 'production') {
  Logger.setEnabled(false);
}

setEnabled(false) silences everything. Prefer setLevel('error') if you still want failures in production.

9. Inspecting Data

const user = { id: 1, name: "John", role: "Admin" };
Logger.inspect("User Data", user);

10. Advanced CSS Layout Debugging

Logger.debugLayout();

Logger.debugLayout({
  showPadding: true,
  showMargin: true,
  highlightOverflow: true,
  showFlexbox: true
});

Tip: Call Logger.debugLayout() once, identify your layout issue, then remove the call.

API Reference

Core Logging Methods

`Logger.success<T>(msg, data?)`

Logs a success message with optional data.

`Logger.error<T>(msg, error?)`

Logs an error message with optional error details.

`Logger.warning(msg)`

Logs a warning message.

`Logger.info<T>(msg, data?)`

Logs an informational message with optional data.

`Logger.debug<T>(msg, data?)`

Logs a debug message (useful for verbose logging).

Configuration & Management

`configure(config)`

configure({
  enabled?: boolean;
  showTimestamp?: boolean;
  showTips?: boolean;
  prefix?: string;
  theme?: 'default' | 'dark' | 'light';
  level?: 'debug' | 'info' | 'success' | 'warning' | 'error';
  persist?: boolean;
})

`Logger.setEnabled(enabled)`

Enables or disables all logging.

`Logger.setLevel(level)` / `Logger.getLevel()`

Sets or reads the global minimum log level.

Advanced Features

`Logger.create(name)`

Creates a named logger (success, error, warning, info, debug, inspect, time, timeEnd, setLevel, getLevel).

`Logger.trackComponent<P>(componentName, props?)`

Tracks React component render cycles (client-side only).

`Logger.getComponentStats(componentName?)`

Gets component tracking statistics.

`useLogger(name, options?)`

From dev-console-kit/hooks. Returns a named logger tied to a React component.

Debugging Tools

`Logger.inspect<T>(label, object)`

Inspects and displays an object in a structured format.

`Logger.time(label)` / `Logger.timeEnd(label)`

Starts and ends a performance timer.

`Logger.debugLayout(options?)`

Activates CSS layout debugging mode (browser only).

Mentor Tips

The package includes 30+ categorized mentor tips covering React, Next.js, CSS, Performance, Clean Code, and Debugging. A random tip is displayed in the browser console on every refresh.

TypeScript Support

This package includes TypeScript definitions. No additional @types package needed.

import Logger from 'dev-console-kit';
import { useLogger } from 'dev-console-kit/hooks';

Logger.success("Fully typed!", { id: 1 });

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

ISC License - See LICENSE file for details.

Author

Murat Hüdavendigâr Öncü
Website
GitHub

Support

If you find this package helpful, please give it a ⭐️ on GitHub!

For issues and questions, visit the Issues page.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme