NgTrace

Inspect Angular components and the API requests each one made.

NgTrace adds an NgTrace panel to Chrome DevTools that shows which Angular component made every API request, and why. The Network tab tells you what was requested. NgTrace tells you who asked for it: pick a component in the live component tree and see the requests it caused, with payload, query, headers and response, and the exact call chain behind each one (ProductListComponent → ProductService → HttpClient). WHAT YOU GET • Component attribution: every request linked to its Owner Component and Owner Service, with a confidence level and the Call Chain that explains it. Works with zone.js and zoneless apps. • Component state: read-only state, injected services, where each came from, and the injector path. • Signals and resources: what each signal and computed depends on, requests made by resource(), httpResource() and rxResource(), and a Value History you can scrub back to just before a request was sent. • Errors and retries: failed requests flagged, retries linked attempt by attempt, recoveries marked, and failures summarized per component. • Interceptor chain: every interceptor a request went through, what it changed, short-circuits such as cache hits, and the retries it started. • Timeline: every request on one timeline with router navigations marked. • Waste detector: duplicate and cancelled calls, and which components waste the most time on the network. • JWT inspector: tokens found in headers, cookies, query strings and bodies, decoded with a live expiry. • Contracts and drift: response shapes inferred from real responses, drift flagged, copy as TypeScript interfaces. • Replay and mocking: edit and resend any request and diff the response; mock responses (respond, delay or fail) without touching your code. • Export: copy as cURL or fetch, HAR, Postman collections and Playwright test stubs. Sensitive headers are masked on screen and in exports. • Jump to code: reveal a component in Elements, open its source in DevTools, or in your editor. REQUIREMENTS Angular 14 or newer, running in development mode (ng serve). Production builds are detected; their requests are recorded but cannot be attributed to components. PRIVACY NgTrace has no server, no account, no analytics and no telemetry. Captured requests stay in the page and the DevTools panel and are never sent anywhere or written to disk. The capture script runs on every http and https page from the start of the page load so requests made before DevTools opens are not missed. Free and open source (MIT): https://github.com/MohamedWaelGD/NgTrace Report issues: https://github.com/MohamedWaelGD/NgTrace/issues