# @cssints/devtools 中文文档

规范地址：https://npmcn.com/package/%40cssints/devtools/

版本：0\.35\.1
npm 元数据更新时间：2026-11-07T14:55:52.307Z
中文译文更新时间：2026-11-11T03:35:56.752Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cssints/devtools
原文对照：https://npmcn.com/package/%40cssints/devtools/?lang=original
项目主页：https://cssints.dev/
源码仓库：https://github.com/alexeiaccio/css-in-ts-compiler

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：414 kB，25 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：3 个
- peer 依赖：cssints ^0\.35\.0
- 首次发布：2026-10-10T20:57:54.098Z
- 最新版本发布：2026-11-07T14:55:51.916Z
- 近 30 天下载量：7777（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：43（近 12 个月 43 个）

## 中文简介

Cssints 的 Dev 覆盖检查器: 一个元素的类, 由调用它们, 工作表的级联, 对照浏览器检查

## 安装

```sh
npm install @cssints/devtools
```

也可以使用：`pnpm add @cssints/devtools`、`yarn add @cssints/devtools`、`bun add @cssints/devtools`

## README

# @ cssints/ devtools (英语)

一个csints的 Dev 覆盖检查者, 建立在 Dev 服务器对每个类的了解之上: 一个元素的类分组 编辑 `css.*` 根据表单本身的规则(层次、具体性、顺序、 每个赢家都对照浏览器的计算样式.

```ts
// vite.config.ts of the app; @cssints/devtools in its devDependencies
import cssints from "cssints/vite";
import { defineConfig } from "vite";

export default defineConfig({ plugins: [cssints({ devtools: true })] });
```

备选案文+Shift+C或 `cssints` 按钮(右下方)打开。 Hover 预览一个元素,点击即可选择它; QQ 父, 第一个孩子,兄弟姐妹;埃斯克停止采摘,然后关闭。 面板头的4个按钮( QQ QQ ) 已停放 左、上、下或右 (默认); 拖动其内边缘的条以调整其大小(至少200 px, 和一条 页面将保留)。 边和两个尺寸都放在里面 `localStorage` (单位:千美元)`cssints-devtools:dock`按来源计算。 小组 盖起旁边的一页,取出其余一页的作品;一页不被推开. 按钮解开 面板进入自己的窗口(`window.open`,一个同源的弹出,而不是文档 Picture API: 一个是铬。 相同的面板:页接取(翻接、点击、突出),窗口接取 所选元素为活. 关闭窗口, 重复 QQ 或一个接线按钮将面板放回; Esc 和 `cssints` 按钮 关闭两个。 选择保留在码头上,下一次打开(点击或快捷键:弹出需要)打开 窗口。 如果浏览器屏蔽了弹出,接驳面板会这么说. 面板和级联规则如下: docs/API.md,"调试:devtools overlay";在docs/research/devtools.md中的设计"我们的devtools".

## 规则

-   **只有德夫,除非问.** `devtools: true` 添加插件为 `apply: "serve"`: HTML 脚本标记,模块 `virtual:cssints/devtools` 和2起高棉河流域事件`cssints:devtools:get` → `cssints:devtools`,以及 `cssints:devtools:stale` 每次变换后). 一个建筑没有它.
-   **在一个建筑中: `devtools: "build"`。 。 。 .** 表格是JSON的资产, 覆盖自己的一块, 条目持有装入器 联合国 `cssints` 按钮和 Alt+Shift+C。 第一个打开的负载都一样;一个呼叫显示为 `file:line` 及其来源,无链接 给编辑 桌子上没有建造它的机器的路径. 大小由建筑记录(这个站点:表70 kB, 重叠190kB,条目+0.85kB.
-   **可读课,只读.** Dev 服务器添加 `cs-<owner>[-<label>]` 改为每个 `cn(...)` 财务报告和审定财务报表 `cv({...})`数字 : `const logo = cn(...)` 内部 `function Landing()` 给 `cs-Landing-logo`在顶部 `landing/page.ts` `cs-page-logo`, (中文(简体) ), `<div class={cn(...)}>` 内 `Button` `cs-Button`面板显示它首先在酒吧和悬浮处 标签; 提示 `Classes:` 线条列出它。 它不在桌子、床单或散列上,一座建筑没有. docs/API.md,"调试:devtools overlay".
-   **数据是编译器的.** 表格按服务器制作的表格,每个类的规则,插件, 标志和地点, 和每个呼叫的地方。 核心解析工作表; 它从不读取页面的 CSSOM cssints的规则.
-   **浏览器决定条件.** 规则`@media`, (中文(简体) ), `@container`, (中文(简体) ), `@supports`, (中文(简体) ), `@scope`)被评价 以探测表表示元素 `Element.matches`。 。 。 .
-   **胜者被检查,没有声称.** 无子克隆人到位后, 获胜者会内入; 当其计算值时 不同, 面板命名原因( 内置样式、 另一工作表的规则、 未分层的规则、 动画) 或标记 未验证的布局依赖值。 一个自定义属性会随其声明一并检查,因为它的页表有 它,因为一个变压器(LightningCSS)重印它,而一个未注册的又按所写的符号计算.
-   **孤立无援.** 一个带有阴影根的自定义元素和它自己的csints工作表,它被建在前面 `dist/overlay.js` (Solid, Effect and the core bunded):一个应用程序既不需要Solid,也不需要第二个CSS文件. 其风格中没有符号 : `@property` 在阴影根中被忽略.

## 询问 OpenCode

```ts
// dev only, off by default; @opencode/client in the app's devDependencies
cssints({ devtools: true, opencode: true });
cssints({ devtools: true, opencode: { agent: "build", skills: ["cssints"] } });
```

面板有 OpenCode 框,只要选项打开、选取与否。 它被钉在地上: 左或右码头,位于其右边缘(20雷姆宽至检查所右侧)上或下码头 窗口外形旁的分出窗(宽于高:右边缘);旁边的检查会滚动,盒子不会. 框有标题行( Q)`OpenCode`和点 `connected` 或者说 `not connected`),输入(Enter发送,Shift+) 输入为 a 和1个状态线:

