chrome-devtools-frontend 1.0.1598808 → 1.0.1601661

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -11,7 +11,9 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Tracing from '../../../services/tracing/tracing.js';
 import * as Annotations from '../../annotations/annotations.js';
+import * as Logs from '../../logs/logs.js';
 import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
+import * as TextUtils from '../../text_utils/text_utils.js';
 import * as Trace from '../../trace/trace.js';
 import {
   PerformanceInsightFormatter,
@@ -35,10 +37,6 @@ import {
 } from './AiAgent.js';
 
 const UIStringsNotTranslated = {
-  /**
-   *@description Shown when the agent is investigating a trace
-   */
-  analyzingTrace: 'Analyzing trace',
   /**
    * @description Shown when the agent is investigating network activity
    */
@@ -318,7 +316,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   #formatter: PerformanceTraceFormatter|null = null;
   #lastEventForEnhancedQuery: Trace.Types.Events.Event|undefined;
   #lastInsightForEnhancedQuery: Trace.Insights.Types.InsightModel|undefined;
-  #hasShownAnalyzeTraceContext = false;
 
   /**
    * Cache of all function calls made by the agent. This allows us to include (as a
@@ -351,6 +348,32 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   };
   #traceFacts: Host.AidaClient.RequestFact[] = [];
 
+  /**
+   * These facts do not contain page data, they are static instructions to the
+   * LLM, so we don't need to add them to the disclosure.
+   */
+  #factsToNeverDisclose = new Set<Host.AidaClient.RequestFact>([
+    this.#callFrameDataDescriptionFact,
+    this.#networkDataDescriptionFact,
+    this.#freshTraceExtraPreambleFact,
+    this.#notExternalExtraPreambleFact,
+  ]);
+
+  /**
+   * When we enhance the query with additional information, we need to know it
+   * so we can show it in the disclosure UI. This is cleared and then populated
+   * on each prompt.
+   */
+  #additionalSelectionsForQuery: string[] = [];
+
+  /**
+   * The CWV widget is shown when we analyze the trace summary, but we don't
+   * want to show it on every single "Analyzing data..." pill, as we show one
+   * after every prompt. So we make sure for a given Insight Set (which is based on navigation)
+   * we only show it once.
+   */
+  #hasShownWidgetForInsightSet = new WeakSet<Trace.Insights.Types.InsightSet>();
+
   get preamble(): string {
     return buildPreamble();
   }
@@ -379,13 +402,19 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       return;
     }
 
-    if (this.#hasShownAnalyzeTraceContext) {
-      return;
+    const contextDisclosure: string[] = [];
+
+    for (const fact of this.currentFacts()) {
+      if (this.#factsToNeverDisclose.has(fact)) {
+        continue;
+      }
+      contextDisclosure.push(fact.text);
     }
+    contextDisclosure.push(...this.#additionalSelectionsForQuery);
 
     const widgets: AiWidget[] = [];
     const primaryInsightSet = context.getItem().primaryInsightSet;
-    if (primaryInsightSet) {
+    if (primaryInsightSet && !this.#hasShownWidgetForInsightSet.has(primaryInsightSet)) {
       widgets.push({
         name: 'CORE_VITALS',
         data: {
@@ -393,21 +422,19 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           insightSetKey: primaryInsightSet.id,
         },
       });
+      this.#hasShownWidgetForInsightSet.add(primaryInsightSet);
     }
 
     yield {
       type: ResponseType.CONTEXT,
-      title: lockedString(UIStringsNotTranslated.analyzingTrace),
       details: [
         {
-          title: 'Trace',
-          text: this.#formatter?.formatTraceSummary() ?? '',
+          title: 'Trace details',
+          text: contextDisclosure.join('\n'),
         },
       ],
       widgets,
     };
-
-    this.#hasShownAnalyzeTraceContext = true;
   }
 
   #callTreeContextSet = new WeakSet();
@@ -536,6 +563,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       }
     }
 
+    this.#additionalSelectionsForQuery = selected;
     if (!selected.length) {
       return query;
     }
@@ -752,7 +780,8 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         const details = new PerformanceInsightFormatter(focus, insight).formatInsight();
 
         const widgets: AiWidget[] = [];
