perf-timeline-to-devtools-profile

Chrome Extension that creates a custom track in the DevTools Performance Panel populated with entries from the Performance Timeline

Originally created to help visualise the LoAF entries in the context of a Chrome Trace

Registers Performance Observers for the following Events and adds performance.marks / measures anotated with data for DevTools

• LoAF
• LoAF Scripts
• Long Tasks
• LCP
• INP

Experimental Soft Navigation Support

Enable these two flags in Chrome Canary:

• chrome://flags/#enable-experimental-web-platform-features
• chrome://flags/#soft-navigation-heuristics

And then entries for Soft Navigations and Iteraction Contentful Paint should also be added when profiling SPA interactions

Usage

Clone the repo, load as an unpacked extension in Chrome and then profile a page using the performance panel

Example Output

Notes

There are some good reasons why a script that contributes to a LoAF might not have attribution details but if you notice a main thread task that you think is missing a script attribution it's worth raising it with the Chrome team.

There are a few issues around this that have already been raised and / or fixed:

• LoAF doesn't currently attibute time spent in extension code, but there's a spec issue that discusses that
• There's a Chrome bug that's fixed in M133 where Promise resolvers weren't attributed when there was a render already scheduled

Available DevTools colours and payload types are:

type DevToolsColor =
  "primary" | "primary-light" | "primary-dark" |
  "secondary" | "secondary-light" | "secondary-dark" |
  "tertiary" | "tertiary-light" | "tertiary-dark" |
  "error";

interface ExtensionTrackEntryPayload {
  dataType?: "track-entry"; // Defaults to "track-entry"
  color?: DevToolsColor;    // Defaults to "primary"
  track: string;            // Required: Name of the custom track
  trackGroup?: string;      // Optional: Group for organizing tracks
  properties?: [string, string][]; // Key-value pairs for detailed view
  tooltipText?: string;     // Short description for tooltip
}

interface ExtensionMarkerPayload {
  dataType: "marker";       // Required: Identifies as a marker
  color?: DevToolsColor;    // Defaults to "primary"
  properties?: [string, string][]; // Key-value pairs for detailed view
  tooltipText?: string;     // Short description for tooltip
}