SuperAPI AI 工具集

ngrx-devtool-debugger

测试与质量

查看项目

更新于 10-15 16:16

技能介绍

用途:调试和可视化 Angular 应用中的 NgRx 状态管理,实时监控 action、追踪 effect、查看状态差异与性能指标,且无需浏览器扩展。工具会启动独立的 WebSocket 服务器,Angular 应用连接后,在专用 UI 中展示所有 NgRx 活动。

主要能力:实时 action 监控;effect 追踪;状态可视化与 diff 查看;性能指标;支持自定义 action 元数据;可通过自定义 meta-reducer 做选择性 action 追踪;支持按环境配置与生产环境安全配置。

安装与运行:以开发依赖安装,npm install --save-dev @amadeus-it-group/ngrx-devtool,或 yarn add -D @amadeus-it-group/ngrx-devtool。启动服务与 UI 使用 npx ngrx-devtool,默认 WebSocket 为 ws://localhost:4000,UI 为 http://localhost:3000;可用 --ws-port、--ui-port 自定义端口,--server-only 仅启动服务器。

接入方式:在 app.config.ts 中使用 provideNgrxDevTool 与 createDevToolMetaReducer;NgModule 场景使用 NgRxDevToolModule.forRoot。配置项包括 wsUrl、enabled、trackEffects、maxActions、autoConnect、reconnectAttempts、reconnectDelay。

适用场景:Angular + NgRx 项目的本地开发调试、状态流排查、effect 行为验证与性能观察。限制:需 WebSocket 支持;生产环境建议关闭;状态 diff 需 reducer 返回新状态引用而非原地修改;高频 action 可过滤;端口冲突需改端口。资料未提供价格、平台等其他信息。