chrome-devtools-frontend 1.0.1645245 → 1.0.1646714

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -23,6 +23,8 @@ import * as AiUtils from './AiUtils.js';
 import * as BuiltInAi from './BuiltInAi.js';
 import * as ChangeManager from './ChangeManager.js';
 import * as DOMNodeContext from './contexts/DOMNodeContext.js';
+import * as FileContext from './contexts/FileContext.js';
+import * as RequestContext from './contexts/RequestContext.js';
 import * as ConversationSummary from './ConversationSummary.js';
 import * as FileFormatter from './data_formatters/FileFormatter.js';
 import * as LighthouseFormatter from './data_formatters/LighthouseFormatter.js';
@@ -40,7 +42,9 @@ import * as AIQueries from './performance/AIQueries.js';
 import * as PerformanceAnnotations from './PerformanceAnnotations.js';
 import * as StorageItem from './StorageItem.js';
 import * as ExecuteJavaScript from './tools/ExecuteJavaScript.js';
+import * as GetNetworkRequestDetails from './tools/GetNetworkRequestDetails.js';
 import * as GetStyles from './tools/GetStyles.js';
+import * as ListNetworkRequests from './tools/ListNetworkRequests.js';
 import * as Tool from './tools/Tool.js';
 import * as ToolRegistry from './tools/ToolRegistry.js';
 