-   未连接: 如何连接 。 开始 OpenCode(或 `opencode serve --service`运行 `/cssints-devtools` (a) 届会 dev 服务器自己找到运行中的服务; 没有附加会话的提示打开寄存器中的新会话 文件夹; `@opencode/client` 一定在应用程序的依赖性。 当服务器有自己的消息( 客户端不是) 已安装),随即进行.
-   已连接 : `connected to <service address> · attached session <id> · <state>`,或 `no session attached: a prompt starts a new one`编号为会话 `/cssints-devtools` 附于此 dev 服务器( 已运行; 完整的 id 是标题) 状态 `running`, (中文(简体) ), `completed`, (中文(简体) ), `failed` 或者说 `interrupted`。 。 。 .

该页面询问dev服务器在面板打开时是否找到一个服务(一个探测器:它看起来,没有创建会话),何时 框会获得焦点, 并在一个没有找到的发件后, 因此启动 OpenCode 后会出现, 无需重新装入 .

### 命令 `/cssints-devtools`

框不选择会话: OpenCode 命令将其运行的会话附加到 dev 服务器上. 插件为 此软件包的主要条目, 因此 OpenCode 按软件包名称加载( 检查于 2. 0.27 : 它安装软件包并找到) 条目; 包子路径, `@cssints/devtools/opencode`,不装入为插件 :

```jsonc
// opencode.jsonc of the repository of the app (or ~/.config/opencode/opencode.jsonc)
{ "plugins": ["@cssints/devtools"] }
```

