NgPeek - Angular DevTools

Inspect and edit Angular component state right in DevTools - including production builds.

NgPeek is a Chrome DevTools extension for inspecting and editing Angular component internals - including in production builds, where window.ng (the API most tools rely on) isn't available. HOW TO USE 1. Open DevTools on a page running Angular. 2. Select an element in the Elements panel. 3. Open the "NgPeek" pane (in the Elements sidebar) or the full-width "NgPeek" tab. 4. If it's a component, you'll see its Inputs, Outputs, Properties, and Methods - live. On some Angular 14+ production apps, the first scan may come back empty. If so, click "Reload with prod hook," then reselect the element. FEATURES • Sorted Inputs / Outputs / Properties, alphabetized - including Inputs defined via getters, not just plain fields. • Live-edit values, including changing type by typing JSON (123 -> number, true -> boolean). Add/remove array and object entries directly. • Lists every component method - click one to jump straight to its exact line in the source, not just the top of the file. • One click to log a value to console or see injected dependencies. • Works in production builds via multiple detection strategies. • Shows the app's Angular version automatically. PRIVACY No network requests, no data collection. Everything stays in your browser, only while DevTools is open. Independent and unaffiliated with Google or the Angular team.