Overview Open Chrome DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

Timeline Event Reference

Published on

The timeline events mode displays all events triggered while making a recording. Use the timeline event reference to learn more about each timeline event type.

Common timeline event properties

Certain details are present in events of all types, while some only apply to certain event types. This section lists properties common to different event types. Properties specific to certain event types are listed in the references for those event types that follow.

PropertyWhen is it shown
Aggregated timeFor events with nested events, the time taken by each category of events.
Call StackFor events with child events, the time taken by each category of events.
CPU timeHow much CPU time the recorded event took.
DetailsOther details about the event.
Duration (at time-stamp)How long it took the event with all of its children to complete; timestamp is the time at which the event occurred, relative to when the recording started.
Self timeHow long the event took without any of its children.
Used Heap SizeAmount of memory being used by the application when the event was recorded, and the delta (+/-) change in used heap size since the last sampling.

Loading events

This section lists events that belong to Loading category and their properties.

EventDescription
Parse HTMLChrome executed its HTML parsing algorithm.
Finish LoadingA network request completed.
Receive DataData for a request was received. There will be one or more Receive Data events.
Receive ResponseThe initial HTTP response from a request.
Send RequestA network request has been sent.

Loading event properties

PropertyDescription
ResourceThe URL of the requested resource.
PreviewPreview of the requested resource (images only).
Request MethodHTTP method used for the request (GET or POST, for example).
Status CodeHTTP response code.
MIME TypeMIME type of the requested resource.
Encoded Data LengthLength of requested resource in bytes.

Scripting events

This section lists events that belong to the Scripting category and their properties.

EventDescription
Animation Frame FiredA scheduled animation frame fired, and its callback handler invoked.
Cancel Animation FrameA scheduled animation frame was canceled.
GC EventGarbage collection occurred.
DOMContentLoadedThe DOMContentLoaded was fired by the browser. This event is fired when all of the page's DOM content has been loaded and parsed.
Evaluate ScriptA script was evaluated.
EventA JavaScript event ("mousedown", or "key", for example).
Function CallA top-level JavaScript function call was made (only appears when browser enters JavaScript engine).
Install TimerA timer was created with setInterval() or setTimeout().
Request Animation FrameA requestAnimationFrame() call scheduled a new frame
Remove TimerA previously created timer was cleared.
TimeA script called console.time()
Time EndA script called console.timeEnd()
Timer FiredA timer fired that was scheduled with setInterval() or setTimeout().
XHR Ready State ChangeThe ready state of an XMLHTTPRequest changed.
XHR LoadAn XMLHTTPRequest finished loading.

Scripting event properties

PropertyDescription
Timer IDThe timer ID.
TimeoutThe timeout specified by the timer.
RepeatsBoolean that specifies if the timer repeats.
Function CallA function that was invoked.

Rendering events

This section lists events that belong to Rendering category and their properties.

EventDescription
Invalidate layoutThe page layout was invalidated by a DOM change.
LayoutA page layout was executed.
Recalculate styleChrome recalculated element styles.
ScrollThe content of nested view was scrolled.

Rendering event properties

PropertyDescription
Layout invalidatedFor Layout records, the stack trace of the code that caused the layout to be invalidated.
Nodes that need layoutFor Layout records, the number of nodes that were marked as needing layout before the relayout started. These are normally those nodes that were invalidated by developer code, plus a path upward to relayout root.
Layout tree sizeFor Layout records, the total number of nodes under the relayout root (the node that Chrome starts the relayout).
Layout scopePossible values are "Partial" (the re-layout boundary is a portion of the DOM) or "Whole document".
Elements affectedFor Recalculate style records, the number of elements affected by a style recalculation.
Styles invalidatedFor Recalculate style records, provides the stack trace of the code that caused the style invalidation.

Painting events

This section lists events that belong to Painting category and their properties.

EventDescription
Composite LayersChrome's rendering engine composited image layers.
Image DecodeAn image resource was decoded.
Image ResizeAn image was resized from its native dimensions.
PaintComposited layers were painted to a region of the display. Hovering over a Paint record highlights the region of the display that was updated.

Painting event properties

PropertyDescription
LocationFor Paint events, the x and y coordinates of the paint rectangle.
DimensionsFor Paint events, the height and width of the painted region.

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.