Arguseye — 代理和 VS 代码组件预览
见你的组件。 换一换. 观察后果.
看58秒的电影 • 妇女 Claude 代码设置指南 • 妇女 代理设置和可下载技能 • 妇女 VS 代码扩展
Arguseye对真实的React(包含React Router和Remix),Next.js,Vue 3和Nuxt,Svelte 5和SvelteKit,Preact和Solid组件提供编码代理,不启动你的应用程序或写故事. 它使用您的源, 安装的软件包, 发现的使用道具, 以及支持的布局上下文 。 每一份都使返回一个剪接的PNG、无障碍文本和结构化的证据——包括未解决的投入、警告和错误.
npx @ayushniroula/arguseye install claude
需要Node.js 22+,已安装的项目依赖,以及Chrimium或Google Chrome. 在您的项目中运行, 然后重新启动您的代理 。 替换 claude 与 codex, (中文(简体) ), cursor, (中文(简体) ), gemini, (中文(简体) ), windsurf, (中文(简体) ), vscode, (中文(简体) ), antigravity,或 copilot。 。 。 .
如果Arguseye 救你一个 dev-server 重新启动, 一颗恒星 帮助其他开发者找到.
探索交互式演示QQ • 妇女 选择您的设置 • 妇女 校验编辑 • 妇女 工具参考 • 妇女 性能边界( B)
发展中
版本 0.0.21 (单位:千美元) 修正跨时钟边界的Smarty编译,并支持项目拥有的Smarty配置,包括未保存的帮助和部分编辑. 见 本地模板设置合同。 。 。 .
版本 0.0.20 经常预算: 新增有重点的DOM/source/font检查,门户-root字体修正,捕获-环境相容性检查和更快的字节-同位素图像比较. 它保留了0.019的实际进展、恢复诊断、审计完整性和选入卷轴记录。 见 订立合同和限制。 。 。 .
重点检查和基准相容性(0.0.20+)
检查特定标题或按钮 inspection: {selector: "h2", fonts: true, sources: true} 在MCP中,或 shot app/page.tsx --inspect-selector 'h2' --fonts --sources --json 在CLI中。 结果覆盖了被捕获组件内多达100个匹配节点,包括前100页节点后的目标. 失踪目标保留巴布亚新几内亚,并报告检查不完整。 影子树和iframe文件仍然被排除在外;无障碍检查保留了全部被捕获的范围.
被保存的捕获记录了浏览器版本,平台/architecture,OS发布,像素比和Arguseye版本. 比较 environmentChanges 没有这些元数据,在改变的身份或遗留基线中保持不完整。 在当前环境中获取新的基线。 字体, GPU 和外部资源差异没有完全指纹.
本地模板预览
Preview Django, Jinja2, Handlebars, Mustache, EJS, Pug, Nunjucks, LiquidJS 和其他本土节点/Python/PHP/Ruby模板,带有明显的JSON上下文和您自己安装的引擎. 右键单击 VS 代码中的模板,选择 预览组件,选择其引擎/数据配置,并对照基线比较未保存的编辑。 不需要应用程序服务器或故事 .
原生模板预览需要0.016或更晚. 见 引擎矩阵、配置和本地适应器协议 确切的范围和限度。 “所有发动机”是指可扩展的本土桥梁,而不是每个框架自动运行的说法.
选择您的设置
将客户端扩展为可复制的食谱 。 这些控制直接在 GitHub 上工作;网站有活的演示和安装标签.
克劳德代码
npx @ayushniroula/arguseye install claude
写项目 .mcp.json 和技能在 ~/.claude/skills/arguseye。重新启动 Claude 代码,然后请它预览您正在编辑的组件.
代码
npx @ayushniroula/arguseye install codex --project /path/to/app
将 MCP 条目添加到 ~/.codex/config.toml 和技能到 ~/.agents/skills/arguseye重新装入代码.
Cursor, Windsurf,双子座CLI, 或反重力
选择一个命令 :
npx @ayushniroula/arguseye install cursor
npx @ayushniroula/arguseye install windsurf
npx @ayushniroula/arguseye install gemini
npx @ayushniroula/arguseye install antigravity
安装器合并到所选客户端的现有配置中. 见 安装指南 准确的文件位置和每个客户端的核实状况.
VS 代码和 GitHub 副驾驶
对于视觉编辑器面板,请安装 来自 VS 代码市场 运行 预览组件 编号 .tsx, (中文(简体) ), .jsx, (中文(简体) ), .vue,或 .svelte 文档.
对于副驾驶的MCP工具:
npx @ayushniroula/arguseye install vscode
这个写着 .vscode/mcp.json. 视觉扩展和MCP服务器是同一渲染引擎的两个视图.
CLI 或其他 MCP 客户端
# Inspect a component without MCP.
npx @ayushniroula/arguseye shot src/Card.tsx --export Card --out card.png --json
# Print MCP configuration without changing files.
npx @ayushniroula/arguseye install print
# Preview exactly what an installer would change.
npx @ayushniroula/arguseye install codex --project /path/to/app --dry-run
所需经费: 节点.js 22+,并安装了项目依赖性,以及一个Playwright相容的Chrimium浏览器或Google Chrome. 如果没有浏览器可用,请用 npx playwright install chromiumVue项目也需要自己的项目 vue/compiler-sfc。 。 。 .
这个 捆绑的技能 教特工何时提供,如何解释证据,如何回到CLI. 所有安装选项
校验编辑
抓取组件,编辑其来源,然后与所保存的基准进行比较。 导出,解析道具,取景口固定用于比较.
询问您的编码代理
渲染器
src/Card.tsx使用它真正的使用道具并保存捕获ID. 在我编辑后, 比较一下基线。 显示前面, 后面, 和像素 diff; 报告访问权限的更改, 新错误, 以及任何不完整的上下文 .
该剂使用 render_component 接下来是 render_diff({ baselineId }). 多边协商进程会议保留最新 64起俘虏案;过期的ID需要一个新的基线.
在整个 CLI 命令中保存基线
npx @ayushniroula/arguseye shot src/Card.tsx --export Card \
--capture-dir .arguseye/baseline --out .arguseye/before.png --json
# Edit src/Card.tsx, then compare its current source.
npx @ayushniroula/arguseye diff --baseline .arguseye/baseline \
--out .arguseye/comparison --json
比较目录包含前,后,并突出显示diff图像外加JSON证据. 在您选择的目录中坚持 CLI 抓取 .
一个真正的结果. 在这个寄存器库的演示应用上,编辑使登机口的出入口,座椅和登机价值都更大了(Dtext-lg 改为 text-3xl) (中文(简体) ). 迪夫报告 changed: 3.83% changed pixels 并标出两个区域:更大的值,要求的值,和泪线和条码,由于卡从338个增加到346个px而下移了8个px.
结果为: unchanged, (中文(简体) ), changed,或 incomplete视差是需要审查的证据;它不能确定正确性。 运行时道具,缺少提供者,不支持的框架行为,以及未结算的资产在警告和未解决输入中仍然可见.
为什么经纪人需要眼睛
源 diff 无法显示被剪切的文本、 缺少的 pading 或无法应用的主题 。 Arguseye允许代理检查使产出接近其改变的部件.
| 任务 | 阿尔古赛耶返回 |
|---|---|
| 检查一个组件 | 剪接 PNG、无障碍树、错误、警告和时间 |
| 重新使用真实输入 | 已发现的文字道具, 运行时表达式报告为未解决 |
| 检查编辑 | 像素差异、尺寸变化、可访问性变化和新/已解决的错误 |
| 检查其他用法 | 每批最多12个被包装的隔离材料,并附有个人捕获身份证 |
| 重现状态 | 组件动作、存储输入、使用祖先或站入父框 |
| 编辑工作 | 未保存的缓冲预览,取景口预设,光/暗切换,道具控制和基线比较 |
这些是 使用已发现道具制作孤立组件,而不是全页集成测试. 浏览器自动化和故事对于完整的应用历程和明确被描述的状态仍然有用.
看起来像什么
A real Next.js 14 app(MUI,情感,Redux,下个Auth,1,197个文件),从源头渲染而无服务器运行,在应用程序自己的主题和嵌入布局内:
工具( MCP 服务器) arguseye(中文(简体) )
如果无法启动预览,请打电话 inspect_project {} 运行 npx @ayushniroula/arguseye doctor --root . --json它报告选定的应用程序目录、已安装的框架版本和恢复步骤,而不启动Chrimium或执行项目配置。 本地编译器静态读取支持的 Vite 设置; 它不运行任意的 Vite 插件 。 成功实现孤立仍需要审查警告和未解决的投入.
项目检查和明确设置要求 0.0.14 或以后时间;旧的0.0.12装置不暴露它们.
0.0.14版本还增加了选入项目Vite插件,可重放浏览器/网络固定器,取消和限定会话,可重复审计,可选访问/源检查,Svelte上下文设置,以及一个独立的HTML/Web组件适配器. 见 订立合同, (中文(简体) ), 设置指南 财务报告和审定财务报表 能力/验证矩阵。 。 。 .
对于无法推断的背景,提供 明确提供者或 Vue 设置。Render 证据可以识别设置文件;其代码使用您的工程软件包,只在预览时执行.
| 工具 | 经纪人得到什么 |
|---|---|
inspect_project {} | 所选项目根,已安装的框架版本,明确的设置路径和恢复诊断;在浏览器启动前可用. |
render_component {file, export?, usage?, props?, viewport?, theme?, in_context?, frame?, actions?, storage?} | PNG 切入到组件,无障碍树, errors[], (中文(简体) ), warnings[], (中文(简体) ), timings, (中文(简体) ), changes 同一目标之前的设定. usage 取取真实呼叫网站的道具; in_context 在呼叫站点的母站点内制造; frame 是一个代理父框; actions 财务报告和审定财务报表 storage 首先设置状态; theme 部队 light 或者说 dark (单位:千美元) dark 课开始 <html>, (中文(简体) ), color-scheme 财务报告和审定财务报表 prefers-color-scheme。函数道具: {"$fn": "(x) => …"}。 。 。 . |
list_usages {file, export?} | 每个调用网站都有其文字道具,取决于运行时间值的道具,以及JSX祖先. |
render_usages {file, export?, viewport?, theme?, cursor?, limit?, output?} | 贴有标签的孤立呼叫站点每批最多可提供12个使用证并获取身份证. |
describe_props {file, export?} | 取自TypeScript类型的道具计划,有样本值. |
render_diff {baselineId, output?} | 在前面,后面,突出显示像素差异、无障碍性变化、出错和完整性 captureId。 。 。 . |
无 MCP 代理的 CLI : npx @ayushniroula/arguseye shot src/Card.tsx --export Card --usage app/page.tsx:12 --in-context --out card.png, (中文(简体) ), npx @ayushniroula/arguseye usages …, (中文(简体) ), npx @ayushniroula/arguseye serve … (有热重载的活页).
VS 代码
打开 a .tsx, (中文(简体) ), .jsx 或者说 .vue 文件运行 预览组件 (编辑器标题中的眼睛图标,或 Ctrl+Alt+P) (中文(简体) ). 面板从首次真实使用中显示道具的组件,遵循您编辑的文件,在普通React刷新和Vue模板/样式编辑时保留状态的同时更新未保存的编辑,缩放预览以适应(或1:1),并具有由组件类型所构建的道具形式. 从中安装 市场 (单位:千美元) ayushniroula.arguseye, Linux、 macOS 和 Windows 构建),或从中抓取 VSIX 释放 用于光圈、风起和VSCodium.
构建目标 : Linux x64, Windows x64, 和 macOS 苹果硅. 以下截图在Linux上的真实扩展主机中被捕获,使用WiseAdmit和CSCA.ai现有的生产组件.
真实 VS 代码画廊:应答布局,未保存的更改,和 CSCA.ai 组件
WiseAdmit——桌面和移动. 同样的现有 AIEcosystem.tsx 组件使用自己的响应性布局和资产.
未保存编辑前后. 比较保留了不支持的 Next.js 提供者行为的不完整文本警告 .
CSCA.ai——已存在的英雄,特征卡和考试-信息网格. 这些是真实的 HeroSection.tsx, (中文(简体) ), CscaProvide.tsx,以及 ExamEssentials.tsx 从 cscanew/csca,用自己的资产进行渲染,并缓存下个字体面相.
这些是孤立的前端预览,而不是完整的应用程序行程. 下一个 Google 字体变量可以重复使用匹配的字体资产 .next/static 建设。 如果没有这些资产,根字体类别仍未得到解决,使报告的内容不完整.
如何渲染工作
- 您的文件通过 氧化c 一次一个模块; 您的软件包被预捆绑一次 滚动 从你自己
node_modules在工人的处理过程中,通过锁文件缓存,所以React,MUI和Tailwind是您的应用程序使用的版本. Next.js app-routter项目运行在 Next 的供应商反应上,就像应用程序本身. - 支持的根和嵌入式布局和模板供应环境:全球CSS,
<html>编号 :<body>课程,提供其道具的提供者theme={theme}重新进口,CssBaseline- 像兄弟姐妹一样 Tailwind v4 编译与您的主题, Tailwind v3 通过您的 PostCSS 配置, 加上 Sass, CSS 模块,public/资产、图像导入和NEXT_PUBLIC_*环境. - 框架 shims 处理浏览器兼容性
next/link, (中文(简体) ),next/image,以及next/navigation行为; Chromium 绘制像素. 仅服务器的Next.js行为在这个孤立的运行时间之外. - 编辑是用 React Fast 刷新、从编辑器或从磁盘上取出而成的。 一个目标的整个导入图被预先装入一批;每个成员重写图标包的桶入;懒惰的图像急速装入,所以帧以毫秒计.
业绩和界限
这个 记录基准 使用Linux x64,一款Intel Core i5-1235U,而Node v24.21.0在2026-10-27上. 20个温暖的小型反应固定器测量出p95 50 ms在100毫秒的门口上 Edit-to-pixels有单独的50 ms的目标;它不是一个通用的延迟保障.
| 已录制组件编辑工作流程 | 电话 | 击倒 | 反应规模 |
|---|---|---|---|
| 阿古赛耶,温暖 | 2个 | 145分钟 | 48,669 字节 |
| 剧作家 MCP + Vite, 温暖 | 页:1 | 217分钟 | 27,298字节 |
| 阿古赛克,冷 | 2个 | 2,105毫秒(每秒) | 49,076字节 |
| 剧作家 MCP + Vite, 冷 | 6个 | 1 704分钟 | 28,006 字节 |
Arguseye归还了更大的证据包,包括一个像素diff. 这种固定运行显示呼叫次数较少,温暖的工作流程更快,同时冷路更慢,反应更大. 这不是一般业绩排名. 方法、机器、示警和生样品
上面单独的1,197-file Next.js的例子测量了服务器的准备状态为2–11 s,第一次渲染为1.5 s,一个部分为0.9 s,同样的目标再次为0.3 s,拥有大约500–750 MB服务器内存. 这些是不同的工作量。 见 渲染技术。 。 。 .
孤立的运行时间无法重建
运行时唯一的道具,任意的提供者值,认证或后端依赖状态,Next.js服务器执行,和Nuxt特性可能要求明确输入或保持不支持. 成功的像素仍然可以有不完整的上下文;检查警告和未解决的输入. Vue 脚本更改重挂载组件并报告状态重置. 从新的组件状态开始核查.
路线图
代理人会要求的下一个,顺序是:将事实排入文本(框、外溢、剪接、对比)与参考文献;元素 → 源文件和行;被冻结的时钟和种子的随机性,用于您可以信任的diff; next/font 和更多框架shims; 降低服务器内存. 完整名单,附有推理 文件/代理人-意愿清单.md。 。 。 .
捐款
欢迎提出问题和拉动请求: 捐款额 和规矩, 一般事务人员(其他职等) 工程规则的每一个变化都随之而来(人类和代理人都一样), 警卫 如何报告脆弱性.
npm install && for d in test/fixtures/*/; do (cd "$d" && npm install); done
npm test # unit + headless browser tests
npm run test:vscode # integration test in a real VS Code
麻省理工学院有执照 由 阿尤什·尼鲁拉。 。 。 .