-        if (params.insightName === 'LCPDiscovery' || params.insightName === 'LCPBreakdown') {
+        if (Trace.Insights.Models.LCPDiscovery.isLCPDiscoveryInsight(insight) ||
+            Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(insight)) {
           const lcpMetric = Trace.Insights.Common.getLCP(insightSet);
           const lcpEvent = lcpMetric?.event;
           if (lcpEvent && Trace.Types.Events.isAnyLargestContentfulPaintCandidate(lcpEvent)) {
@@ -767,15 +796,38 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
                 const node = nodeMap?.get(nodeId);
                 if (node) {
                   const snapshot = await node.takeSnapshot();
+                  let networkRequest;
+                  const lcpSyntheticRequest = insight.lcpRequest;
+                  if (lcpSyntheticRequest) {
+                    networkRequest = {
+                      url: lcpSyntheticRequest.args.data.url,
+                      size: lcpSyntheticRequest.args.data.decodedBodyLength ??
+                          lcpSyntheticRequest.args.data.encodedDataLength ?? 0,
+                      resourceType: lcpSyntheticRequest.args.data.resourceType,
+                      mimeType: lcpSyntheticRequest.args.data.mimeType ?? '',
+                      imageUrl: await this.#getNetworkRequestImageData(lcpSyntheticRequest),
+                    };
+                  }
                   widgets.push({
                     name: 'DOM_TREE',
-                    data: {root: snapshot},
+                    data: {
+                      root: snapshot,
+                      networkRequest,
+                    },
                   });
                   processedNodeIds.add(nodeId);
                 }
               }
             }
           }
+          if (params.insightName === 'LCPBreakdown') {
+            widgets.push({
+              name: 'LCP_BREAKDOWN',
+              data: {
+                lcpData: insight as Trace.Insights.Models.LCPBreakdown.LCPBreakdownInsightModel,
+              },
+            });
+          }
         }
 
         const key = `getInsightDetails('${params.insightSetId}', '${params.insightName}')`;
@@ -1258,4 +1310,24 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     Annotations.AnnotationRepository.instance().addNetworkRequestAnnotation(annotationMessage, requestId);
     return {result: {success: true}};
   }
+
+  async #getNetworkRequestImageData(lcpRequest: Trace.Types.Events.SyntheticNetworkRequest): Promise<string|undefined> {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const networkManager = target?.model(SDK.NetworkManager.NetworkManager);
+    if (!target || !networkManager) {
+      return undefined;
+    }
+
+    const networkLog = Logs.NetworkLog.NetworkLog.instance();
+    const requestId = lcpRequest.args.data.requestId;
+    const sdkRequest = networkLog.requestByManagerAndId(networkManager, requestId);
+
+    if (sdkRequest?.contentType().isImage()) {
+      const contentData = await sdkRequest.requestContentData();
+      if (!TextUtils.ContentData.ContentData.isError(contentData)) {
+        return contentData.asDataUrl() ?? undefined;
+      }
+    }
+    return undefined;
+  }
 }

package/front_end/models/ai_assistance/agents/PerformanceAnnotationsAgent.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Host from '../../../core/host/host.js';
-import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import type {AICallTree} from '../performance/AICallTree.js';
 import type {AgentFocus} from '../performance/AIContext.js';
@@ -11,14 +10,6 @@ import type {AgentFocus} from '../performance/AIContext.js';
 import {AiAgent, type ContextResponse, type ConversationContext, type RequestOptions, ResponseType} from './AiAgent.js';
 import {PerformanceTraceContext} from './PerformanceAgent.js';
 