@@ -66,13 +70,16 @@ export {
   ExecuteJavaScript,
   ExtensionScope,
   FileAgent,
+  FileContext,
   FileFormatter,
+  GetNetworkRequestDetails,
   GetStyles,
   GreenDevAgent,
   GreenDevAgentAntigravityCliSocketClient,
   GreenDevAgentGeminiCliSocketClient,
   Injected,
   LighthouseFormatter,
+  ListNetworkRequests,
   NetworkAgent,
   NetworkRequestFormatter,
   PatchAgent,
@@ -80,6 +87,7 @@ export {
   PerformanceAnnotations,
   PerformanceInsightFormatter,
   PerformanceTraceFormatter,
+  RequestContext,
   StorageAgent,
   StorageItem,
   StylingAgent,

package/front_end/models/ai_assistance/contexts/FileContext.ts

@@ -0,0 +1,45 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Workspace from '../../workspace/workspace.js';
+import {type ContextDetail, ConversationContext} from '../agents/AiAgent.js';
+import {FileFormatter} from '../data_formatters/FileFormatter.js';
+
+export class FileContext extends ConversationContext<Workspace.UISourceCode.UISourceCode> {
+  #file: Workspace.UISourceCode.UISourceCode;
+
+  constructor(file: Workspace.UISourceCode.UISourceCode) {
+    super();
+    this.#file = file;
+  }
+
+  override getURL(): string {
+    return this.#file.url();
+  }
+
+  override getItem(): Workspace.UISourceCode.UISourceCode {
+    return this.#file;
+  }
+
+  override getTitle(): string {
+    return this.#file.displayName();
+  }
+
+  override async getPromptDetails(): Promise<string|null> {
+    return `# Selected file\n${new FileFormatter(this.#file).formatFile()}`;
+  }
+
+  override async getUserFacingDetails(): Promise<[ContextDetail, ...ContextDetail[]]|null> {
+    return [
+      {
+        title: 'Selected file',
+        text: new FileFormatter(this.#file).formatFile(),
+      },
+    ];
+  }
+
+  override async refresh(): Promise<void> {
+    await this.#file.requestContentData();
+  }
+}

package/front_end/models/ai_assistance/contexts/RequestContext.snapshot.txt

@@ -0,0 +1,48 @@
+Title: RequestContext getPromptDetails describes the network request correctly
+Content:
+# Selected network request
+Request: https://www.example.com/api/users
+
+Request headers:
+Accept: application/json
+
+Response headers:
+Content-Type: application/json
+
+Response body:
+{}
+
+Response status: 200
+Network request status: pending
+
+Request timing:
+Queued at (timestamp): 0 s
+Started at (timestamp): 0 s
+Connection start (stalled) (duration): -
+Duration (duration): -
+
+Request initiator chain:
+- URL: https://www.example.com/api/users
+=== end content
+
+Title: RequestContext getUserFacingDetails returns details correctly
+Content:
+[
+  {
+    "title": "Request",
+    "text": "Request URL: https://www.example.com/api/users\n\nRequest headers:\nAccept: application/json"
+  },
+  {
+    "title": "Response",
+    "text": "Response headers:\nContent-Type: application/json\n\nResponse body:\n{}\n\nResponse status: 200\nNetwork request status: pending\n"
+  },
+  {
+    "title": "Timing",
+    "text": "Queued at (timestamp): 0 s\nStarted at (timestamp): 0 s\nConnection start (stalled) (duration): -\nDuration (duration): -"
+  },
+  {
+    "title": "Request initiator chain",
+    "text": "- URL: https://www.example.com/api/users"
+  }
+]
+=== end content

package/front_end/models/ai_assistance/contexts/RequestContext.ts

@@ -0,0 +1,116 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../../core/common/common.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
+import type * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
+import {
+  type ContextDetail,
+  ConversationContext,
+} from '../agents/AiAgent.js';
+import {extractContextOrigin} from '../AiOrigins.js';
+import {NetworkRequestFormatter} from '../data_formatters/NetworkRequestFormatter.js';
+
+const UIStringsNotTranslate = {
+  request: 'Request',
+  response: 'Response',
+  requestUrl: 'Request URL',
+  timing: 'Timing',
+  requestInitiatorChain: 'Request initiator chain',
+} as const;
+
+const lockedString = i18n.i18n.lockedString;
+
+/**
+ * Returns the origin for a network request in the AI context.
+ *
+ * To prevent cross-origin prompt injection attacks, HAR-imported requests
+ * are isolated from live pages. We assign them a virtual origin
+ * (`imported-har://${domain}`) so they do not share the origin of live pages
+ * (e.g., `https://${domain}`). This forces a conversation reset when transitioning
+ * between imported HAR data and live pages.
+ */
+export function getRequestContextOrigin(request: SDK.NetworkRequest.NetworkRequest): string {
+  const origin = extractContextOrigin(request.documentURL);
+  if (request.isImportedHar()) {
+    const parsed = Common.ParsedURL.ParsedURL.fromString(origin as Platform.DevToolsPath.UrlString);
+    return `imported-har://${parsed ? parsed.domain() : origin}`;
+  }
+  return origin;
+}
+
+export class RequestContext extends ConversationContext<SDK.NetworkRequest.NetworkRequest> {
+  #request: SDK.NetworkRequest.NetworkRequest;
+  #calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator;
+
+  constructor(
+      request: SDK.NetworkRequest.NetworkRequest,
+      calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator,
+  ) {
+    super();
+    this.#request = request;
+    this.#calculator = calculator;
+  }
+
+  /**
+   * Note: this is not the literal origin of the network request. This URL
+   * is used to determine when we should force the user to start a new AI
+   * conversation when the context changes. We allow a single AI conversation to
+   * inspect all network requests that were made for that given target URL.
+   */
+  override getURL(): string {
+    return this.#request.documentURL;
+  }
+
+  override getOrigin(): string {
+    return getRequestContextOrigin(this.#request);
+  }
+
+  override getItem(): SDK.NetworkRequest.NetworkRequest {
+    return this.#request;
+  }
+
+  override getTitle(): string {
+    return this.#request.name();
+  }
+
+  override async getPromptDetails(): Promise<string|null> {
+    const formatter = new NetworkRequestFormatter(this.#request, this.#calculator);
+    return `# Selected network request\n${await formatter.formatNetworkRequest()}`;
+  }
+
+  override async getUserFacingDetails(): Promise<[ContextDetail, ...ContextDetail[]]|null> {
+    const formatter = new NetworkRequestFormatter(this.#request, this.#calculator);
+    const requestContextDetail: ContextDetail = {
+      title: lockedString(UIStringsNotTranslate.request),
+      text: lockedString(UIStringsNotTranslate.requestUrl) + ': ' + this.#request.url() + '\n\n' +
+          formatter.formatRequestHeaders(),
+    };
+    const responseBody = await formatter.formatResponseBody();
+    const responseBodyString = responseBody ? `\n\n${responseBody}` : '';
+
+    const responseContextDetail: ContextDetail = {
+      title: lockedString(UIStringsNotTranslate.response),
+      text: formatter.formatResponseHeaders() + responseBodyString +
+          `\n\n${formatter.formatStatus()}${formatter.formatFailureReasons()}`,
+    };
+    const timingContextDetail: ContextDetail = {
+      title: lockedString(UIStringsNotTranslate.timing),
+      text: formatter.formatNetworkRequestTiming(),
+    };
+    const initiatorChainContextDetail: ContextDetail = {
+      title: lockedString(UIStringsNotTranslate.requestInitiatorChain),
+      text: formatter.formatRequestInitiatorChain(),
+    };
+
+    return [
+      requestContextDetail,
+      responseContextDetail,
+      timingContextDetail,
+      initiatorChainContextDetail,
+    ];
+  }
+}

package/front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.ts

@@ -92,7 +92,8 @@ export class NetworkRequestFormatter {
   }): string {
     let responseStatus = '';
     if (status.statusCode) {
-      responseStatus = `Response status: ${status.statusCode} ${status.statusText}\n`;
+      const statusText = status.statusText ? ` ${status.statusText}` : '';
+      responseStatus = `Response status: ${status.statusCode}${statusText}\n`;
     }
     const flags = [];
     flags.push(status.finished ? 'finished' : 'pending');

package/front_end/models/ai_assistance/skills/Skill.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 // This will become a union type as we add more skills (e.g. 'styling' | 'network').
-export type SkillName = 'styling';
+export type SkillName = 'styling'|'network';
 
 export interface Skill {
   name: SkillName;

package/front_end/models/ai_assistance/skills/SkillRegistry.ts

@@ -2,9 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {skill as networkSkill} from './network.skill.js';
 import type {Skill, SkillName} from './Skill.js';
 import {skill as stylingSkill} from './styling.skill.js';
 
 export const SKILLS: Record<SkillName, Skill> = {
   styling: stylingSkill,
+  network: networkSkill,
 };

package/front_end/models/ai_assistance/skills/network.md

@@ -0,0 +1,16 @@
+---
+name: network
+description: Analyzing network traffic, network requests, HTTP/HTTPS headers, status codes, payload details, timing/performance, and request sizes.
+allowed-tools:
+  - listNetworkRequests
+  - getNetworkRequestDetails
+---
+You are the most advanced network request debugging assistant integrated into Chrome DevTools.
+Provide a comprehensive analysis of network requests, focusing on areas crucial for a software engineer. Your analysis should include:
+* Briefly explain the purpose of the request based on the URL, method, and any relevant headers or payload.
+* Analyze timing information to identify potential bottlenecks or areas for optimization.
+* Highlight potential issues indicated by the status code.
+
+# Considerations
+* If the response payload or request payload contains sensitive data, redact or generalize it in your analysis to ensure privacy.
+* Tailor your explanations and suggestions to the specific context of the request and the technologies involved (if discernible from the provided details).

package/front_end/models/ai_assistance/skills/styling.md

@@ -1,6 +1,6 @@
 ---
 name: styling
-description: Helping with CSS and styling
+description: CSS, styling, layouts, positioning, computed styles, DOM tree structure, and page styles.
 allowed-tools:
   - executeJavaScript
   - getStyles

package/front_end/models/ai_assistance/tools/GetNetworkRequestDetails.ts

@@ -0,0 +1,118 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Logs from '../../logs/logs.js';
+import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
+import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
+import {isOpaqueOrigin} from '../AiOrigins.js';
+import {getRequestContextOrigin} from '../contexts/RequestContext.js';
+import {NetworkRequestFormatter} from '../data_formatters/NetworkRequestFormatter.js';
+
+import {
+  type BaseToolCapability,
+  type OriginLockCapability,
+  type Tool,
+  type ToolArgs,
+  ToolName,
+} from './Tool.js';
+const UIStringsNotTranslate = {
+  gettingNetworkRequestDetails: 'Getting network request details',
+} as const;
+
+const lockedString = i18n.i18n.lockedString;
+
+export interface GetNetworkRequestDetailsArgs extends ToolArgs {
+  id: string;
+}
+
+/**
+ * A tool that retrieves detailed information about a specific network request.
+ * The details include request/response headers, status code, timings, and the response body.
+ */
+export class GetNetworkRequestDetailsTool implements
+    Tool<GetNetworkRequestDetailsArgs, unknown, BaseToolCapability&OriginLockCapability> {
+  readonly name = ToolName.GET_NETWORK_REQUEST_DETAILS;
+  readonly description =
+      'Retrieves the full headers, timing, status, and body details of a specific network request by ID.';
+
+  readonly parameters: Host.AidaClient.FunctionObjectParam<keyof GetNetworkRequestDetailsArgs> = {
+    type: Host.AidaClient.ParametersTypes.OBJECT,
+    description: 'Arguments for retrieving detailed information about a specific network request.',
+    nullable: false,
+    properties: {
+      id: {
+        type: Host.AidaClient.ParametersTypes.STRING,
+        description: 'The id of the network request to inspect.',
+        nullable: false,
+      },
+    },
+    required: ['id'],
+  };
+
+  displayInfoFromArgs(args: GetNetworkRequestDetailsArgs): {
+    title: string,
+    action: string,
+  } {
+    return {
+      title: lockedString(UIStringsNotTranslate.gettingNetworkRequestDetails),
+      action: `getNetworkRequestDetails(${args.id})`,
+    };
+  }
+
+  /**
+   * Handles the request to retrieve details for a network request by its ID.
+   * Filters by the conversation's established origin to prevent cross-origin data exposure.
+   */
+  async handler(
+      args: GetNetworkRequestDetailsArgs,
+      context: BaseToolCapability&OriginLockCapability,
+      ): Promise<FunctionCallHandlerResult<unknown>> {
+    // A conversation is locked to an origin once the first query is made.
+    // We only allow inspecting requests matching the conversation's established origin.
+    const origin = context.getEstablishedOrigin();
+
+    // Opaque origins are never allowed to be used as context.
+    if (origin && isOpaqueOrigin(origin)) {
+      return {
+        error: 'Opaque origin not allowed',
+      };
+    }
+
+    const request = Logs.NetworkLog.NetworkLog.instance().requests().find(req => {
+      if (req.requestId() !== args.id) {
+        return false;
+      }
+
+      // To prevent cross-origin prompt injection attacks, HAR-imported requests
+      // are assigned a virtual origin (e.g., `imported-har://${domain}`) rather than
+      // sharing the origin of live pages.
+      const requestOrigin = getRequestContextOrigin(req);
+
+      // If the conversation is locked to an origin, only allow accessing requests from that origin.
+      return !origin || requestOrigin === origin;
+    });
+
+    if (!request) {
+      return {
+        error: 'No request found',
+      };
+    }
+
+    const calculator = new NetworkTimeCalculator.NetworkTransferTimeCalculator();
+    const formatter = new NetworkRequestFormatter(request, calculator);
+    const formattedDetails = await formatter.formatNetworkRequest();
+
+    return {
+      result: formattedDetails,
+      widgets: [{
+        name: 'NETWORK_REQUEST_GENERAL_HEADERS',
+        data: {
+          request,
+        },
+      }],
+    };
+  }
+}

package/front_end/models/ai_assistance/tools/ListNetworkRequests.ts

@@ -0,0 +1,124 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
+import * as Logs from '../../logs/logs.js';
+import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
+import {isOpaqueOrigin} from '../AiOrigins.js';
+import {getRequestContextOrigin} from '../contexts/RequestContext.js';
+
+import {
+  type BaseToolCapability,
+  type OriginLockCapability,
+  type Tool,
+  ToolName,
+} from './Tool.js';
+
+const UIStringsNotTranslate = {
+  listingNetworkRequests: 'Listing network requests',
+} as const;
+
+const lockedString = i18n.i18n.lockedString;
+
+interface NetworkRequestSummary {
+  id: string;
+  url: string;
+  statusCode: number;
+  duration: string;
+  transferSize: string;
+}
+
+/**
+ * A tool that lists all network requests recorded by DevTools.
+ * Filters the list by the conversation's established origin to prevent cross-origin data exposure.
+ */
+export class ListNetworkRequestsTool implements
+    Tool<Record<string, never>, unknown, BaseToolCapability&OriginLockCapability> {
+  readonly name = ToolName.LIST_NETWORK_REQUESTS;
+  readonly description = 'Gives a list of network requests including URL, status code, and duration.';
+
+  readonly parameters: Host.AidaClient.FunctionObjectParam<never> = {
+    type: Host.AidaClient.ParametersTypes.OBJECT,
+    description: '',
+    nullable: true,
+    required: [],
+    properties: {},
+  };
+
+  displayInfoFromArgs(): {
+    title: string,
+    action: string,
+  } {
+    return {
+      title: lockedString(UIStringsNotTranslate.listingNetworkRequests),
+      action: 'listNetworkRequests()',
+    };
+  }
+
+  /**
+   * Handles the request to list network requests.
+   * Returns requests matching the conversation's established origin, if set.
+   */
+  async handler(
+      _params: Record<string, never>,
+      context: BaseToolCapability&OriginLockCapability,
+      ): Promise<FunctionCallHandlerResult<unknown>> {
+    const requests: NetworkRequestSummary[] = [];
+    // A conversation is locked to an origin once the first query is made.
+    // We only allow inspecting requests matching the conversation's established origin.
+    const origin = context.getEstablishedOrigin();
+
+    // Opaque origins are never allowed to be used as context.
+    if (origin && isOpaqueOrigin(origin)) {
+      return {
+        error: 'Opaque origin not allowed',
+      };
+    }
+
+    let hasCrossOriginRequest = false;
+    const requestsToShow: SDK.NetworkRequest.NetworkRequest[] = [];
+    for (const request of Logs.NetworkLog.NetworkLog.instance().requests()) {
+      // To prevent cross-origin prompt injection attacks, HAR-imported requests
+      // are assigned a virtual origin (e.g., `imported-har://${domain}`) rather than
+      // sharing the origin of live pages.
+      const requestOrigin = getRequestContextOrigin(request);
+
+      // If the conversation is locked to an origin, skip requests from other origins.
+      if (origin && requestOrigin !== origin) {
+        hasCrossOriginRequest = true;
+        continue;
+      }
+
+      requests.push({
+        id: request.requestId(),
+        url: request.url(),
+        statusCode: request.statusCode,
+        duration: i18n.TimeUtilities.secondsToString(request.duration),
+        transferSize: i18n.ByteUtilities.formatBytesToKb(request.transferSize),
+      });
+      requestsToShow.push(request);
+    }
+
+    if (requests.length === 0) {
+      return {
+        // If there were requests but they were filtered out due to the origin lock,
+        // we ask the user to start a new chat so they can select a request from the other origin.
+        error: hasCrossOriginRequest ? `No requests showing with origin ${origin}. Tell the user to start a new chat` :
+                                       'No requests recorded by DevTools',
+      };
+    }
+
+    return {
+      result: JSON.stringify(requests),
+      widgets: [{
+        name: 'NETWORK_REQUESTS_LIST',
+        data: {
+          requests: requestsToShow,
+        },
+      }],
+    };
+  }
+}

package/front_end/models/ai_assistance/tools/README.md

@@ -17,7 +17,7 @@ Instead of passing a monolithic "grab-bag" context object to all tool handlers,
 - `PageExecutionCapability`: For tools executing JavaScript code on the inspected page.
 - `StyleMutationCapability`: For tools managing and applying style mutations via a `ChangeManager`.
 - `TargetCapability`: For tools requiring access to the page's current SDK `Target`.
-- `OriginLockCapability`: For tools enforcing cross-origin security via origin locks.
+- `OriginLockCapability`: For tools enforcing cross-origin security via origin locks. Tools that fetch resources or state from the inspected page (such as styling or source code) must use this capability to verify that the target resource matches the conversation's established origin. This prevents the LLM from executing tools against out-of-origin elements or documents.
 
 ### Unified Context
 

package/front_end/models/ai_assistance/tools/Tool.ts

@@ -87,6 +87,8 @@ export type ToolArgs = Record<string, unknown>;
 export const enum ToolName {
   EXECUTE_JAVASCRIPT = 'executeJavaScript',
   GET_STYLES = 'getStyles',
+  LIST_NETWORK_REQUESTS = 'listNetworkRequests',
+  GET_NETWORK_REQUEST_DETAILS = 'getNetworkRequestDetails',
 }
 
 /**

package/front_end/models/ai_assistance/tools/ToolRegistry.ts

@@ -3,7 +3,9 @@
 // found in the LICENSE file.
 
 import {ExecuteJavaScriptTool} from './ExecuteJavaScript.js';
+import {GetNetworkRequestDetailsTool} from './GetNetworkRequestDetails.js';
 import {GetStylesTool} from './GetStyles.js';
+import {ListNetworkRequestsTool} from './ListNetworkRequests.js';
 import {type AllToolsContext, type Tool, type ToolArgs, ToolName} from './Tool.js';
 
 /**
@@ -17,6 +19,8 @@ import {type AllToolsContext, type Tool, type ToolArgs, ToolName} from './Tool.j
 export const TOOLS = {
   [ToolName.EXECUTE_JAVASCRIPT]: new ExecuteJavaScriptTool(),
   [ToolName.GET_STYLES]: new GetStylesTool(),
+  [ToolName.LIST_NETWORK_REQUESTS]: new ListNetworkRequestsTool(),
+  [ToolName.GET_NETWORK_REQUEST_DETAILS]: new GetNetworkRequestDetailsTool(),
 };
 
 /**