chrome-devtools-frontend 1.0.1536371 → 1.0.1537860

package/.env.template

@@ -0,0 +1,9 @@
+# This files is to be used when calling node script
+# Use --env-file-if-exists to make it optional
+DEVTOOLS_BROWSER=
+DEVTOOLS_UNSTABLE_FEATURES=
+DEVTOOLS_ENABLE_FEATURES=
+DEVTOOLS_AUTO_OPEN_DEVTOOLS=
+DEVTOOLS_REMOTE_DEBUGGING_PORT=
+DEVTOOLS_TARGET=
+DEVTOOLS_USER_DATA_DIR=

package/docs/get_the_code.md

@@ -100,6 +100,33 @@ sudo sysctl -p
 You may also need to pay attention to the values of `max_queued_events` and `max_user_instances`
 if you encounter any errors.
 
+### Using a `.env` file for default script options
+
+Many scripts, like `npm run build` and `npm start`, accept command-line flags to configure their behavior (e.g., `-t <target>`, `--browser=<name>`).
+
+To avoid typing these flags every time, you can set your preferred defaults in a .env file at the root of the devtools-frontend directory.
+
+The `.env.template` file lists all supported variables. Copy it to `.env` to get started.
+
+```bash
+cp .env.template .env
+```
+
+As mentioned earlier, you might create a fast build target. Instead of always typing `npm run build -- -t fast-build`, to remove the flag repetition you simple run `npm run build` you can set the following variable in your `.env` file:
+
+```shell
+DEVTOOLS_TARGET=fast-build
+```
+
+Another example - by default running `npm start` auto-opens DevTools for new Tabs.
+You may want to disable this so fewer pop-up happen while debugging, usually done via `--no-open` flag. Or with `.env` set the following value:
+
+```shell
+DEVTOOLS_AUTO_OPEN_DEVTOOLS=false
+```
+
+To use `.env` file from other script, refer to the helper in `scripts/env-utils.mjs`. That should provide the necessary helper to work with the config, and make maintenance simpler.
+
 ### Update to latest
 
 To update to latest tip of tree version:

package/front_end/core/common/SettingRegistration.ts

@@ -299,21 +299,24 @@ export interface SettingRegistration {
    * jump to the experiment. If a setting is not disabled, the experiment entry will be ignored.
    */
   deprecationNotice?: {disabled: boolean, warning: () => Platform.UIString.LocalizedString, experiment?: string};
-
   /**
-   * Optional information to learn more about the setting. If provided, a `(?)` icon will show next to the setting
-   * in the Settings panel with a link to learn more, and the `tooltip` will be presented to the user when hovering
-   * the `(?)` icon.
+   * See {@link LearnMore} for more info.
    */
   learnMore?: LearnMore;
 }
 
 /**
- * Metadata to learn more about a setting. The `url` will be used to construct
- * a `(?)` icon link and the `tooltip` will be shown when hovering the icon.
+ * Optional information to learn more about the setting.
+ *
+ * If tooltip is provided creates a (i) icon with rich tooltip with said tooltip
+ *
+ * If url is provided creates a (?) icon with a link to said url
+ *
+ * If both tooltip is provided creates a (i) icon with rich tooltip
+ * and a link inside the rich tool tip with text `Learn more`
  */
 export interface LearnMore {
-  tooltip: () => Platform.UIString.LocalizedString;
+  tooltip?: () => Platform.UIString.LocalizedString;
   url?: Platform.DevToolsPath.UrlString;
 }
 

package/front_end/core/common/Settings.ts

@@ -565,6 +565,9 @@ export class Setting<V> {
     return null;
   }
 
+  /**
+   * See {@link LearnMore} for more info
+   */
   learnMore(): LearnMore|null {
     return this.#registration?.learnMore ?? null;
   }

package/front_end/core/host/AidaClient.ts

@@ -5,6 +5,7 @@
 import * as Common from '../common/common.js';
 import * as Root from '../root/root.js';
 
+import * as DispatchHttpRequestClient from './DispatchHttpRequestClient.js';
 import {InspectorFrontendHostInstance} from './InspectorFrontendHost.js';
 import type {AidaClientResult, AidaCodeCompleteResult, SyncInformation} from './InspectorFrontendHostAPI.js';
 import {bindOutputStream} from './ResourceLoader.js';
