chrome-devtools-frontend

# Traces This folder contains traces saved by the DevTools Performance Panel that can be used in tests. To add a trace, copy the `*.json.gz` file into this folder, and add it to the `BUILD.gn`. You can also add the unzipped `*.json` file, but these are git-ignored. However, it's useful when working with a trace file to have it extracted and inspectable! There are two helpers you can use to load a trace file into a test, depending on which model you are working with: ## OPP "legacy" model Use `loadTraceEventsLegacyEventPayload`. This loads the file and assumes it returns a list of `SDK.TracingManager.EventPayload` events. ### Insights model The Insights model supports trace files in two forms: 1. An array of events. 2. An object, with an array of `traceEvents` and associated `metadata` You can use `loadEventsFromTraceFile` to return all the events in a trace file. If you want to load the entire file, you can use `loadTraceFile`. If you have created an example website to generate a trace, consider contributing it to the [Performance Stories repository](https://github.com/ChromeDevTools/performance-stories). # Trace descriptions **If you add a trace, please update this file with a description of the file and how it was generated**. ## basic Contains a navigation to about:blank first and then to another URL. Includes data from about:blank to ensure a track for that URL is rendered. ## basic A very barebones trace; contains info on browser processes and threads but very little else. ## slow-interaction-button-click Generated from the [long-interaction story](https://github.com/ChromeDevTools/performance-stories/tree/main/long-interaction). Contains one slow interaction which is the user clicking on a button. ## slow-interaction-keydown Generated from the [long-interaction story](https://github.com/ChromeDevTools/performance-stories/tree/main/long-interaction). Contains one slow interaction which is the user typing into the input field. There is also another interaction representing the user clicking into the text field to focus it, but this is not a long interaction. ## Example trace files ### async-js-calls Contains `setTimeout`, `requestAnimationFrame` and `requestIdleCallback` calls and the JS async call stack tracking trace events ("v8::Debugger::AsyncTaskScheduled" and "v8::Debugger::AsyncTaskRun") ### basic A barebones trace file with the main details about processes and threads but little else. ### reload-and-trace-page This trace is a trace of example.com which was recorded via the OPP's "Start profiling and reload the page" button. ### web-dev A trace of web.dev being loaded. ### web-dev-with-commit The web-dev trace is old (recorded in 2021) and since its recording the events relating to frames have changed. In particular CompositeLayers was replaced by Commit, and frameSeqId was added to more events. This is a more recent (Nov 2023) trace that has the newer frame-related events in it. This was used when migrating the TimelineFrameModel to the new engine. ### multiple-top-level-renderers A trace containing multiple top level renderers. ### missing-process-data A trace missing the renderer process. ### threejs-gpu A trace containing a lot of GPU activity. ### forced-layouts-and-no-gpu A trace that contains a button that, when clicked, will iterate over 30 paragraphs and increment their width to the width of a div. This causes a forced layout event for each one. Additionally this trace contains no GPU thread. ### multiple-navigations This is a trace that includes multiple navigations: * Starts on google.com * Navigates to Google Images search (google.com/imghp) * Search for "dogs" (https://www.google.com/search?q=dogs&...) ### user-timings Generated from https://github.com/ChromeDevTools/performance-stories/tree/main/user-timings ### user-timings-details A trace that contains one `performance.mark` and one `performance.measure` call, both of which have details. The measure contains the `devtools` property in details. ### lcp-web-font Generated from https://github.com/ChromeDevTools/performance-stories/tree/main/lcp-web-font ### lcp-images Generated from https://github.com/ChromeDevTools/performance-stories/tree/main/lcp-large-image ### recursive-blocking-js A trace that contains 3 invocations of a JS function, spaced 1 second apart, which recurses 10 times, and blocks for one second in total with performance.now. ### recursive-counting-js A trace that contains 3 invocations of a JS function, spaced 1 second apart, which recurses 3 times, and blocks for one second in total by summing over all integers until 1_000_000_000. ### multiple-navigations-with-iframes.json This trace loads `index.html`, with an iframe to load `example.com`. It then loads `page2.html`, which also loads `example.com` in an iFrame. This trace is used to make sure we filter out events in iFrames (such as MarkDOMContent). ### animation.json Generated by https://github.com/ChromeDevTools/performance-stories/tree/main/animation. ### many-requests Generated by https://github.com/ChromeDevTools/performance-stories/tree/main/lots-of-network-requests. Loads 20 images from the placeholder API and an extra script and stylesheet. Trace was recorded on 3G throttling, so some of the requests have not even finished. ### idle-callback A trace with an idle callback that exceeds its allotted time. ### large-layout-small-recalc Generated from https://github.com/ChromeDevTools/performance-stories/tree/main/forced-layout-main-thread. Has a large layout event (126ms) and a smaller recalc style event (4.07ms). ### large-recalc-style Generated from https://github.com/ChromeDevTools/performance-stories/tree/main/forced-layout-main-thread. Has a large recalc style event that isn't forced by JS. ### two-workers Generated from https://github.com/ChromeDevTools/performance-stories/tree/main/two-workers. Runs two workers that both calculate fibonnaci numbers. ### timer-initiators Contains a `setTimeout`, `requestAnimationFrame` and `requestIdleCallback` call. ### multiple-navigations-same-id Contains a trace with two identical navigation events with matching IDs. See crbug.com/1503982 for the context and comments in MetaHandler.ts for the fix. This trace is included to avoid a regression. ### web-dev-initial-url This is a trace where we loaded web.dev/inp, but the initial URL reported by the TraceStartedInBrowser event states google.com (the previous page). In this situation the MetaHandler would produce google.com as the mainFrameURL which is incorrect. This trace was used to write a test to ensure in this instance if we can we try to calculate the actual domain by looking at the first navigation. ### render-blocking-in-iframe Contains a navigation to a page with a render blocking request `style.css?main` and an iframe. The iframe also contains a render blocking request `style.css?iframe`. ### multiple-navigations-render-blocking Contains a navigation to a page with a render blocking request `script.js` followed by a page refresh. ### parser-blocking-after-paint Contains a navigation to a page with a `in_body_parser_blocking` request `script.js` that is downloaded after first paint. ### postmessage-initiators Contains a `postMessage.Handler`, and associating `postMessage.Dispatch` call. ### render-blocking-in-body Contains the following requests in the document body: - `frame.html`: an iframe document fetched before the image - `style.css`: a stylesheet fetched before the image - `script.js?beforeImage`: a script fetched before the image - `chrome.jpeg`: a normal image - `script.js?afterImage`: a script fetched after the image ### web-dev-modifications Contains a recording of web-dev with the following modifications: - One entry with hidden children - A child breadcrumb under the total trace window. ### iframe-shift Generated from the shift-attribution page in https://github.com/GoogleChrome/lighthouse/blob/main/cli/test/fixtures/shift-attribution.html. Contains an iframe and layout shifts. ### primary-page-frame Created from the speculation-rules demo page (https://speculative-rules.glitch.me/common-fruits.html). Contains a trace that includes the `isInPrimaryPageFrame` flag added to Chromium in crrev.com/c/5595033, which allows the trace engine to more accurately identify the main thread via the primary frame. ### enhanced-traces Contains traces with metadata needed to power a rehydrated session for enhanced tracing. ### initiators Contains a recording with network request's initiator information. ### over-20-invalidations-per-event Contains a trace where one Layout event has 26 invalidations associated with it. ### scheduler-post-task Generated from the [scheduler story](https://github.com/ChromeDevTools/performance-stories/tree/main/scheduler). Contains a series of `scheduler.postTask()` calls of different priority and delay, some nested and some ending up cancelled. ### image-delivery Generate from a page load [this HTML file](https://gist.github.com/adamraine/397e2bd08665f9e45f6072e446715115). Contains a series of test cases for the image delivery insight. ### dom-size Generate from a recording of [this HTML file](https://gist.github.com/adamraine/bfdb3cecca2322bf74f1e725d9a4699d) with the following steps: 1. Set CPU throttling to 20x 2. Start recording without reloading the page 3. Click the button once 4. Reload the page 5. Click the button once 6. End recording ### dom-size-long Contains a trace from a site with a large DOM. It also happens to have many flows with duplicated flow bindings, so it's useful to test the FlowsHandler remains quick. ### lcp-multiple-frames Generated from [lcp-iframes story](https://github.com/ChromeDevTools/performance-stories/tree/main/lcp-iframes). Contains a page load that has two frames (main frame + iframe). There are two images loaded in each: - the iframe loads placeholder.co/50.jpg and placeholder.co/2000.jpg - the main frame loads placeholder.co/100.jpg and placeholder.co/1000.jpg This trace is used to verify the fix for a bug [crbug.com/384000716] where we incorrectly associated image requests to the wrong navigation when calculating the LCP image. ### lcp-lates-paint-event This is a trace where a `LargestImagePaint` event occurs after the last `largestContentfulPaint::Candidate` event. ### web-dev-screenshot-source-ids A trace generated from crrev.com/c/6197645 (January 2025), which changed the format of screenshots from the legacy OBJECT_SNAPSHOT format to be instant events with more information attached to them. ### dom-size-overlap Trace containing a cross-origin navigation where DOM size events from the pre-navigation page are emitted *after* the navigation event. ### lcp-fetchpriority-high A page that loads an image as the LCP resource with fetchpriority=high set.