Skills
.Work. You
Rest

ngrx-devtool-debugger

Official

See NgRx actions and state changes in real time.

Software Engineering#angular#ngrx#effect tracking#state debugging#action monitoring#state diffs
AuthorAradotso
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill solves the challenge of debugging complex NgRx state management by making NgRx actions, effects, and store state changes visible and diffable in real time.

Core Features & Use Cases

  • Real-time action monitoring: Track dispatched NgRx actions as they happen.
  • Effect tracking: Follow what effects are running and when.
  • State visualization with diffs: Compare state before and after each action, including performance-oriented metrics.
  • Use Case: When a feature fails to update the store as expected, you can inspect the action that triggered the change, verify the effect chain, and spot exactly which slice of state changed (and why) via the diff viewer.

Quick Start

Run the NgRx DevTool server for your app by executing npx ngrx-devtool so the WebSocket server and UI are ready for your Angular configuration to connect.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ngrx-devtool-debugger
Download link: https://github.com/Aradotso/devtools-skills/archive/main.zip#ngrx-devtool-debugger

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.