【免费下载链接】openuiThe Open Standard for Generative UI项目地址https://gitcode.com/gh_mirrors/openui1/openui点击查看免费下载openuidev/devtools是 OpenUI生成式 UI 开源标准生态中面向开发期的调试组件它渲染一个悬浮按钮打开OpenUI Inspect面板列出由openuidev/observability捕获的事件并提供基于真实组件库的OpenUI Debug编辑器/校验工作台。本文以 packages/devtools/CHANGELOG.md 的 0.2.0 → 0.2.2 版本演进为主线结合 packages/devtools/README.md 的接入指南与 packages/devtools/src 的源码实现完整讲解它的 Props 配置、CDN 加载机制、单例选举、事件采集去重与 Debug 工作台原理帮助你掌握如何在 OpenUI 应用中正确接入、自定义与深度排查生成式 UI 的运行时问题。一、版本演进速览0.2.0 → 0.2.2CHANGELOG 是理解该组件演化脉络的最佳入口。三个版本分别对应「依赖契约」「交互体验」「视觉与转化」三类改进1.1 0.2.2Reliability Banner CTA 拆分与 Inter 字体捆绑Reliability Banner 的 CTA 拆分PR #1207将可靠性横幅中的单一行动按钮拆分为主按钮「Get API key」链接到 Thesys Console 的密钥管理页与**次级按钮「View docs」**两个独立入口让用户区分「立即获取密钥」与「先看文档」两条路径。对应实现见 packages/devtools/src/ui/ReliabilityBanner.tsx两个a分别携带cloud_banner_get_api_key与cloud_banner_view_docs归因参数。捆绑 Inter 字体PR #1208将 Interlatin variable subset随 devtools widget 一起打包使 widget 无论宿主应用使用何种字体都能以 Inter 渲染而不再静默回退到系统字体。对应实现为 packages/devtools/src/ui/inter 目录中的font-data.ts与index.ts最终以INTER_FONT_FACE样式块形式注入 widget见 OpenUIDevtoolsWidget.tsx。1.2 0.2.1可关闭的本地部署提示与 Inspect 卡片间距PR #1172 新增可关闭的本地部署提示Deploy Hint并统一了 Inspect 事件卡片的间距。部署提示只在本地产生「完整的响应」后出现一次按 origin 记忆见openui:deploy-hint:v1键用于引导开发者执行npx openuidev/clilatest deploy将应用部署到 VercelInspect 内部还有一个可独立关闭的部署横幅openui:deploy-banner-dismissed:v1。两者完整实现在 packages/devtools/src/ui/DeployHint.tsx。1.3 0.2.0peer 依赖改为有界测试兼容范围破坏性变更0.2.0 是本组件依赖策略的分水岭openuidev/devtools现在要求openuidev/react-lang满足0.3.0 0.4.0见 packages/devtools/package.json。为何用 minor 而非 patch 升级CHANGELOG 中给出了明确解释——react-lang 0.2.x以^0.1.0依赖 devtools若发布 0.1.x 补丁会被旧的 react-lang 0.2.x 安装拉入并因 peer 不可满足而失败。升级到 0.2.0 后旧 react-lang 继续与旧 devtools 配对react-lang 0.3.0才会采用新版本线同时 devtools 0.2.0 一并更新了对openuidev/react-lang0.3.0的依赖。这一策略的核心思想是用版本线release line而非补丁号来表达「经过测试的兼容范围」避免破坏性升级悄悄渗透进旧安装。二、组件定位开发期专属的 Inspect / Debug 工作台从 packages/devtools/README.md 的定义看这个包「Development-only UI widget for OpenUI apps」由两部分组成OpenUI Inspect一个固定到屏幕角落的抽屉drawer实时列出 observability 事件总线捕获的事件——包括普通错误/警告、OpenUI Lang 流式事件、配额错误等并按严重级别展示徽章计数。OpenUI Debug一个针对某条流式响应的调试工作台包含 Lang 编辑器带宿主 CSS 的真实渲染预览、以及 Render / Validation / Tree / JSON / Stream 五个面板支持模拟流式回放Stream replay。关键工程约束包括生产构建零渲染widget 在NODE_ENV production下默认不渲染除非显式传入enabled。发布即 CDN发布新版本会自动更新 jsDelivr 上的 CDN 文件无需额外 CDN 配置浏览器构建产物是发布包内的dist/devtools.browser.js。三、快速接入自动挂载与手动挂载3.1 自动挂载推荐路径只要你的应用使用了openuidev/react-langwidget 就会自动出现。机制位于 packages/react-lang/src/devtoolsBootstrap.ts该模块是openuidev/react-lang的顶层副作用仅在process.env.NODE_ENV development时执行严格等于development因此 Jest/jsdom 等NODE_ENV test环境不会挂载。每个 JS realm 通过Symbol.for(openui.devtools.autoMount)保证只自动挂载一次。自动挂载时渲染OpenUIDevtools version0 __autoMounted /版本引脚固定为 major0这样未来破坏协议的大版本会以1发布而不是悄悄把每个应用拖垮__autoMounted标记让自动实例在手动实例出现时让位。生产构建时整个块会被消费方打包器死代码消除openuidev/devtools不会进入生产依赖图react-native 入口也从不导入该模块。3.2 手动挂载你也可以在宿主应用里自行挂载例如希望自定义 Props 或固定 CDN 版本所有 Props 都会原样转发进 CDN widgetimport { OpenUIDevtools } from openuidev/devtools; function App() { return ( {/* your app */} OpenUIDevtools themedark positionbottom-left maxEvents{100} / / ); }注意手动挂载的实例永远胜过自动挂载实例——同一时刻只渲染一个实例。react-lang 自动挂载以version: 0与宿主手动挂载并存时手动实例胜出手动实例卸载后自动实例自动接管见下文单例机制。四、Props 完整参考与运行语义4.1 公共 PropsCDN 引脚参数Prop默认值说明versionlatest引脚 CDN tag0major、0.1minor或0.1.0精确。省略则为latest。theme、position、maxEvents、errorsOnly、autoOpenOnError、enabled见下表原样转发进 CDN widget。4.2 Widget Props转发进浏览器构建的参数Prop默认值说明enabled仅开发环境强制开/关 widget显式传入后覆盖环境判断。positionbottom-right悬浮按钮所在角top-left/top-right/bottom-left/bottom-right。maxEvents50最多保留的事件数超出时丢弃最旧的。errorsOnlytrueREADME/falseWidget 实现默认仅显示 error/warning 事件还是显示全部事件。autoOpenOnErrortrue「出错自动打开抽屉」开关的初始状态。themelightwidget 界面主题light或dark可被设置菜单覆盖。细节说明README 的 Props 表标注errorsOnly默认true过滤后仅保留 error/warning而 OpenUIDevtoolsWidget.tsx 中函数签名默认值为false显示全部。实践建议显式传值避免依赖默认语义。4.3 运行语义与设置持久化启用判定enabled ?? (process 不存在或 NODE_ENV ! production)即默认仅开发环境渲染见 OpenUIDevtoolsWidget.tsx 与 cdn.ts。设置持久化抽屉内的「Auto-open on error」「Show errors only」「Theme」等开关存放在localStorage的openui.devtools.config键中见 lib/useDevtoolsConfig.ts。SSR 水合后会重新读取存储让上一会话的开关状态胜出theme例外——显式传入的themeprop 优先于存储值并被写回存储以保持设置菜单同步。editorPctDebug 编辑器列宽百分比同样持久化且被限制在MIN_EDITOR_PCT与MAX_EDITOR_PCT之间。主题规则widget 主题从不从宿主页面或操作系统自动探测优先级为themeprop 存储值 默认light。五、CDN 浏览器构建薄包装 运行时加载npm 包入口 src/index.ts 只导出一个薄包装组件 OpenUIDevtools.tsx——它自身不渲染任何 UI而是在useEffect中调用mountOpenUIDevtoolsFromCdn把 Props 转发进 CDN 浏览器构建widget 随后挂载到document.body。5.1 版本引脚与 URL 生成cdn.tsnormalizeCdnVersion用正则/^\d(\.\d){0,2}$/校验引脚只接受 major / minor / exact 三种形态空串视为latest非法字符串返回null并打印警告、不挂载。browserBundleUrl拼接https://cdn.jsdelivr.net/npm/openuidev/devtoolstag/dist/devtools.browser.js对非精确版本latest、0、0.1额外追加?t5分钟取整时间戳查询参数做别名缓存失效避免 jsDelivr 别名缓存把新发布挡住。加载失败绝不拖垮宿主Promise.all的.catch为空处理CDN 挂载失败只意味着 widget 不出现。5.2 浏览器构建的插槽注入browser.tsdist/devtools.browser.js由 esbuild 在构建阶段通过 scripts/build-browser.mjs 生成react、react-dom、react/jsx-runtime、openuidev/observability、openuidev/react-lang全部被alias 到 src/browser-shims 的占位模块只有lucide-react被真实打进包内保证 CDN 文件自包含。process.env.NODE_ENV在构建时被define为development。宿主包装器加载 CDN 文件后调用mountOpenUIDevtools把宿主自己的React、ReactDOM、ReactDOMClient 以及loadReactLang闭包宿主模块图的import(openuidev/react-lang)填入browser-shims/slots.ts定义的全局插槽再动态import(./OpenUIDevtoolsWidget)渲染。因此浏览器构建从不自行 importopenuidev/react-langDebug 的解析/渲染能力完全来自宿主。observability 总线通过Symbol.for(openui.observability)从globalThis取用找不到总线时打印提示并要求先 importopenuidev/observability。六、单例选举机制全局唯一实例由于自动挂载与手动挂载可能并存甚至 ESM/CJS 双构建、多个包版本同时存在widget 需要一个跨实例、跨 bundle 副本的选举机制实现在 lib/singleton.ts注册表挂到globalThis[Symbol.for(openui.devtools.singleton)]保证不同模块副本共享同一份注册表。选举规则手动挂载实例优先于自动挂载实例同级别按挂载先后后挂载的排队。当前所有者卸载后下一个候选接管。测试OpenUIDevtools.test.ts验证了多实例只渲染一个按钮手动实例胜过自动实例手动卸载后自动实例接管。七、事件采集与去重基于 observability 总线widget 通过observability.listenAll订阅事件总线核心逻辑在 OpenUIDevtoolsWidget.tsx稳定 ID 合并lib/eventBuffer.ts若事件detail.id是字符串新事件会替换同 ID 的旧事件而非追加再按maxEvents截断。这使流式事件的多次快照streaming → settled在列表中只占一行最新状态覆盖旧状态。库注册事件过滤isLibraryEventkind react-lang:library的注册 ping 不会作为事件展示lib/libraryRegistry.ts它们只用于刷新 Debug 的组件库注册表。徽章计数仅统计level error的事件按钮在无错误时显示 ShiroLogo有错误时显示红底数字徽章超过 99 显示99。自动打开收到 error 级事件且autoOpen开启时抽屉自动展开。临时错误隐藏流仍在streaming阶段时其携带的解析错误被视为瞬时状态而不展示settled阶段的错误快照才作为最终诊断呈现。八、OpenUI Inspect 面板事件流的可视化Inspect 抽屉480px 固定宽度见 OpenUIDevtoolsWidget.tsx由头部、可靠性横幅、事件列表三部分组成头部操作重置事件清空列表、设置菜单Auto-open on error / Show errors only / Theme 三段式开关、关闭。事件行类型普通EventRow含可展开的堆栈追踪与 Copy 按钮、QuotaErrorRow识别配额错误事件、ReactLangStreamEventRow展示 OpenUI Lang 流式事件含 statements / orphaned / errors 概览统计可展开查看完整响应与诊断。分发逻辑见 inspect/index.ts 对应的getQuotaError/getReactLangStreamDetail。交互细节两个抽屉保持挂载以支持过渡动画关闭时用inert隐藏并移出焦点树Escape优先收起 Debug 抽屉、再收 Inspect设置菜单的 Escape 在捕获阶段处理不会误触发抽屉关闭。九、OpenUI Debug基于真实组件库的调试工作台流式事件行的Debug按钮会打开OpenUI Debug抽屉360px 起、占据 Inspect 剩余空间的工作区会话逻辑集中在 debug/useDebug.tsx入口依赖组件库注册只有createLibrary()注册过库通过Symbol.for(openui.devtools.libraries)共享见 lib/libraryRegistry.tsDebug 按钮才可用否则按钮禁用。五个面板Render经宿主自身Renderer渲染预览不进入事件总线因此流式回放不会向 Inspect 追加卡片、Validation、Tree、JSON、Stream带模拟流式回放控件与 Playback controls。编辑器OpenUI Lang 文本编辑区textarea[aria-labelOpenUI Lang]支持编辑器/预览列宽比例拖拽editorPct持久化。弹窗工作台可将 Debugeject到独立命名窗口debug/eject.ts。弹出窗口会镜像宿主documentElement/body的 class、属性和color-scheme并复制宿主 head 中的样式表与 adopted style sheets保证预览在独立窗口解析出与应用一致的 CSS支持 tray ↔ popup 往返、窗口被拦截时留在抽屉内并提示「Allow popups for this origin」。该交互在 OpenUIDevtools.test.ts 中有完整测试覆盖。十、部署提示与可靠性横幅Deploy Hintui/DeployHint.tsx检测到一次本地完整响应info 级、react-lang:stream、phase settled、响应非空、零错误、解析器无 incomplete/unresolved 且语句数 0后在按钮旁弹出一次性卡片提示执行npx openuidev/clilatest deploy部署到 Vercel带「Deployment docs」链接按 origin 用localStorage记忆可手动关闭。所有本地检测不产生任何分析事件也从不离开浏览器。Reliability Bannerui/ReliabilityBanner.tsxInspect 头部下方的横幅文案为「Your users may see these errors in production」提供主按钮「Get API key」Thesys Console与次级按钮「View docs」——正是 0.2.2 中拆分的两个 CTA。横幅中的功能特性文案如「Automatically fix 88% of the errors」属于产品宣传语具体能力请以 Thesys Console 实际服务为准。十一、CSP 与生产环境注意事项CSPscript-src必须放行cdn.jsdelivr.net否则运行时 fetch 被拦截widget静默不出现——应用其余部分不受影响见 packages/devtools/README.md。若使用固定版本引脚可同时消除别名缓存的随机性。生产构建widget 在NODE_ENV production下默认不渲染且由于openuidev/devtools被声明为sideEffects: falsepackage.json配合 react-lang 的devtoolsBootstrap.ts副作用仅保留在 web 入口的开发分支中生产包可被完整 tree-shake 掉。十二、测试保障行为即规格src/OpenUIDevtools.test.ts 是理解组件行为的完整规格文档覆盖禁用/启用渲染、错误徽章与计数、auto-open 行为及其跨会话持久化、errors-only 过滤、稳定 ID 事件合并job 进度事件、流式更新、settled 诊断替换、堆栈追踪展开与复制、Debug 面板的 Render/Validation/Tree/JSON/Stream 切换、库注册前的 Debug 禁用、单例选举与手动优先、独立窗口 eject 全流程打开/聚焦/回收入口。组件还在 React 中严格区分「真 checkbox 画成开关」保留原生 input 在 DOM 中以获得焦点/表单/无障碍语义体现了一致的可访问性设计。结语从 CHANGELOG 的版本线策略到源码层面的 CDN 插槽注入与 Symbol.for 单例选举openuidev/devtools展示了生成式 UI 开发工具链的典型工程形态开发期自动出现、生产期零成本消失、任何失败都不影响宿主应用。接入时记住三件事优先依赖 react-lang 的自动挂载或用version引脚锁定 CDN 版本线、显式传入需要的 Props、以及为 CSP 放行 jsDelivr——即可获得完整的 Inspect 事件检视与 Debug 调试体验。更进一步你可以结合 packages/devtools/src/debug、packages/devtools/src/inspect 与 packages/devtools/src/ui 的源码把 Debug 面板的能力内嵌到自己的开发工作流中。赞分享【免费下载链接】openuiThe Open Standard for Generative UI项目地址https://gitcode.com/gh_mirrors/openui1/openui点击查看免费下载相关推荐使用 openuidev/devtools 调试 OpenUI 应用Inspect 事件面板与 Debug 工作台实战指南使用 openuidev/devtools 调试 OpenUI 应用Inspect 事件面板与 Debug 工作台实战指南 openuidev/devto戴森球计划工厂蓝图8000优化方案打造你的星际工业帝国戴森球计划工厂蓝图8000优化方案打造你的星际工业帝国 欢迎来到戴森球计划最全面的工厂蓝图资源库这里汇集了超过8000个经过社区验证的优化蓝图无论你是刚游戏开发抖音无水印批量下载三分钟备份一个创作者的完整主页抖音无水印批量下载三分钟备份一个创作者的完整主页 你有没有想过备份某位创作者的整套视频结果只能手动一条条另存还都是带水印的文件或者只想留一份单个视频的无网页爬虫CLI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考