@@ -213,6 +214,24 @@ export interface CompleteCodeOptions {
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 
+/* eslint-disable @typescript-eslint/naming-convention */
+export interface GenerateCodeOptions {
+  temperature?: number;
+  model_id?: string;
+  inference_language?: AidaInferenceLanguage;
+  expect_code_output?: boolean;
+}
+/* eslint-enable @typescript-eslint/naming-convention */
+
+/* eslint-disable @typescript-eslint/naming-convention */
+export interface ContextFile {
+  path: string;
+  full_content: string;
+  selected_content?: string;
+  programming_language: AidaInferenceLanguage;
+}
+/* eslint-enable @typescript-eslint/naming-convention */
+
 export enum EditType {
   // Unknown edit type
   EDIT_TYPE_UNSPECIFIED = 0,
@@ -252,6 +271,12 @@ export enum Reason {
 }
 
 /* eslint-disable @typescript-eslint/naming-convention */
+export interface AdditionalFile {
+  path: string;
+  content: string;
+  included_reason: Reason;
+}
+
 export interface CompletionRequest {
   client: string;
   prefix: string;
@@ -259,11 +284,28 @@ export interface CompletionRequest {
   options?: CompleteCodeOptions;
   metadata: RequestMetadata;
   last_user_action?: EditType;
-  additional_files?: Array<{
-    path: string,
-    content: string,
-    included_reason: Reason,
-  }>;
+  additional_files?: AdditionalFile[];
+}
+/* eslint-enable @typescript-eslint/naming-convention */
+
+export enum UseCase {
+  // Unspecified usecase.
+  USE_CASE_UNSPECIFIED = 0,
+
+  // Code generation use case is expected to generate code from scratch
+  CODE_GENERATION = 1,
+}
+
+/* eslint-disable @typescript-eslint/naming-convention */
+export interface GenerateCodeRequest {
+  client: string;
+  preamble: string;
+  current_message: Content;
+  options?: GenerateCodeOptions;
+  context_files?: ContextFile[];
+  use_case: UseCase;
+  metadata: RequestMetadata;
+  client_feature?: ClientFeature;
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 
@@ -363,6 +405,11 @@ export interface CompletionResponse {
   metadata: ResponseMetadata;
 }
 
+export interface GenerateCodeResponse {
+  samples: GenerationSample[];
+  metadata: ResponseMetadata;
+}
+
 export interface GenerationSample {
   generationString: string;
   score: number;
@@ -416,6 +463,7 @@ const AidaLanguageToMarkdown: Record<AidaInferenceLanguage, string> = {
 };
 
 export const CLIENT_NAME = 'CHROME_DEVTOOLS';
+export const SERVICE_NAME = 'aidaService';
 
 const CODE_CHUNK_SEPARATOR = (lang = ''): string => ('\n`````' + lang + '\n');
 
@@ -657,6 +705,17 @@ export class AidaClient {
 
     return {generatedSamples, metadata};
   }
+
+  async generateCode(request: GenerateCodeRequest): Promise<GenerateCodeResponse|null> {
+    const response = await DispatchHttpRequestClient.makeHttpRequest<GenerateCodeResponse>({
+      service: SERVICE_NAME,
+      path: '/v1/aida:generateCode',
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+
+    return response;
+  }
 }
 
 export function convertToUserTierEnum(userTier: string|undefined): UserTier {

package/front_end/core/host/DispatchHttpRequestClient.ts

@@ -0,0 +1,62 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {InspectorFrontendHostInstance} from './InspectorFrontendHost.js';
+import type {DispatchHttpRequestRequest, DispatchHttpRequestResult} from './InspectorFrontendHostAPI.js';
+
+export enum ErrorType {
+  HTTP_RESPONSE_UNAVAILABLE = 'HTTP_RESPONSE_UNAVAILABLE',
+  NOT_FOUND = 'NOT_FOUND',
+}
+
+export class DispatchHttpRequestError extends Error {
+  constructor(readonly type: ErrorType, options?: ErrorOptions) {
+    super(undefined, options);
+  }
+}
+
+export async function makeHttpRequest<R>(request: DispatchHttpRequestRequest): Promise<R> {
+  const response = await new Promise<DispatchHttpRequestResult>(resolve => {
+    InspectorFrontendHostInstance.dispatchHttpRequest(request, resolve);
+  });
+
+  debugLog({request, response});
+  if (response.statusCode === 404) {
+    throw new DispatchHttpRequestError(ErrorType.NOT_FOUND);
+  }
+
+  if ('response' in response && response.statusCode === 200) {
+    try {
+      return JSON.parse(response.response) as R;
+    } catch (err) {
+      throw new DispatchHttpRequestError(ErrorType.HTTP_RESPONSE_UNAVAILABLE, {cause: err});
+    }
+  }
+
+  throw new DispatchHttpRequestError(ErrorType.HTTP_RESPONSE_UNAVAILABLE);
+}
+
+function isDebugMode(): boolean {
+  return Boolean(localStorage.getItem('debugDispatchHttpRequestEnabled'));
+}
+
+function debugLog(...log: unknown[]): void {
+  if (!isDebugMode()) {
+    return;
+  }
+
+  // eslint-disable-next-line no-console
+  console.log('debugLog', ...log);
+}
+
+function setDebugDispatchHttpRequestEnabled(enabled: boolean): void {
+  if (enabled) {
+    localStorage.setItem('debugDispatchHttpRequestEnabled', 'true');
+  } else {
+    localStorage.removeItem('debugDispatchHttpRequestEnabled');
+  }
+}
+
+// @ts-expect-error
+globalThis.setDebugDispatchHttpRequestEnabled = setDebugDispatchHttpRequestEnabled;

package/front_end/core/host/GdpClient.ts

@@ -4,8 +4,8 @@
 
 import * as Root from '../root/root.js';
 
-import {InspectorFrontendHostInstance} from './InspectorFrontendHost.js';
-import type {DispatchHttpRequestRequest, DispatchHttpRequestResult} from './InspectorFrontendHostAPI.js';
+import * as DispatchHttpRequestClient from './DispatchHttpRequestClient.js';
+import type {DispatchHttpRequestRequest} from './InspectorFrontendHostAPI.js';
 
 export enum SubscriptionStatus {
   ENABLED = 'SUBSCRIPTION_STATE_ENABLED',
@@ -73,17 +73,6 @@ export interface GetProfileResponse {
   isEligible: boolean;
 }
 
-export enum GdpErrorType {
-  HTTP_RESPONSE_UNAVAILABLE = 'HTTP_RESPONSE_UNAVAILABLE',
-  NOT_FOUND = 'NOT_FOUND',
-}
-
-class GdpError extends Error {
-  constructor(readonly type: GdpErrorType, options?: ErrorOptions) {
-    super(undefined, options);
-  }
-}
-
 /**
  * The `batchGet` awards endpoint returns badge names with an
  * obfuscated user ID (e.g., `profiles/12345/awards/badge-name`).
@@ -99,27 +88,12 @@ export const GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK = 'https://developers.google.
 
 async function makeHttpRequest<R>(request: DispatchHttpRequestRequest): Promise<R> {
   if (!isGdpProfilesAvailable()) {
-    throw new GdpError(GdpErrorType.HTTP_RESPONSE_UNAVAILABLE);
-  }
-
-  const response = await new Promise<DispatchHttpRequestResult>(resolve => {
-    InspectorFrontendHostInstance.dispatchHttpRequest(request, resolve);
-  });
-
-  debugLog({request, response});
-  if (response.statusCode === 404) {
-    throw new GdpError(GdpErrorType.NOT_FOUND);
-  }
-
-  if ('response' in response && response.statusCode === 200) {
-    try {
-      return JSON.parse(response.response) as R;
-    } catch (err) {
-      throw new GdpError(GdpErrorType.HTTP_RESPONSE_UNAVAILABLE, {cause: err});
-    }
+    throw new DispatchHttpRequestClient.DispatchHttpRequestError(
+        DispatchHttpRequestClient.ErrorType.HTTP_RESPONSE_UNAVAILABLE);
   }
 
-  throw new GdpError(GdpErrorType.HTTP_RESPONSE_UNAVAILABLE);
+  const response = await DispatchHttpRequestClient.makeHttpRequest(request) as R;
+  return response;
 }
 
 const SERVICE_NAME = 'gdpService';
@@ -158,7 +132,8 @@ export class GdpClient {
         isEligible: true,
       };
     } catch (err: unknown) {
-      if (err instanceof GdpError && err.type === GdpErrorType.HTTP_RESPONSE_UNAVAILABLE) {
+      if (err instanceof DispatchHttpRequestClient.DispatchHttpRequestError &&
+          err.type === DispatchHttpRequestClient.ErrorType.HTTP_RESPONSE_UNAVAILABLE) {
         return null;
       }
     }
@@ -265,27 +240,6 @@ export class GdpClient {
   }
 }
 
-function isDebugMode(): boolean {
-  return Boolean(localStorage.getItem('debugGdpIntegrationEnabled'));
-}
-
-function debugLog(...log: unknown[]): void {
-  if (!isDebugMode()) {
-    return;
-  }
-
-  // eslint-disable-next-line no-console
-  console.log('debugLog', ...log);
-}
-
-function setDebugGdpIntegrationEnabled(enabled: boolean): void {
-  if (enabled) {
-    localStorage.setItem('debugGdpIntegrationEnabled', 'true');
-  } else {
-    localStorage.removeItem('debugGdpIntegrationEnabled');
-  }
-}
-
 export function isGdpProfilesAvailable(): boolean {
   const isBaseFeatureEnabled = Boolean(Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled);
   const isBrandedBuild = Boolean(Root.Runtime.hostConfig.devToolsGdpProfilesAvailability?.enabled);
@@ -311,6 +265,3 @@ export function isBadgesEnabled(): boolean {
 export function isStarterBadgeEnabled(): boolean {
   return Boolean(Root.Runtime.hostConfig.devToolsGdpProfiles?.starterBadgeEnabled);
 }
-
-// @ts-expect-error
-globalThis.setDebugGdpIntegrationEnabled = setDebugGdpIntegrationEnabled;

package/front_end/core/host/host.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as AidaClient from './AidaClient.js';
+import * as DispatchHttpRequestClient from './DispatchHttpRequestClient.js';
 import * as GdpClient from './GdpClient.js';
 import * as InspectorFrontendHost from './InspectorFrontendHost.js';
 import * as InspectorFrontendHostAPI from './InspectorFrontendHostAPI.js';
@@ -12,6 +13,7 @@ import * as UserMetrics from './UserMetrics.js';
 
 export {
   AidaClient,
+  DispatchHttpRequestClient,
   GdpClient,
   InspectorFrontendHost,
   InspectorFrontendHostAPI,

package/front_end/core/protocol_client/CDPConnection.ts

@@ -41,17 +41,19 @@ export const enum CDPErrorStatus {
   SESSION_NOT_FOUND = SERVER_ERROR - 1,
 }
 
-export interface CDPError extends CDPBaseMessage {
+export interface CDPError {
+  code: CDPErrorStatus;
+  message: string;
+  data?: string;
+}
+
+export interface CDPErrorMessage extends CDPBaseMessage {
   id?: number;
-  error: {
-    code: CDPErrorStatus,
-    message: string,
-    data?: string,
-  };
+  error: CDPError;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type CDPMessage = CDPCommandRequest<any>|CDPCommandResponse<any>|CDPEvent<any>|CDPError;
+export type CDPMessage = CDPCommandRequest<any>|CDPCommandResponse<any>|CDPEvent<any>|CDPErrorMessage;
 
 /**
  * Allows the sending and receiving of CDP commands and the notification of CDP events to observers.
@@ -62,7 +64,7 @@ export type CDPMessage = CDPCommandRequest<any>|CDPCommandResponse<any>|CDPEvent
  */
 export interface CDPConnection {
   send<T extends keyof ProtocolMapping.Commands>(method: T, params: CommandParams<T>, sessionId: string|undefined):
-      Promise<CommandResult<T>|{getError(): string}>;
+      Promise<{result: CommandResult<T>}|{error: CDPError}>;
 
   observe(observer: CDPConnectionObserver): void;
   unobserve(observer: CDPConnectionObserver): void;

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -67,9 +67,13 @@ interface CommandParameter {
 }
 
 type Callback = (error: MessageError|null, arg1: Object|null) => void;
+interface ResponseWithError {
+  error: MessageError|null;
+  result: Object|null;
+}
 
 interface CallbackWithDebugInfo {
-  callback: Callback;
+  resolve: (response: ResponseWithError) => void;
   method: string;
 }
 
@@ -241,8 +245,15 @@ export class SessionRouter {
     if (!session) {
       return;
     }
-    for (const callback of session.callbacks.values()) {
-      SessionRouter.dispatchUnregisterSessionError(callback);
+    for (const {resolve, method} of session.callbacks.values()) {
+      resolve({
+        result: null,
+        error: {
+          message: `Session is unregistering, can\'t dispatch pending call to ${method}`,
+          code: ConnectionClosedErrorCode,
+          data: null,
+        }
+      });
     }
     this.#sessions.delete(sessionId);
   }
@@ -255,7 +266,8 @@ export class SessionRouter {
     return this.#connection;
   }
 
-  sendMessage(sessionId: string, domain: string, method: QualifiedName, params: Object|null, callback: Callback): void {
+  sendMessage(sessionId: string, domain: string, method: QualifiedName, params: Object|null):
+      Promise<ResponseWithError> {
     const messageId = this.nextMessageId();
     const messageObject: Message = {
       id: messageId,
@@ -285,16 +297,19 @@ export class SessionRouter {
 
     const session = this.#sessions.get(sessionId);
     if (!session) {
-      return;
+      return Promise.resolve({error: null, result: null});
     }
-    session.callbacks.set(messageId, {callback, method});
-    this.#connection.sendRawMessage(JSON.stringify(messageObject));
+
+    return new Promise(resolve => {
+      session.callbacks.set(messageId, {resolve, method});
+      this.#connection.sendRawMessage(JSON.stringify(messageObject));
+    });
   }
 
   private sendRawMessageForTesting(method: QualifiedName, params: Object|null, callback: Callback|null, sessionId = ''):
       void {
     const domain = method.split('.')[0];
-    this.sendMessage(sessionId, domain, method, params, callback || (() => {}));
+    void this.sendMessage(sessionId, domain, method, params).then(({error, result}) => callback?.(error, result));
   }
 
   private onMessage(message: string|Object): void {
@@ -357,7 +372,7 @@ export class SessionRouter {
         return;
       }
 
-      callback.callback(messageObject.error || null, messageObject.result || null);
+      callback.resolve({error: messageObject.error || null, result: messageObject.result || null});
       --this.#pendingResponsesCount;
       this.#pendingLongPollingMessageIds.delete(messageObject.id);
 
@@ -403,24 +418,6 @@ export class SessionRouter {
       }
     }
   }
-
-  static dispatchConnectionError(callback: Callback, method: string): void {
-    const error = {
-      message: `Connection is closed, can\'t dispatch pending call to ${method}`,
-      code: ConnectionClosedErrorCode,
-      data: null,
-    };
-    window.setTimeout(() => callback(error, null), 0);
-  }
-
-  static dispatchUnregisterSessionError({callback, method}: CallbackWithDebugInfo): void {
-    const error = {
-      message: `Session is unregistering, can\'t dispatch pending call to ${method}`,
-      code: ConnectionClosedErrorCode,
-      data: null,
-    };
-    window.setTimeout(() => callback(error, null), 0);
-  }
 }
 
 /**
@@ -878,23 +875,20 @@ class AgentPrototype {
   }
 
   private invoke(method: QualifiedName, request: Object|null): Promise<Protocol.ProtocolResponseWithError> {
-    return new Promise(fulfill => {
-      const callback: Callback = (error: MessageError|undefined|null, result: Object|null): void => {
-        if (error && !test.suppressRequestErrors && error.code !== DevToolsStubErrorCode &&
-            error.code !== GenericErrorCode && error.code !== ConnectionClosedErrorCode) {
-          console.error('Request ' + method + ' failed. ' + JSON.stringify(error));
-        }
-
-        const errorMessage = error?.message;
-        fulfill({...result, getError: () => errorMessage});
-      };
+    const router = this.target.router();
+    if (!router) {
+      return Promise.resolve(
+          {result: null, getError: () => `Connection is closed, can\'t dispatch pending call to ${method}`});
+    }
 
-      const router = this.target.router();
-      if (!router) {
-        SessionRouter.dispatchConnectionError(callback, method);
-      } else {
-        router.sendMessage(this.target.sessionId, this.domain, method, request, callback);
+    return router.sendMessage(this.target.sessionId, this.domain, method, request).then(({error, result}) => {
+      if (error && !test.suppressRequestErrors && error.code !== DevToolsStubErrorCode &&
+          error.code !== GenericErrorCode && error.code !== ConnectionClosedErrorCode) {
+        console.error('Request ' + method + ' failed. ' + JSON.stringify(error));
       }
+
+      const errorMessage = error?.message;
+      return {...result, getError: () => errorMessage};
     });
   }
 }

package/front_end/core/sdk/EnhancedTracesParser.ts

@@ -8,7 +8,7 @@ import type * as Platform from '../platform/platform.js';
 import {UserVisibleError} from '../platform/platform.js';
 
 import type {
-  HydratingDataPerTarget, RehydratingExecutionContext, RehydratingScript, RehydratingTarget} from
+  HydratingDataPerTarget, RehydratingExecutionContext, RehydratingResource, RehydratingScript, RehydratingTarget} from
   './RehydratingObject.js';
 import type {SourceMapV3} from './SourceMap.js';
 import type {TraceObject} from './TraceObject.js';
@@ -142,6 +142,7 @@ export class EnhancedTracesParser {
   #targets: RehydratingTarget[] = [];
   #executionContexts: RehydratingExecutionContext[] = [];
   #scripts: RehydratingScript[] = [];
+  #resources: RehydratingResource[] = [];
   static readonly enhancedTraceVersion: number = 1;
 
   constructor(trace: TraceObject) {
@@ -319,7 +320,10 @@ export class EnhancedTracesParser {
       this.resolveSourceMap(script);
     }
 
-    return this.groupContextsAndScriptsUnderTarget(this.#targets, this.#executionContexts, this.#scripts);
+    this.#resources = this.#trace.metadata.resources ?? [];
+
+    return this.groupContextsAndScriptsUnderTarget(
+        this.#targets, this.#executionContexts, this.#scripts, this.#resources);
   }
 
   private resolveSourceMap(script: RehydratingScript): void {
@@ -411,8 +415,8 @@ export class EnhancedTracesParser {
   }
 
   private groupContextsAndScriptsUnderTarget(
-      targets: RehydratingTarget[], executionContexts: RehydratingExecutionContext[],
-      scripts: RehydratingScript[]): HydratingDataPerTarget[] {
+      targets: RehydratingTarget[], executionContexts: RehydratingExecutionContext[], scripts: RehydratingScript[],
+      resources: RehydratingResource[]): HydratingDataPerTarget[] {
     const data: HydratingDataPerTarget[] = [];
     const targetIds = new Set<Protocol.Target.TargetID>();
     const targetToExecutionContexts: Map<string, RehydratingExecutionContext[]> =
@@ -424,12 +428,15 @@ export class EnhancedTracesParser {
     const targetToScripts: Map<Protocol.Target.TargetID, RehydratingScript[]> =
         new Map<Protocol.Target.TargetID, RehydratingScript[]>();
     const orphanScripts: RehydratingScript[] = [];
+    const targetToResources: Map<Protocol.Target.TargetID, RehydratingResource[]> =
+        new Map<Protocol.Target.TargetID, RehydratingResource[]>();
 
     // Initialize all the mapping needed
     for (const target of targets) {
       targetIds.add(target.targetId);
       targetToExecutionContexts.set(target.targetId, []);
       targetToScripts.set(target.targetId, []);
+      targetToResources.set(target.targetId, []);
     }
 
     // Put all of the known execution contexts under respective targets
@@ -485,12 +492,20 @@ export class EnhancedTracesParser {
       }
     }
 
+    for (const resource of resources) {
+      const frameId = resource.frame as Protocol.Target.TargetID;
+      if (targetIds.has(frameId)) {
+        targetToResources.get(frameId)?.push(resource);
+      }
+    }
+
     // Now all the scripts are linked to a target, we want to make sure all the scripts are pointing to a valid
     // execution context. If not, we will create an artificial execution context for the script
     for (const target of targets) {
       const targetId = target.targetId;
       const executionContexts = targetToExecutionContexts.get(targetId) || [];
       const scripts = targetToScripts.get(targetId) || [];
+      const resources = targetToResources.get(targetId) || [];
       for (const script of scripts) {
         if (!executionContexts.find(context => context.id === script.executionContextId)) {
           const artificialContext: RehydratingExecutionContext = {
@@ -511,7 +526,7 @@ export class EnhancedTracesParser {
       }
 
       // Finally, we put all the information into the data structure we want to return as.
-      data.push({target, executionContexts, scripts});
+      data.push({target, executionContexts, scripts, resources});
     }
 
     return data;