Enhanced console.dir for beautiful object printing in browsers and Node.js
console.dir method for beautiful object printing in browsers and Node.js with perfect support for Chinese characters.
console.dir method
bash
npm install console.dir
`
---
Quick Start
$3
`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);
`
$3
`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
#### UMD Version (Recommended)
`html
`
#### 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
$3
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"
}
}
`
$3
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]
// }
`
$3
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
$3
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
$3
`javascript
const user = {
name: 'Alice',
age: 30,
active: true
};
console.dir(user);
// Output:
// {
// name: "Alice"
// age: 30
// active: true
// }
`
$3
`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"
// }
// }
`
$3
`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`