-const UIStringsNotTranslated = {
-  analyzingCallTree: 'Analyzing call tree',
-  /**
-   * @description Shown when the agent is investigating network activity
-   */
-} as const;
-const lockedString = i18n.i18n.lockedString;
-
 /**
  * Preamble clocks in at ~970 tokens.
  *   The prose is around 4.5 chars per token.
@@ -124,7 +115,6 @@ export class PerformanceAnnotationsAgent extends AiAgent<AgentFocus> {
 
     yield {
       type: ResponseType.CONTEXT,
-      title: lockedString(UIStringsNotTranslated.analyzingCallTree),
       details: [
         {
           title: 'Selected call tree',

package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt

@@ -216,7 +216,6 @@ Content:
 [
   {
     "type": "context",
-    "title": "Analyzing the prompt",
     "details": [
       {
         "title": "Data used",
@@ -296,7 +295,6 @@ Content:
 [
   {
     "type": "context",
-    "title": "Analyzing the prompt",
     "details": [
       {
         "title": "Data used",
@@ -321,7 +319,6 @@ Content:
 [
   {
     "type": "context",
-    "title": "Analyzing the prompt",
     "details": [
       {
         "title": "Data used",
@@ -349,7 +346,6 @@ Content:
 [
   {
     "type": "context",
-    "title": "Analyzing the prompt",
     "details": [
       {
         "title": "Data used",
@@ -374,7 +370,6 @@ Content:
 [
   {
     "type": "context",
-    "title": "Analyzing the prompt",
     "details": [
       {
         "title": "Data used",
@@ -397,7 +392,6 @@ Content:
 [
   {
     "type": "context",
-    "title": "Analyzing the prompt",
     "details": [
       {
         "title": "Data used",

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -37,10 +37,6 @@ import {
 * Strings that don't need to be translated at this time.
 */
 const UIStringsNotTranslate = {
-  /**
-   * @description Title for context details for Freestyler.
-   */
-  analyzingThePrompt: 'Analyzing the prompt',
   /**
    * @description Heading text for context details of Freestyler agent.
    */
@@ -1045,7 +1041,6 @@ const data = {
     }
     yield {
       type: ResponseType.CONTEXT,
-      title: lockedString(UIStringsNotTranslate.analyzingThePrompt),
       details: [{
         title: lockedString(UIStringsNotTranslate.dataUsed),
         text: await StylingAgent.describeElement(selectedElement.getItem()),
@@ -1078,6 +1073,7 @@ const data = {
     ];
     return answer;
   }
+
   override async enhanceQuery(
       query: string, selectedElement: ConversationContext<SDK.DOMModel.DOMNode>|null,
       multimodalInputType?: MultimodalInputType): Promise<string> {

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -21,6 +21,7 @@ import * as BuiltInAi from './BuiltInAi.js';
 import * as ChangeManager from './ChangeManager.js';
 import * as ConversationHandler from './ConversationHandler.js';
 import * as FileFormatter from './data_formatters/FileFormatter.js';
+import * as LighthouseFormatter from './data_formatters/LighthouseFormatter.js';
 import * as NetworkRequestFormatter from './data_formatters/NetworkRequestFormatter.js';
 import * as PerformanceInsightFormatter from './data_formatters/PerformanceInsightFormatter.js';
 import * as PerformanceTraceFormatter from './data_formatters/PerformanceTraceFormatter.js';
@@ -55,6 +56,7 @@ export {
   FileAgent,
   FileFormatter,
   Injected,
+  LighthouseFormatter,
   NetworkAgent,
   NetworkRequestFormatter,
   PatchAgent,

package/front_end/models/ai_assistance/data_formatters/LighthouseFormatter.snapshot.txt

@@ -0,0 +1,84 @@
+Title: LighthouseFormatter generates a summary
+Content:
+# Lighthouse Report Summary
+URL: https://example.com
+Fetch Time: 2025-01-01T00:00:00.000Z
+Lighthouse Version: 12.0.0
+
+## Category Scores
+- Performance: 80
+- Accessibility: 100
+=== end content
+
+Title: LighthouseFormatter generates audits for a category
+Content:
+# Audits for Performance
+
+The following audits in this category have a score below 90 and may need attention:
+- **First Audit**: 80 (1.2s)
+  * Description of first audit
+=== end content
+
+Title: LighthouseFormatter indicates when all audits passed
+Content:
+# Audits for Accessibility
+
+All audits in this category passed (score >= 90).
+=== end content
+
+Title: LighthouseFormatter handles missing category
+Content:
+Category "seo" not found.
+=== end content
+
+Title: LighthouseFormatter formats table details
+Content:
+# Audits for Performance
+
+The following audits in this category have a score below 90 and may need attention:
+- **Table Audit**: 50
+  * Audit with a table
+
+    | URL | Wasted Bytes | Node | Location |
+    | https://example.com/script.js | 1024 | div.main (path: 1,HTML,1,BODY,5,DIV) | https://example.com/script.js:10:5 |
+    | https://example.com/style.css | 512 | body > p (selector: body > p) (path: 1,HTML,1,BODY,10,P) | https://example.com/style.css |
+=== end content
+
+Title: LighthouseFormatter formats opportunity details
+Content:
+# Audits for Performance
+
+The following audits in this category have a score below 90 and may need attention:
+- **Opportunity Audit**: 50
+  * Audit with an opportunity
+
+    Potential savings: 500ms, Potential savings: 2048 bytes
+    | URL | Wasted Bytes |
+    | https://example.com/large-script.js | 2048 |
+=== end content
+
+Title: LighthouseFormatter formats table details with summary
+Content:
+# Audits for Performance
+
+The following audits in this category have a score below 90 and may need attention:
+- **Summary Audit**: 50
+  * Audit with a table summary
+
+    Wasted time: 100ms
+    Wasted bytes: 512
+    | Text |
+    | Some detail |
+=== end content
+
+Title: LighthouseFormatter formats landmark-one-main audit with node explanation
+Content:
+# Audits for Accessibility
+
+The following audits in this category have a score below 90 and may need attention:
+- **Document does not have a main landmark.**: 0
+  * One main landmark helps screen reader users navigate a web page. [Learn more about landmarks](https://dequeuniversity.com/rules/axe/4.11/landmark-one-main).
+
+    | Failing Elements |
+    | html (selector: html) (path: 1,HTML) (explanation: Fix all of the following:   Document does not have a main landmark) |
+=== end content

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

@@ -0,0 +1,172 @@
+// 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 LHModel from '../../lighthouse/lighthouse.js';
+
+/**
+ * A formatter that takes a raw Lighthouse report JSON and creates a markdown
+ * summary for an AI Agent.
+ */
+export class LighthouseFormatter {
+  /**
+   * Returns an overall summary and high-level overview of the Lighthouse report.
+   */
+  summary(report: LHModel.ReporterTypes.ReportJSON): string {
+    const lines: string[] = [];
+    lines.push('# Lighthouse Report Summary');
+    lines.push(`URL: ${report.finalDisplayedUrl}`);
+    lines.push(`Fetch Time: ${report.fetchTime}`);
+    lines.push(`Lighthouse Version: ${report.lighthouseVersion}`);
+    lines.push('');
+    lines.push('## Category Scores');
+    for (const category of Object.values(report.categories)) {
+      const score = category.score !== null ? Math.round(category.score * 100) : 'n/a';
+      lines.push(`- ${category.title}: ${score}`);
+    }
+    return lines.join('\n');
+  }
+
+  /**
+   * Returns a markdown list of all audits in a given category.
+   * Highlight failing audits (score < 90).
+   */
+  audits(report: LHModel.ReporterTypes.ReportJSON, categoryId: LHModel.RunTypes.CategoryId): string {
+    const category = report.categories[categoryId];
+    if (!category) {
+      return `Category "${categoryId}" not found.`;
+    }
+
+    const lines: string[] = [];
+    lines.push(`# Audits for ${category.title}`);
+    if (category.description) {
+      lines.push(`${category.description.replace(/\n/g, ' ')}`);
+    }
+    lines.push('');
+
+    const failingAudits = category.auditRefs.filter(ref => {
+      const audit = report.audits[ref.id];
+      return audit && audit.score !== null && audit.score < 0.9;
+    });
+
+    if (failingAudits.length === 0) {
+      lines.push('All audits in this category passed (score >= 90).');
+      return lines.join('\n');
+    }
+
+    lines.push('The following audits in this category have a score below 90 and may need attention:');
+    for (const ref of failingAudits) {
+      const audit = report.audits[ref.id];
+      if (!audit) {
+        continue;
+      }
+      const score = audit.score !== null ? Math.round(audit.score * 100) : 'n/a';
+      let line = `- **${audit.title}**: ${score}`;
+      if (audit.displayValue) {
+        line += ` (${audit.displayValue})`;
+      }
+      lines.push(line);
+      lines.push(`  * ${audit.description.replace(/\n/g, ' ')}`);
+      if (audit.details) {
+        const formattedDetails = this.#formatDetails(audit.details);
+        if (formattedDetails) {
+          lines.push('');
+          lines.push(formattedDetails.split('\n').map(l => `    ${l}`).join('\n'));
+        }
+      }
+    }
+
+    return lines.join('\n');
+  }
+
+  #formatDetails(details: LHModel.ReporterTypes.DetailsJSON): string {
+    switch (details.type) {
+      case 'table': {
+        const lines: string[] = [];
+        if (details.summary) {
+          const summaryParts = [];
+          // Purposefully rule out 0 because we want to skip if there is 0 wasted time.
+          if (details.summary.wastedMs) {
+            summaryParts.push(`Wasted time: ${details.summary.wastedMs}ms`);
+          }
+          // Purposefully rule out 0 because we want to skip if there is 0 wasted time.
+          if (details.summary.wastedBytes) {
+            summaryParts.push(`Wasted bytes: ${details.summary.wastedBytes}`);
+          }
+          if (summaryParts.length > 0) {
+            lines.push(summaryParts.join('\n'));
+          }
+        }
+        lines.push(this.#formatTable(details.headings, details.items));
+        return lines.join('\n');
+      }
+      case 'opportunity': {
+        const lines: string[] = [];
+        const summaryParts = [];
+        if (details.overallSavingsMs) {
+          summaryParts.push(`Potential savings: ${details.overallSavingsMs}ms`);
+        }
+        if (details.overallSavingsBytes) {
+          summaryParts.push(`Potential savings: ${details.overallSavingsBytes} bytes`);
+        }
+        if (summaryParts.length > 0) {
+          lines.push(summaryParts.join(', '));
+        }
+        lines.push(this.#formatTable(details.headings, details.items));
+        return lines.join('\n');
+      }
+      default:
+        return '';
+    }
+  }
+
+  #formatTable(headings: LHModel.ReporterTypes.TableHeadingJSON[], items: Array<Record<string, unknown>>): string {
+    const lines: string[] = [];
+    lines.push(`| ${headings.map(h => h.label).join(' | ')} |`);
+    for (const item of items) {
+      const row = headings.map(h => this.#formatTableValue(item[h.key] as LHModel.ReporterTypes.TableItemValue));
+      lines.push(`| ${row.join(' | ')} |`);
+    }
+    return lines.join('\n');
+  }
+
+  #formatTableValue(value: LHModel.ReporterTypes.TableItemValue|undefined): string {
+    if (value === undefined || value === null) {
+      return '';
+    }
+    if (typeof value === 'string' || typeof value === 'number') {
+      return String(value);
+    }
+    if (typeof value === 'object' && 'type' in value) {
+      switch (value.type) {
+        case 'node': {
+          let label = value.nodeLabel || value.selector || value.snippet || '(node)';
+          if (value.selector) {
+            label += ` (selector: ${value.selector})`;
+          }
+          if (value.path) {
+            label += ` (path: ${value.path})`;
+          }
+          if (value.explanation) {
+            label += ` (explanation: ${value.explanation.replace(/\n/g, ' ')})`;
+          }
+          return label;
+        }
+        case 'source-location': {
+          const parts = [];
+          if (value.url) {
+            parts.push(value.url);
+          }
+          if (value.line) {
+            parts.push(String(value.line));
+          }
+          if (value.column) {
+            parts.push(String(value.column));
+          }
+          return parts.join(':');
+        }
+      }
+    }
+    return '';
+  }
+}

package/front_end/models/breakpoints/BreakpointManager.ts

@@ -19,7 +19,7 @@ const INITIAL_RESTORE_BREAKPOINT_COUNT = 100;
 
 export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
-  readonly storage = new Storage();
+  readonly storage: Storage;
   readonly #workspace: Workspace.Workspace.WorkspaceImpl;
   readonly targetManager: SDK.TargetManager.TargetManager;
   readonly debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding;
@@ -38,11 +38,12 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
   private constructor(
       targetManager: SDK.TargetManager.TargetManager, workspace: Workspace.Workspace.WorkspaceImpl,
       debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding,
-      restoreInitialBreakpointCount?: number) {
+      settings: Common.Settings.Settings, restoreInitialBreakpointCount?: number) {
     super();
     this.#workspace = workspace;
     this.targetManager = targetManager;
     this.debuggerWorkspaceBinding = debuggerWorkspaceBinding;
+    this.storage = new Storage(settings);
 
     this.storage.mute();
     this.#setInitialBreakpoints(restoreInitialBreakpointCount ?? INITIAL_RESTORE_BREAKPOINT_COUNT);
@@ -73,18 +74,26 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     targetManager: SDK.TargetManager.TargetManager|null,
     workspace: Workspace.Workspace.WorkspaceImpl|null,
     debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding|null,
+    settings: Common.Settings.Settings|null,
     restoreInitialBreakpointCount?: number,
-  } = {forceNew: null, targetManager: null, workspace: null, debuggerWorkspaceBinding: null}): BreakpointManager {
-    const {forceNew, targetManager, workspace, debuggerWorkspaceBinding, restoreInitialBreakpointCount} = opts;
+  } = {
+    forceNew: null,
+    targetManager: null,
+    workspace: null,
+    debuggerWorkspaceBinding: null,
+    settings: null,
+  }): BreakpointManager {
+    const {forceNew, targetManager, workspace, debuggerWorkspaceBinding, settings, restoreInitialBreakpointCount} =
+        opts;
     if (!breakpointManagerInstance || forceNew) {
-      if (!targetManager || !workspace || !debuggerWorkspaceBinding) {
+      if (!targetManager || !workspace || !debuggerWorkspaceBinding || !settings) {
         throw new Error(
-            `Unable to create settings: targetManager, workspace, and debuggerWorkspaceBinding must be provided: ${
+            `Unable to create settings: targetManager, workspace, debuggerWorkspaceBinding, and settings must be provided: ${
                 new Error().stack}`);
       }
 
-      breakpointManagerInstance =
-          new BreakpointManager(targetManager, workspace, debuggerWorkspaceBinding, restoreInitialBreakpointCount);
+      breakpointManagerInstance = new BreakpointManager(
+          targetManager, workspace, debuggerWorkspaceBinding, settings, restoreInitialBreakpointCount);
     }
 
     return breakpointManagerInstance;
@@ -986,8 +995,7 @@ export class ModelBreakpoint {
         const {lineNumber: uiLineNumber, columnNumber: uiColumnNumber} =
             BreakpointManager.uiLocationFromBreakpointLocation(uiSourceCode, lineNumber, columnNumber);
         const locations =
-            await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().uiLocationToRawLocations(
-                uiSourceCode, uiLineNumber, uiColumnNumber);
+            await this.#debuggerWorkspaceBinding.uiLocationToRawLocations(uiSourceCode, uiLineNumber, uiColumnNumber);
         debuggerLocations = locations.filter(location => location.debuggerModel === this.#debuggerModel);
         if (debuggerLocations.length) {
           break;
@@ -1248,8 +1256,8 @@ class Storage {
   readonly breakpoints: Map<string, BreakpointStorageState>;
   #muted: boolean;
 
-  constructor() {
-    this.setting = Common.Settings.Settings.instance().createLocalSetting('breakpoints', []);
+  constructor(settings: Common.Settings.Settings) {
+    this.setting = settings.createLocalSetting('breakpoints', []);
     this.breakpoints = new Map();
     this.#muted = false;
     for (const breakpoint of this.setting.get()) {

package/front_end/models/emulation/DeviceModeModel.ts

@@ -680,7 +680,11 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private applyUserAgent(userAgent: string, userAgentMetadata: Protocol.Emulation.UserAgentMetadata|null): void {
-    SDK.NetworkManager.MultitargetNetworkManager.instance().setUserAgentOverride(userAgent, userAgentMetadata);
+    // When the user agent string is empty (e.g. custom desktop device without
+    // a UA override), metadata must also be cleared. The backend rejects
+    // setUserAgentOverride calls that provide metadata without a UA string.
+    SDK.NetworkManager.MultitargetNetworkManager.instance().setUserAgentOverride(
+        userAgent, userAgent ? userAgentMetadata : null);
   }
 
   private applyDeviceMetrics(

package/front_end/models/emulation/EmulatedDevices.ts

@@ -201,7 +201,8 @@ export class EmulatedDevice {
       const rawUserAgent = (parseValue(json, 'user-agent', 'string') as string);
       result.userAgent = SDK.NetworkManager.MultitargetNetworkManager.patchUserAgentWithChromeVersion(rawUserAgent);
 
-      result.userAgentMetadata = parseValue(json, 'user-agent-metadata', 'object', null);
+      const userAgentMetadata = parseValue(json, 'user-agent-metadata', 'object', null);
+      result.userAgentMetadata = result.userAgent ? userAgentMetadata : null;
 
       const capabilities = parseValue(json, 'capabilities', 'object', []);
       if (!Array.isArray(capabilities)) {
@@ -366,7 +367,7 @@ export class EmulatedDevice {
     json['foldable-screen'] = this.isFoldableScreen;
     json['show'] = this.#show;
 
-    if (this.userAgentMetadata) {
+    if (this.userAgent && this.userAgentMetadata) {
       json['user-agent-metadata'] = this.userAgentMetadata;
     }