Modern Angular/NgRx Debugging Tool

GitHub Repository If you've ever debugged an NgRx app by console.log across reducers and effects, this post is for you. You should use NgRx DevTool , a real-time visual debugger for NgRx applications. It runs as a standalone UI that connects to your app over WebSocket. No browser extension, no permissions, no setup headaches. npm install @amadeus-it-group/ngrx-devtool Setup in 2 minutes Add the meta-reducer and provider to your app config: import { provideNgrxDevTool , createDevToolMetaReducer } from ' @amadeus-it-group/ngrx-devtool ' ; export const appConfig : ApplicationConfig = { providers : [ provideStore ( reducers , { metaReducers : [ createDevToolMetaReducer ()] }), provideEffects ([ YourEffects ]), provideNgrxDevTool ({ wsUrl : ' ws://localhost:4000 ' , trackEffects : true , }), ] }; Start the DevTool server: npx ngrx-devtool Open localhost:3000 and start your Angular app. Done. What you get Action Monitoring Every dispatched action shows up in real time. User actions get a blu