@ cssints/ devtools (英语)
一个csints的 Dev 覆盖检查者, 建立在 Dev 服务器对每个类的了解之上: 一个元素的类分组
编辑 css.* 根据表单本身的规则(层次、具体性、顺序、
每个赢家都对照浏览器的计算样式.
// 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.tscs-page-logo, (中文(简体) ),<div class={cn(...)}>内Buttoncs-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
// 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,不装入为插件 :
// opencode.jsonc of the repository of the app (or ~/.config/opencode/opencode.jsonc)
{ "plugins": ["@cssints/devtools"] }
或者,随着软件包安装在应用程序中,寄存器的文件(OpenCode加载 .ts 文档 .opencode/plugins/:
// .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:(视图和像素比率, 页:1class财务报告和审定财务报表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代码 (麻省理工学院,布伦丹·艾伦)
用 Babel 标记,所以不需要表格;这里的表格是上下文.
控制台中的生命号
小组检查一个要素; @cssints/devtools/vitals 检查页面并打印到控制台, 因为有一个页面
画到画布上,没有可以选择的元素(本地浏览器的目标是一个). 没有 Dev 服务器和覆盖块 :
a plain ES模块,约30 kB (9.5 kB gzip),任何页面导入为dev.
// 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
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 …
- 网络要素 以 网络虚拟 (麻省理工学院),参考资料
执行,而不是手工:它让两个部分 一个手卷式的观察者出错 —— 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代码 (MIT, Brendan Allan):这个想法和 v2客户端的电话 没有复制代码 。 覆盖是用 固态 (麻省理工学院).
测试
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/)