NgPeek - Angular DevTools

Overview

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.

0 out of 5
No ratings
Learn more about results and reviews.

Details

Version
1.0.2
Updated
September 5, 2026
Flag concern
Offered by
56duong
Size
345KiB
Languages
English
Developer
Email
56duong@gmail.com
Non-trader
This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization

The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

Not being sold to third parties, outside of the approved use cases
Not being used or transferred for purposes that are unrelated to the item's core functionality
Not being used or transferred to determine creditworthiness or for lending purposes

React DevTools

5.0

Inspect React & Next.js component trees, edit state live, track re-renders, and analyze components with AI.

Pixi Dev Tools

5.0

Inspect PixiJS apps from DevTools: scene graph, property editing, image overlay, zoom, and performance diagnostics.

Next.js SSR DevTools

0.0

Chrome DevTools panel for inspecting Next.js SSR fetch calls.

CSS Variables Inspector

0.0

Inspect CSS variables on any element. See resolution chains, color swatches, and copy name:value pairs from the Elements sidebar.

LocatorLabs — Smart Locator Generator

4.9

Generate reliable, accessibility-first element locators for test automation, right inside Chrome DevTools.

RSC Viewer

5.0

DevTools panel for inspecting React Server Component (RSC) payloads

HTML Diff Check Tool

4.4

Tool for checking HTML difference between tabs ,or between production and development environment.

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

React + State Inspector

5.0

Inspect React (v15+) components visually and view/edit Redux and React Query state live from a DevTools panel.

Angular Inspector

4.4

Detect Angular and the JavaScript frameworks, libraries, analytics and backend tools used by the sites you visit.

ng-inspect for Angular

4.9

Helps in debugging Angular applications. Extends the elements panel in devtools to display component properties.

ALT-DEV TOOLS

5.0

A powerful sidebar DevTools alternative — Elements, Console, Network, Sources & Application panels right in your browser sidebar