UnoCSS Inspector从零搭建纯 Vite 项目的按需原子 CSS 调试器【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss本文基于 UnoCSS 仓库中的 inspector-vite 示例讲解如何在“零 DevTools 依赖”的纯 Vite 应用中启用 UnoCSS Inspector包括最小工程结构、__unocss__调试路由、一次性解锁码机制以及让 Inspector 模块树覆盖全部.ts源码模块的content.pipeline配置读完后可直接在本地复现一个可完整分析 CSS 生成过程的调试环境。一、示例定位最小依赖的 Inspector 运行环境UnoCSS Inspector 是随unocss与unocss/vite一起打包的可视化调试工具见 packages-integrations/inspector/README.md官方工具说明位于 docs/tools/inspector.md。仓库提供了两个对比例子examples/inspector-vite本文主角纯 Vite 应用 UnoCSS不安装 Vite DevToolsInspector 以独立页面形式挂载在开发服务器的/__unocss/路由上examples/inspector-vite-devtools额外引入vitejs/devtoolsInspector 作为dock嵌在 DevTools 内且在 DevTools 宿主内自动信任、无需输入代码/__unocss/会重定向到 DevTools UI。纯 Vite 版本的价值在于验证“没有任何附加依赖时Inspector 的最小可用形态是什么”只需viteunocss插件即可工作。从源码结构看unocss/vite插件在初始化时默认注入 Inspectorpackages-integrations/vite/src/index.ts 中if (inlineConfig.inspector ! false)才启用即不加任何inspector: true配置也会自动开启这正是示例能“开箱即得”调试器的原因。二、启动步骤与一次性解锁码examples/inspector-vite/README.md 给出的完整操作流程只有两步pnpm install pnpm devdev脚本即 package.json 中定义的vite启动后访问http://localhost:5173/__unocss/关键机制开发服务器终端会打印一个一次性解锁码首次打开 Inspector 页面需输入该代码才能解锁examples/inspector-vite/README.md 明确说明 “the token is remembered per browser”令牌按浏览器记忆即解锁后同一浏览器内不再需要重复输入。应用首页 src/app.ts 中也内置了提示文案直接指向/__unocss/并提醒输入终端打印的一次性代码方便调试时快速入口。这一“终端取码 → 浏览器解锁”的设计使 Inspector 仅对本地开发者可见避免调试面板被公网直接访问。三、工程结构与关键配置3.1 Vite 插件接入vite.config.ts 是标准的单插件接入没有任何 Inspector 专属配置import UnoCSS from unocss/vite import { defineConfig } from vite export default defineConfig({ plugins: [ UnoCSS(), ], })3.2 UnoCSS 配置让 Inspector 看见全部模块uno.config.ts 是理解本示例的核心其中content.pipeline.include承担了“让 Inspector 模块树覆盖整个应用”的职责import presetAttributify from unocss/preset-attributify import presetIcons from unocss/preset-icons import presetWind3 from unocss/preset-wind3 import { defineConfig } from unocss export default defineConfig({ // This vanilla app keeps its markup in plain .ts modules, which UnoCSS // skips by default — opt them in so the inspectors module tree reflects // the whole app (and not just index.html). content: { pipeline: { include: [/\.(vue|svelte|[jt]sx|mdx?|astro|html)($|\?)/, /\.[jt]s($|\?)/], exclude: [/\.css($|\?)/, /node_modules/], }, }, shortcuts: { btn: px-4 py-2 rounded bg-teal-600 text-white hover:bg-teal-700 cursor-pointer, text-title: text-2xl font-bold, }, presets: [ presetWind3(), presetAttributify(), presetIcons(), ], })逐项说明content.pipeline.include默认情况下 UnoCSS 不会扫描纯.ts模块而本示例是 vanilla 应用HTML 标记全部写在.ts模块的模板字符串里如 src/components/button.ts 返回button classbtn、src/app.ts 返回整页布局。因此显式加入/\.[jt]s($|\?)/规则把.js/.ts纳入提取管道Inspector 的模块树才能反映整个应用而不只是index.html——这正是配置内注释强调的动机。exclude排除.css与node_modules避免无效扫描。shortcuts定义了btn与text-title两个快捷类。快捷类是 Inspector 调试的典型对象页面中一个btn类背后对应多条原子规则的展开可在 Inspector 中观察其解析结果。presetspresetWind3提供 Tailwind 风格工具类presetAttributify支持属性化语法presetIcons提供图标类覆盖了常用调试场景。3.3 依赖构成package.json 中所有 UnoCSS 相关包均以link:../../...指向仓库内的 workspace 包packages-engine/core、packages-presets/unocss、各 preset 目录依赖vite ^8.2.1。scripts仅三个devvite、buildvite build、previewvite preview与 README 的操作流程一一对应。四、与 DevTools 版差异速查维度纯 Vite 版本文Vite DevTools 版额外依赖无vitejs/devtoolsdevtools: true入口直接访问/__unocss/访问/__devtools/选择UnoCSSdock解锁终端打印的一次性代码浏览器级记忆DevTools 宿主内自动信任无代码提示/__unocss/行为Inspector 页面本体重定向到 DevTools UI静态构建常规vite build构建时烘焙静态 DevTools 导出含预计算的 RPC dump可查看项目总览与逐模块分析无需 dev server从源码结构看Inspector 的服务端逻辑位于 packages-integrations/inspector/srcindex.ts、devframe.ts、rpc.ts、analyzer.ts等Vite 插件负责将其挂到开发服务器路由上示例层的 README 与配置则完整演示了“接入 → 取码解锁 → 分析模块”的最短路径。五、小结纯 Vite 场景下启用 Inspector不需要任何显式配置UnoCSS()插件默认开启通过http://localhost:5173/__unocss/访问输入终端打印的一次性代码解锁令牌按浏览器记忆若应用标记写在非 HTML 模块如本例的.ts模板字符串需用content.pipeline.include显式纳入/\.[jt]s($|\?)/否则 Inspector 的模块树与生成结果都会不完整需要更集成式体验时可切换到 examples/inspector-vite-devtools获得 dock 内嵌与静态 RPC dump 能力。【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 UnoCSS Inspector：从零搭建纯 Vite 项目的按需原子 CSS 调试器
UnoCSS Inspector从零搭建纯 Vite 项目的按需原子 CSS 调试器【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss本文基于 UnoCSS 仓库中的 inspector-vite 示例讲解如何在“零 DevTools 依赖”的纯 Vite 应用中启用 UnoCSS Inspector包括最小工程结构、__unocss__调试路由、一次性解锁码机制以及让 Inspector 模块树覆盖全部.ts源码模块的content.pipeline配置读完后可直接在本地复现一个可完整分析 CSS 生成过程的调试环境。一、示例定位最小依赖的 Inspector 运行环境UnoCSS Inspector 是随unocss与unocss/vite一起打包的可视化调试工具见 packages-integrations/inspector/README.md官方工具说明位于 docs/tools/inspector.md。仓库提供了两个对比例子examples/inspector-vite本文主角纯 Vite 应用 UnoCSS不安装 Vite DevToolsInspector 以独立页面形式挂载在开发服务器的/__unocss/路由上examples/inspector-vite-devtools额外引入vitejs/devtoolsInspector 作为dock嵌在 DevTools 内且在 DevTools 宿主内自动信任、无需输入代码/__unocss/会重定向到 DevTools UI。纯 Vite 版本的价值在于验证“没有任何附加依赖时Inspector 的最小可用形态是什么”只需viteunocss插件即可工作。从源码结构看unocss/vite插件在初始化时默认注入 Inspectorpackages-integrations/vite/src/index.ts 中if (inlineConfig.inspector ! false)才启用即不加任何inspector: true配置也会自动开启这正是示例能“开箱即得”调试器的原因。二、启动步骤与一次性解锁码examples/inspector-vite/README.md 给出的完整操作流程只有两步pnpm install pnpm devdev脚本即 package.json 中定义的vite启动后访问http://localhost:5173/__unocss/关键机制开发服务器终端会打印一个一次性解锁码首次打开 Inspector 页面需输入该代码才能解锁examples/inspector-vite/README.md 明确说明 “the token is remembered per browser”令牌按浏览器记忆即解锁后同一浏览器内不再需要重复输入。应用首页 src/app.ts 中也内置了提示文案直接指向/__unocss/并提醒输入终端打印的一次性代码方便调试时快速入口。这一“终端取码 → 浏览器解锁”的设计使 Inspector 仅对本地开发者可见避免调试面板被公网直接访问。三、工程结构与关键配置3.1 Vite 插件接入vite.config.ts 是标准的单插件接入没有任何 Inspector 专属配置import UnoCSS from unocss/vite import { defineConfig } from vite export default defineConfig({ plugins: [ UnoCSS(), ], })3.2 UnoCSS 配置让 Inspector 看见全部模块uno.config.ts 是理解本示例的核心其中content.pipeline.include承担了“让 Inspector 模块树覆盖整个应用”的职责import presetAttributify from unocss/preset-attributify import presetIcons from unocss/preset-icons import presetWind3 from unocss/preset-wind3 import { defineConfig } from unocss export default defineConfig({ // This vanilla app keeps its markup in plain .ts modules, which UnoCSS // skips by default — opt them in so the inspectors module tree reflects // the whole app (and not just index.html). content: { pipeline: { include: [/\.(vue|svelte|[jt]sx|mdx?|astro|html)($|\?)/, /\.[jt]s($|\?)/], exclude: [/\.css($|\?)/, /node_modules/], }, }, shortcuts: { btn: px-4 py-2 rounded bg-teal-600 text-white hover:bg-teal-700 cursor-pointer, text-title: text-2xl font-bold, }, presets: [ presetWind3(), presetAttributify(), presetIcons(), ], })逐项说明content.pipeline.include默认情况下 UnoCSS 不会扫描纯.ts模块而本示例是 vanilla 应用HTML 标记全部写在.ts模块的模板字符串里如 src/components/button.ts 返回button classbtn、src/app.ts 返回整页布局。因此显式加入/\.[jt]s($|\?)/规则把.js/.ts纳入提取管道Inspector 的模块树才能反映整个应用而不只是index.html——这正是配置内注释强调的动机。exclude排除.css与node_modules避免无效扫描。shortcuts定义了btn与text-title两个快捷类。快捷类是 Inspector 调试的典型对象页面中一个btn类背后对应多条原子规则的展开可在 Inspector 中观察其解析结果。presetspresetWind3提供 Tailwind 风格工具类presetAttributify支持属性化语法presetIcons提供图标类覆盖了常用调试场景。3.3 依赖构成package.json 中所有 UnoCSS 相关包均以link:../../...指向仓库内的 workspace 包packages-engine/core、packages-presets/unocss、各 preset 目录依赖vite ^8.2.1。scripts仅三个devvite、buildvite build、previewvite preview与 README 的操作流程一一对应。四、与 DevTools 版差异速查维度纯 Vite 版本文Vite DevTools 版额外依赖无vitejs/devtoolsdevtools: true入口直接访问/__unocss/访问/__devtools/选择UnoCSSdock解锁终端打印的一次性代码浏览器级记忆DevTools 宿主内自动信任无代码提示/__unocss/行为Inspector 页面本体重定向到 DevTools UI静态构建常规vite build构建时烘焙静态 DevTools 导出含预计算的 RPC dump可查看项目总览与逐模块分析无需 dev server从源码结构看Inspector 的服务端逻辑位于 packages-integrations/inspector/srcindex.ts、devframe.ts、rpc.ts、analyzer.ts等Vite 插件负责将其挂到开发服务器路由上示例层的 README 与配置则完整演示了“接入 → 取码解锁 → 分析模块”的最短路径。五、小结纯 Vite 场景下启用 Inspector不需要任何显式配置UnoCSS()插件默认开启通过http://localhost:5173/__unocss/访问输入终端打印的一次性代码解锁令牌按浏览器记忆若应用标记写在非 HTML 模块如本例的.ts模板字符串需用content.pipeline.include显式纳入/\.[jt]s($|\?)/否则 Inspector 的模块树与生成结果都会不完整需要更集成式体验时可切换到 examples/inspector-vite-devtools获得 dock 内嵌与静态 RPC dump 能力。【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考