# console.dir

**Repository Path**: nodets/console.dir

## Basic Information

- **Project Name**: console.dir
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-08
- **Last Updated**: 2025-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 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

```bash
npm install console.dir
```

---

## Quick Start

### 1. In Node.js

```javascript
// 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

```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)

```html
<!-- 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: 'john@example.com',
      phone: '123-456-7890'
    }
  };
  
  console.dir(data);
</script>
```

#### ES Module Usage

```javascript
import 'console.dir';

const data = {
  name: 'John',
  age: 30,
  city: 'New York',
  hobbies: ['Reading', 'Swimming'],
  contact: {
    email: 'john@example.com',
    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:

```javascript
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:
1. Preserves all native `console.dir` functionality
2. Provides improved visualization for complex objects
3. Handles circular references gracefully
4. Works in both browser and Node.js environments
5. 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

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

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

### Nested Object

```javascript
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

```javascript
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

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request

---