On this page ▾
Timeline
The Timeline tab puts the events that other tabs already record on one time axis. Each source is a layer with its own lane. Turn layers on and off, pick a range, and open any event in the tab that shows it in full.
What it shows
Layers
| Layer | Events | Opens in | Turned off with |
|---|---|---|---|
| Router | Navigations, with their outcome, trigger and duration | Routes | inspectors.router |
| HTTP | Client and SSR HTTP calls, with their status, side and duration | SSR & HTTP | inspectors.http |
| NgRx | Store actions, signal store changes and events, with the store and changes | Store | inspectors.ngrx |
| Change detection | Recorded change detection cycles, with their time, checks and trigger | Components | inspectors.components |
| Forms | Form events such as value, status, submit and reset, with their origin | Forms, with the form selected | inspectors.forms |
| Signals | Value changes of the signals in the graph the Signals tab shows | Signals | inspectors.signals |
A layer button shows how many events of that layer are in the range. Press it to hide or show the layer. The panel remembers the hidden layers in localStorage under pangular-timeline-hidden-layers. A layer whose inspector is off in the configuration is not listed.
Failed navigations and HTTP calls that fail or answer 500 or more are marked as errors. Cancelled or redirected navigations, HTTP answers from 400, fault rules and change detection cycles over 16 ms are marked as warnings.
Time axis
The chart has one lane per layer that is shown. It groups events that fall close together into one mark, so a few thousand events still draw quickly. A mark is darker when it holds more events, and it takes the colour of the worst event in it.
Events
The Events list holds the same events as the chart, newest first, with their time to the millisecond, layer, name and detail. It renders the newest 200 events in the range and says how many it left out. Zoom in or filter to see older ones.
Select an event to see it under Selected event. Open in opens it in its own tab through a deep link. A form event selects its form on the Forms tab. Other events open their tab on the same page.
Use it
Pick a range
| Action | How |
|---|---|
| Look at a range | Drag across the chart |
| Zoom in or out | Zoom in halves the range around its middle, Zoom out doubles it |
| Move the range | Earlier and Later move it by half its width |
| Go back to every event | Show all |
| Select the nearest event | Click a lane on the chart |
| Filter by name or detail | Type in the search box. Escape clears it |
| Look at one page | Pick it in Page, or All pages. The panel of a tab starts on its tab |
Without a range, the chart grows with each event that arrives.
Keyboard
The Events list is one Tab stop. ↑, ↓, Home and End move through it, and Enter selects an event. Every chart action has a button, and screen readers get a summary of the chart with the count of each layer. The list is the text version of the chart. The "12 of 40 events" count is announced after you change the search, a layer, the page or the range, not each time an event arrives.
Where the data comes from
The tab reads the shared state the other tabs read: router, http, ngrx-store, change-detection, forms and signal-graph. It adds no collection of its own, so each layer holds what its tab keeps:
| Layer | What it needs | Limit |
|---|---|---|
| Router | The app's router | limits.navigations |
| HTTP | HTTP setup for SSR calls | limits.httpCalls |
| NgRx | NgRx in the app | limits.changeLog |
| Change detection | A recording, started with Record on the Components tab or the palette | limits.cdCycles |
| Forms | Forms in the app | limits.formTimeline |
| Signals | The component whose graph the Signals tab shows. A signal without a debugName has sampled values only |
50 changes per signal |
Raise the limits in the configuration to keep more. Times come from the page's clock, and SSR HTTP calls from the server's clock.