console.dir

console.dir

An enhanced console.dir method for beautiful object printing in browsers and Node.js with perfect support for Chinese characters.

Features

• 🌐 Cross-platform support: works in both browser and Node.js environments
• 📝 Full TypeScript type support
• 🌏 Perfect support for mixed Chinese and English content
• 📦 Enhanced object visualization with proper indentation
• 🔗 Automatically enhances native console.dir method
• 🔄 Handles circular references gracefully
• 🎨 Beautiful formatting for nested objects and arrays

Installation

npm install console.dir

Quick Start

1. In Node.js

// Enhance console.dir automatically
require('console.dir');

const data = {
  name: 'Zhang San',
  age: 25,
  city: 'Beijing',
  skills: ['JavaScript', 'TypeScript'],
  address: {
    street: '123 Main St',
    country: 'China'
  }
};

console.dir(data);

2. In TypeScript

import 'console.dir'; // Automatically enhances console object

interface User {
  name: string;
  age: number;
  city: string;
  skills: string[];
  address: {
    street: string;
    country: string;
  }
}

const data: User = {
  name: 'Zhang San',
  age: 25,
  city: 'Beijing',
  skills: ['JavaScript', 'TypeScript'],
  address: {
    street: '123 Main St',
    country: 'China'
  }
};

console.dir(data);

3. In Browser

UMD Version (Recommended)

<!-- Include UMD version -->
<script src="node_modules/console.dir/dist/index.js"></script>
<script>
  const data = {
    name: 'John',
    age: 30,
    city: 'New York',
    hobbies: ['Reading', 'Swimming'],
    contact: {
      email: '[e-mail]',
      phone: '123-456-7890'
    }
  };
  
  console.dir(data);
</script>

ES Module Usage

import 'console.dir';

const data = {
  name: 'John',
  age: 30,
  city: 'New York',
  hobbies: ['Reading', 'Swimming'],
  contact: {
    email: '[e-mail]',
    phone: '123-456-7890'
  }
};

console.dir(data);

Features

Beautiful Object Formatting

The enhanced console.dir method provides beautifully formatted output for objects and arrays with proper indentation:

{
  name: "Zhang San"
  age: 25
  city: "Beijing"
  skills: Array(2) [
    0: "JavaScript"
    1: "TypeScript"
  ]
  address: {
    street: "123 Main St"
    country: "China"
  }
}

Circular Reference Handling

Gracefully handles circular references without causing infinite loops:

const obj = { name: 'Test' };
obj.self = obj;
console.dir(obj);
// Output:
// {
//   name: "Test"
//   self: [Circular Reference]
// }

Special Value Support

Properly formats special JavaScript values:

• null and undefined
• Functions as [Function]
• Custom objects with constructor names
• Dates, regexes, and other built-in objects

How It Works

This package enhances the native console.dir method to provide better visualization of JavaScript objects. For simple values (strings, numbers, etc.), it falls back to the native implementation. For objects and arrays, it provides a beautifully formatted output with proper indentation.

The enhanced method:

• Preserves all native console.dir functionality
• Provides improved visualization for complex objects
• Handles circular references gracefully
• Works in both browser and Node.js environments
• Supports mixed Chinese and English content

API

console.dir(data[, options])

Enhanced version of the native console.dir method.

• data - The data to display
• options - Options for display (reserved for future use)

For non-object data types (strings, numbers, booleans, etc.), the native implementation is used. For objects and arrays, the enhanced formatting is applied.

Examples

Simple Object

const user = {
  name: 'Alice',
  age: 30,
  active: true
};

console.dir(user);
// Output:
// {
//   name: "Alice"
//   age: 30
//   active: true
// }

Nested Object

const company = {
  name: 'Tech Corp',
  founded: 2010,
  employees: [
    { name: '张三', position: 'Developer' },
    { name: '李四', position: 'Designer' }
  ],
  address: {
    city: '北京',
    country: 'China'
  }
};

console.dir(company);
// Output:
// {
//   name: "Tech Corp"
//   founded: 2010
//   employees: Array(2) [
//     0: {
//       name: "张三"
//       position: "Developer"
//     }
//     1: {
//       name: "李四"
//       position: "Designer"
//     }
//   ]
//   address: {
//     city: "北京"
//     country: "China"
//   }
// }

Array

const products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Mouse', price: 25 }
];

console.dir(products);
// Output:
// Array(2) [
//   0: {
//     name: "Laptop"
//     price: 1200
//   }
//   1: {
//     name: "Mouse"
//     price: 25
//   }
// ]

Browser Support

The package works in all modern browsers that support:

• console.log
• ES6 features (WeakSet, arrow functions, template strings, etc.)

Node.js Support

The package works in Node.js versions that support:

• ES6 features
• console.log

TypeScript Support

Full TypeScript support is provided with type definitions included. No additional typings need to be installed.

Contributing

• Fork it!
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request