console-prettier 🚀

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

✨ 特性

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

📦 安装与引入 (Installation)

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

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

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

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>