# console美化

**Repository Path**: jares/console-prettier

## Basic Information

- **Project Name**: console美化
- **Description**: console美化
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-06
- **Last Updated**: 2026-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# console-prettier 🚀

> 零依赖、轻量级、纯原生拦截的前端控制台美化与组件打标利器。让你的浏览器日志告别凌乱，审美瞬间在线。

[![npm version](https://img.shields.io/npm/v/console-prettier.svg?style=flat-flat-square)](https://www.npmjs.com/package/console-prettier)
[![npm downloads](https://img.shields.io/npm/dm/console-prettier.svg?style=flat-flat-square)](https://www.npmjs.com/package/console-prettier)
[![License](https://img.shields.io/npm/l/console-prettier.svg?style=flat-flat-square)](#-贡献与反馈)

---

## ✨ 特性

- 🎯 **框架无关**：无视 Vue、React、Nuxt 或纯原生 JS，引入即生效。
- 🛡️ **底层无感拦截**：基于原生 `Object.defineProperty` / `bind` 深度拦截，无需手动调用特殊 API，继续使用你习惯的 `console.log`。
- 🏷️ **自动标签化（Tagify）**：优雅的胶囊高亮包裹，一眼在控制台中定位日志来源（如组件名、时间戳、环境）。
- 🪶 **极度轻量**：零第三方依赖，打包体积微乎其微。

---

## 📦 安装与引入 (Installation)

`console-prettier` 极其轻量且框架无关，你可以在工程化项目（Vue/React等）或传统的工程项目（纯网页）中无缝使用。

### 1. 现代化工程项目 (Vue / React / Nuxt / Vite 等)

使用你喜欢的包管理器将工程包拉取到本地：

```bash
npm install console-prettier --save
# 或者
yarn add console-prettier
# 或者
pnpm add console-prettier

**引入并激活：** 在项目的最核心入口文件（如 `main.js`、`main.ts` 或 `app.js`）的最顶部注入以下代码：

import 'console-beautifier'

```

#### 传统简单网页项目 (纯 HTML 页面)

如果你的项目是一个传统的、没有经过 Webpack/Vite 打包的简单 HTML 网页，可以直接通过 **CDN 链接** 或 **本地静态脚本** 引入。

##### 方法 A：通过 CDN 在线引入（最快）

在你的 HTML 文件的 `<head>` 标签或 `<body>` 底部，直接挂载 cdn 脚本。由于使用了标准的 global 模式打包，它会自动在全局注入一个 `ConsolePrettier` 对象：

HTML

```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的极简网页</title>
    
    <script src="https://cdn.jsdelivr.net/npm/console-prettier/dist/index.global.js"></script>
</head>
<body>
    <h1>打开控制台看魔法！</h1>

    <script>
        // 3. 正常像平时一样写 console.log 即可
        console.log('IndexPage', '简单网页引入成功！欢迎来到控制台。');
        console.warn('System', '这是一条带有美化标签的警告日志');
    </script>
</body>
</html>
```

##### 方法 B：下载到本地引入（离线/更稳妥）

1. 复制你项目打包出来的 `dist/index.global.js` 文件。
2. 放到你网页项目的静态资源目录中（例如 `./js/console-prettier.js`）。
3. 在 HTML 中完成本地引用：

HTML

```
<script src="./js/console-prettier.js"></script>
<script>
    console.log('IndexPage', '简单网页引入成功！欢迎来到控制台。');
</script>
```