或者,随着软件包安装在应用程序中,寄存器的文件(OpenCode加载 `.ts` 文档 `.opencode/plugins/`:

```ts
// .opencode/plugins/cssints-devtools.ts
export { default } from "@cssints/devtools/opencode";
```

然后,在 OpenCode 会话中:

-   `/cssints-devtools`: 此仓库的一个 dev 服务器 `opencode` 运行:此会话附在它上。 几个 运行:它们被列出(id,地址,root),没有附加。 无:据其说.
-   `/cssints-devtools <id or part of it>` 选择一个(ID是相对于寄存器的维特根, `/` 作为 `-`这样 `docs` 选择 `apps-docs`(三); `/cssints-devtools off [id]` 解析此会话( 或服务器) .

每项结果都是本届会议上发出的信息(第2段)`ctx.session.synthetic`,这也让模型转而承认它). 这个 附加服务器面板的提示发送到此会话, 而此会话不会再次创建; 一个会话已经消失 发送失败的消息, 上面写着要运行 `/cssints-devtools` 再来一次 约会是文件,不是路线(询问频道是 vite的标志保护的HMR套接字: `<repository>/node_modules/.cache/cssints-devtools/<id>.json` (单位:千美元)`root`, (中文(简体) ), `pid`, (中文(简体) ), `url`)由dev服务器在运行时写入,以及 `<id>.session.json` 根据命令。 崩溃的 Dev 服务器留下一个 带有已死 pid 的文件,命令忽略并删除。 插件导入 `cssints/devtools-link`,两个模块 双方共享.

没有附加的会话, Enter 在运行的 OpenCode V2 服务上开始一个会话( E)`Service.discover` 联 合 国 `@opencode/client`从 Vite 根上方的最近文件夹中有一个 `.git`。提示由 `src/core/prompt.ts`数字 :

-   `App:` (由dev服务器添加,上方):相对于寄存器的Vite根(`.` 当它成为仓库的时候 地址服务器监听, 因为提示中的文件路径是相对于根的 ;
-   那你的指示 `Page:` (路径、查询和散列,而不是来源), `Title:` 财务报告和审定财务报表 `Display:` (视图和像素比率, 页:1 `class` 财务报告和审定财务报表 `data-*` 属性 `<html>`, (中文(简体) ), `prefers-color-scheme` 财务报告和审定财务报表 `prefers-reduced-motion`;带有一个元素,其 大小和位置,以及它是否被徘徊、被聚焦或被禁用;
-   包含一个选中的元素: 它的标记, DOM 路径, 文本, 类, `id`, (中文(简体) ), `role`, (中文(简体) ), `aria-label`, (中文(简体) ), `href`, (中文(简体) ), `src`, (中文(简体) ), `alt`, (中文(简体) ), `type`, (中文(简体) ), `name`, (中文(简体) ), `placeholder` 财务报告和审定财务报表 `title`,则 `data-*` 及其三个近亲的祖先 `css.*` 给它打电话 (单位:千美元)`file:line` 各物的得主,和它所击败的,和它所诵读的节文。 从来没有 `value`, (中文(简体) ), 饼干或存储.

每个列表和值被剪切,服务器从尾端将整个字符从一万六千个字符切出(即: `App:` 线条,指示 和头先来并留下。 由于没有服务运行该框 说明如何连接和保存您的文本 。 这个 页面和服务器在 HMR 频道上的交谈( Q)`cssints:devtools:ask`, (中文(简体) ), `asked`, (中文(简体) ), `link`, (中文(简体) ), `linked`),不是路线. 一个建筑有 没有 V2客户端的电话 [brendonovich/vite-plugin-open代码](https://github.com/Brendonovich/vite-plugin-opencode) (麻省理工学院,布伦丹·艾伦) 用 Babel 标记,所以不需要表格;这里的表格是上下文.

## 控制台中的生命号

小组检查一个要素; `@cssints/devtools/vitals` 检查页面并打印到控制台, 因为有一个页面 画到画布上,没有可以选择的元素(本地浏览器的目标是一个). 没有 Dev 服务器和覆盖块 : a plain ES模块,约30 kB (9.5 kB gzip),任何页面导入为dev.

```ts
// the app's entry, dev only
import { observe, vitals } from "@cssints/devtools/vitals";
observe(); // long tasks and long animation frames are not buffered: observe before the work

vitals(); // later, from the console — or window.vitals(), set by the module
```

```text
cssints vitals
265 ms · 214 nodes · 1 sheet · 380 classes
vitals   FCP 412 ms · LCP 1.20 s (h1.hero) · CLS 0.002
         INP 96 ms (button.primary) · 8+40+48 · TTFB 38 ms
frames   p50 16.7 ms · p95 33.4 ms · max 51.2 ms · 3 dropped  ▁▂▃▅▇▆▃▂▁▂▃▅
main     7 long tasks · 412 ms · max 120 ms · style+layout 41 ms · 0 errors · heap 42.1 MB
sheet    64.4 kB · +29 B on src/registry/button/button.tsx · 3 loads · 81 B a class  ▁▁█
load     2 sheets · 1 render-blocking · 66 ms to last · slow.css 65 ms (327 B)
history  12 loads · LCP 1.20 s (−180 ms) (−312 B)  ▁▂▃▅▆▇▆▅
CSS      41.2 kB · 380 rules · 1 902 decls · 0 blocked · specificity 0,3,2 (._1t8gqy5:hover)
layer    _.k       ████████████████████ 22.4 kB
tokens   14 colours · 2 fonts · 1 !important · custom props 12 declared / 9 used / 3 orphaned · keyframes 2 / 1 unused
coverage 41 / 380 classes unused (11%)  cs-Landing-hero …
```

-   **网络要素** 以 [网络虚拟](https://github.com/GoogleChrome/web-vitals) (麻省理工学院),参考资料 执行,而不是手工:它让两个部分 一个手卷式的观察者出错 —— CLS是最大的 _第二届会议 窗口_ 轮班,而不是总和,和INP是相互作用的~98百分位数,而不是最坏的 出错: LCP 元素及其渲染延迟, 交互目标与输入 / 处理 / 演示文稿,以及 它覆盖的长长动画框. `!` 标记需要改进, `!!` 贫穷(图书馆本身的阈值). 它读到 相同的浏览器 APIs,所以没有浏览器报告超过它所能做到的: CLS只为Chromium,另外四个来自Chromium, 火狐与萨法里. 长长的动画画框 坐在我们自己的观察者的生命线旁边 `render` 样式和 布局时间——CSS付费的部分.
-   **床单上的号码** 读取 CSSOM, 不解析: 字节、 规则、 声明、 层字节( 栏), 最差 具体性、颜色、字体、, `!important`,已声明的自定义属性 / 读取 / 孤儿 / 未宣布的, 密钥框 /用/未用,并覆盖——现在没有元素携带的每类选取者. 这是华莱士X光项目 a cssints平板,它应该通过构造来清洁:一个绕过引擎的漂移名称.
-   **床单的成长** 是 Dev 服务器在 HMR 频道上的自己编号: 工作表的每个负载都报告其大小, 其类数和更改的文件(`cssints:edits`),而一个晚订阅的模块则要求获得最后一个. 这么说吧 编辑显示为 `+29 B on src/registry/button/button.tsx` 除了最后30个负载的闪光灯 还有这行 "81 B a class" 是另一个 `cn()` 费用。 关闭 Dev 服务器时, 行没有; 字节是 `renderSheet`'',不是说 CSSOM的,所以它们与 `CSS` 上行(序列化).
-   **历史** 是路径的最后20个负载 `sessionStorage` (单位:千美元)`cssints-vitals`: LCP 和工作表的字节 作为三角洲与同一页的上个负载相对应,带有火花. `reset()` 忘记系列; 私人窗口 扔到店里,报告没有它继续.
-   **电话费** 来源于服务器时的devtools表 `devtools: true`: 每一类的字节 电话(一个共享的班次计算一次,在第一个站点),总数,通话次数,以及有多少人 呼叫的课 页面现在。 没有桌子,就缺一行.
-   **CSS文件到达** 是资源时间表: `.css`它的持续时间,和克罗姆的 `renderBlockingStatus` (没有它的浏览器不报告什么,这与非屏蔽不同);行名最慢的一行和多长 最后一个被抢走的.
-   **框架** 由 RAF 循环进行取样,同时观察:p50 / p95 / 最大和被丢放的帧、闪光线和 a 时间线的加热图(绿色,低于16.7米;琥珀至33.4;橙至50;红色以上)。 这些角色是 终端本身 (`native/terminal`);控制台单元格为 8x16 px, a `%c` 这里的背景.
-   **限制.** 长任务和长动画框没有被缓冲( )`buffered: true` 因此,一个寒冷的控制台 报告只看到后面的工作 `observe()`; 缓冲活性元件随时加载模块。 跨原产地表 掷出 `cssRules` 并算作被屏蔽,而不读取。 报道问DOM _现在_。 。 。 .

`report()` 返回不打印的数字, `print(report)` 指纹, `stop()` 结束帧循环.

## 版式

-   `src/core`: 效果代码, 里面没有覆盖( 扩展可以主机) : `table.ts` (解码表及其 模式), `css.ts` (表格解析器,特殊性,状态), `cascade.ts` (单位:千美元)`inspect`, (中文(简体) ), `page.ts` (单位:千美元) `Page` 服务, `dom.ts` (它的浏览器层), `session.ts` (协议和国家), `prompt.ts` (OpenCode的提示).
-   `src/ui`: 固态覆盖( A)`overlay.tsx`, (中文(简体) ), `mount`)及其csints样式(`styles.ts`) (中文(简体) ).
-   `src/vitals`: 控制台报告(`index.ts`:观察员和印刷品, `css.ts` (CSSOM走动)和 `charts.ts` (火花线,热图,栏杆). 普通浏览器代码:无效果,无固态,可导入任意一页.

## 浏览器

Chrome, Firefox 和 WebKit, 检查 `test:browsers` 在应用程序/demo的dev服务器上.

## 限制

-   `@scope` 相近性不排序;逻辑和物理属性是两个属性.
-   另一个阴影根内部的一个元素被选为宿主.
-   Vite 不作为 HTML( 服务器渲染) 的页面不会获得条目 .
-   重新装入关闭窗口; 在 `"build"` 模式 下击QQ. 只有一个窗口被保留。 该窗口没有文档图片-in-Picture变体.
-   面板没有浮起,也没有快捷键可以切换码头;它覆盖了它坐落的页面,所以下面有一个元素 从箭头键取出,或者在码头到另一边之后取出.
-   面板在打开时每600米重新检查一次:每次通过都添加并去除一个探测器 `<style>` 和属性.

## 贷项

启动 OpenCode 会话的提示框如下 [brendonovich/vite-plugin-open代码](https://github.com/Brendonovich/vite-plugin-opencode) (MIT, Brendan Allan):这个想法和 v2客户端的电话 没有复制代码 。 覆盖是用 [固态](https://www.solidjs.com/) (麻省理工学院).

## 测试

```bash
bun run test            # test/core.mjs (the cascade on happy-dom: hover vs media, @container, @supports, @scope,
                        # an unlayered rule, frame's kernel, within(), grouping), test/build.mjs (nothing in a build
                        # without the option; with "build": the table, the lazy chunk, the loader's size; apps/docs/test/browser.mjs opens it in Chrome),
                        # test/opencode.mjs (the dev server and a fake OpenCode service: the prompt as sent, the agent, the directory, the status, no service; the link probe, with and without the service and the client; an attached session, a detached one, two dev servers, a session that is gone, stale files),
                        # test/opencode-plugin.mjs (the command on a fake plugin context: none, one, several, a pick, off, a stale pid),
                        # test/vitals.mjs (the charts, and the sheet reader on happy-dom: classes, coverage, custom properties, keyframes, specificity)
bun run test:browsers   # builds dist/overlay.js, then the demo in Chrome, Firefox and WebKit (test/browsers.mjs; each dock: the panel on its side, a pick beside it, a drag of the grip, the button after Esc, the dock and sizes after a reload; detach: the pop-up with the panel, a pick in the page followed live, the choice after a reload, closing re-docks, a blocked pop-up), then the console report in Chrome (test/vitals-browser.mjs: layers, @property, keyframes in use, a long task and its animation frame, the paint entries, the printed group), then the OpenCode box in Chrome (test/ask-browser.mjs: with nothing picked, pinned in each dock and in the window, the connect text, a service started later found on focus, the attached session and its title; screenshots in test/out/)
```

## 常见问题

### @cssints/devtools 是什么？

Cssints 的 Dev 覆盖检查器: 一个元素的类, 由调用它们, 工作表的级联, 对照浏览器检查

### 如何安装 @cssints/devtools？

在项目目录运行 npm install @cssints/devtools，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：cssints（^0\.35\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cssints/devtools 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cssints/devtools 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cssints/devtools 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cssints/devtools 可以商用吗？

@cssints/devtools 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cssints/devtools 的下载量有多少？

根据 npm 官方下载统计，@cssints/devtools 在 2026/10/11 – 2026/11/09 这 30 天内被下载 7,777 次，日均约 259 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cssints/devtools 还在维护吗？

最新版本 0\.35\.1 发布于 2026/11/07（3 天前）；至今共发布 43 个版本，其中过去 12 个月发布了 43 个；首次发布于 2026/10/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。