@ ecopages/ dev-toolbar (翻译)
Ecopages 的只开发浏览器工具栏. 挂载期间 ecopages dev 并且不运送生产建筑.
面向用户的文件 : Dev 工具栏 (平生,显生,内生应用).
安装
将软件包添加到您的应用程序中并从配置中选择 :
import { defineConfig } from '@ecopages/core/config';
import { devToolbar } from '@ecopages/dev-toolbar/config';
export default defineConfig({ devToolbar: devToolbar() });
pnpm add -D @ecopages/dev-toolbar
期间 ecopages dev,核心捆绑您的配置软件包 /_dev_toolbar.js 并输入 Deps 面板的 dev 列表。 在工具栏客户端更改后重新启动 Dev 服务器 .
@ecopages/dev-toolbar 映射本地浏览器捆绑的核心显示合同( n)src/api/manifest-contract.ts; 保持同步通过 manifest-contract.test.ts。 。 。 .
禁用每个工程 devToolbar: { enabled: false },或每个进程 ECOPAGES_DEV_TOOLBAR=false。 。 。 .
内建的应用程序
- 构建错误 – 在 HMR 错误上自动打开, 显示隐形模式, 列出不同的消息为文本, 并显示一个错误计数徽章; 任何非 error HMR 事件清除消息和徽章
- 导航 ——路由计时归档,初始载荷,客户端导航延迟,HMR状态,和页面集成(由核心导航协调员报告的当前所有者)
#__ECO_DEV_NAV_TELEMETRY__内document.head(与data-eco-persist并揭露window.__ECO_DEV_NAV_TELEMETRY__用于机器/AI调试 - 选项 —页面浏览器 Graph access/chunk 资产,销售商 URL,懒惰的负载提示
- 群岛 - 检查印有邮票的岛屿主机
data-eco-island,包括允许的安全部门改革<eco-island>主机; 重复组件实例独立显示和水合状态报告hydrated(通过)data-eco-hydrated或经核实的组件更新完成,registered(关于有待更新的自定义要素),或ssr-only - A11y (英语) ——轴心审计(内置倒计时检查)和页内要闻
- 设置 ——码头放置(上,下,左,右),隐形模式,以及文档链接
带上您的 Dev 工具栏
核心在 /_dev_toolbar.js 并注入 #__ECO_DEV_MANIFEST__ 每页。 你的软件包拥有码头UI和面板.
替换此引用工具栏:
- 创建客户端软件包,导出浏览器靴子模块(布局相同于
@ecopages/dev-toolbar) (中文(简体) ). - 设定
devToolbar.package内eco.config.ts(使用时defineDevTool从@ecopages/core/clientbYO 软件包. - 叉或复制此软件包, 如果您想要 Radiant 面板, 显示阅读器, 和隐形码头行为 .
@ecopages/dev-toolbar 是参考执行.
自定义客户端可以声称 HMR 运行时间可取消 ecopages:build-error 窗口事件( e)detail: { message: string }与同步 preventDefault() 以压制页面回落。 听着 ecopages:build-error-clear 重置错误。 在登记听众后, 发送 ecopages:build-error-request 如果挂起时间较晚, 将重放活动信件 。 核心导出名称和有效载荷类型 @ecopages/core/client;参考客户端在本地镜像事件名称,用于浏览器捆绑. 未声明错误仍然使用倒计时. 卸载时删除听众 .
参考工具栏内部
window.__ECO_DEV_TOOLBAR_APPS__ 是本套件内用于实验性额外码头应用的可选注册. 没错 没有 支持的 Ecopages 扩展 API - 应用程序作者应当替换 devToolbar.package 换句话说.
软件包布局
src/bootstrap.ts——向 CSS 输入工具栏document.head、靴子导航遥测和挂载eco-dev-toolbar; 重新装入安全遥测所有权防止 HMR 捆绑再评价添加重复的文档收听器src/runtime/navigation-events.ts——共享核心的导航生命周期事件名称和一个DOM监听器跨工具栏应用程序,在最终订阅者卸载时删除src/runtime/navigation-telemetry.ts——读取当前所有者来自getOwnerState()因此, 浏览器和React 路由器的所有权被一致报告src/shell/eco-dev-toolbar.tsx—— Radiant光-DOM主机(JSX)render(),无阴影根;面板定位为纯 CSSsrc/shell/motion.ts- WAAPI关于隐形码头的动议只披露;面板显示/隐藏为CSSsrc/apps/*-panel.tsx- Radiant JSX小组(导航、船底、岛屿、a11y、设置)src/api/manifest-contract.ts– 浏览器- 核心 dev 显示合同的本地镜像src/api/build-error-contract.ts——浏览器-本地事件名称对照公共核心构建出错合同进行核对src/api/dev-manifest.ts- 内部DOM读取/写入#__ECO_DEV_MANIFEST__src/api/types.ts——工具栏应用程序主机合同src/shell/——自定义元素主机,SVG图标,样式,以及ensureDevToolbarStyles()(BYO工具栏的可选 CSS 覆盖)