chrome-devtools-frontend 1.0.1716465 → 1.0.1717709

package/docs/get_the_code.md

@@ -27,9 +27,18 @@ To build, follow these steps:
 ```bash
 cd devtools-frontend
 gclient sync
-npm run build
+./dt build
 ```
 
+Scripts from `package.json` are run with `./dt <script> [args]` (on Windows:
+`.\dt <script> [args]`), a launcher for `scripts/tools/dt.py`. Run it without arguments
+to list the available scripts. Arguments after the script name are passed to the script
+as is, so no `--` is needed.
+
+`npm run <script> -- [args]` works too if you have npm installed, e.g.
+`npm run test -- foo` is the same as `./dt test foo`. AI agents should use `./dt`, not
+`npm run`.
+
 The resulting build artifacts can be found in `out/Default/gen/front_end`.
 
 The build tools generally assume `Default` as the target (and `out/Default` as the
@@ -37,7 +46,7 @@ build directory). You can pass `-t <name>` (or `--target=<name>`) to use a diffe
 target. For example
 
 ```bash
-npm run build -- -t Debug
+./dt build -t Debug
 ```
 
 will build in `out/Debug` instead of `out/Default`. If the directory doesn't exist,
@@ -51,14 +60,14 @@ to `false`:
 gn gen out/Fast --args="devtools_bundle=false"
 ```
 
-and use `npm run build -- -t Fast` to build this target.
+and use `./dt build -t Fast` to build this target.
 
 ### Rebuilding automatically
 
 You can use
 
 ```bash
-npm run build -- --watch
+./dt build --watch
 ```
 
 to have the build script watch for changes in source files and automatically trigger
@@ -96,7 +105,7 @@ 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>`).
+Many scripts, like `build` and `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.
 
@@ -106,13 +115,13 @@ The `.env.template` file lists all supported variables. Copy it to `.env` to get
 cp .env.template .env
 ```
 
-As mentioned earlier, you might create a fast build target. Instead of always typing `npm run build -- -t Fast`, to remove the flag repetition you simple run `npm run build` you can set the following variable in your `.env` file:
+As mentioned earlier, you might create a fast build target. Instead of always typing `./dt build -t Fast`, to remove the flag repetition you simple run `./dt build` you can set the following variable in your `.env` file:
 
 ```shell
 DEVTOOLS_TARGET=Fast
 ```
 
-Another example - by default running `npm start` auto-opens DevTools for new Tabs.
+Another example - by default running `./dt 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
@@ -154,43 +163,43 @@ You can run a [build](#Build) of DevTools frontend in a pre-built Chrome or Chro
 - Use the downloaded Chrome for Testing binary in `third_party/chrome`.
 - Use the latest Chrome Canary. This includes any DevTools features that are only available in regular Chrome builds (`is_official_build` + `is_chrome_branded`), such as GenAI-related features.
 
-#### Using `npm start` script (recommended)
+#### Using the `start` script (recommended)
 
 With Chromium 136, we added (back) a `start` script that can be used to easily launch DevTools with pre-built [Chrome
 for Testing](https://developer.chrome.com/blog/chrome-for-testing) or [Chrome Canary](https://www.google.com/chrome/canary/).
 It'll also take care of automatically enabling/disabling experimental features that are actively being worked on. Use
 
 ```bash
-npm start
+./dt start
 ```
 
 to build DevTools front-end in `out/Default` (you can change this to `out/foo` by passing `--target=foo` if needed),
 and open Chrome for Testing (in `third_party/chrome`) with the custom DevTools front-end. This will also monitor the
 source files for changes while Chrome is running and automatically trigger a rebuild whenever source files change.
 
-By default, `npm start` will automatically open DevTools for every new tab, you can use
+By default, `./dt start` will automatically open DevTools for every new tab, you can use
 
 ```bash
-npm start -- --no-open
+./dt start --no-open
 ```
 
 to disable this behavior. You can also use
 
 ```bash
-npm start -- --browser=canary
+./dt start --browser=canary
 ```
 
 to run in Chrome Canary instead of Chrome for Testing; this requires you to install Chrome Canary manually first
 (Googlers can install `google-chrome-canary` on gLinux). And finally use
 
 ```bash
-npm start -- http://www.example.com
+./dt start http://www.example.com
 ```
 
 to automatically open `http://www.example.com` in the newly spawned Chrome tab. Use
 
 ```bash
-npm start -- --verbose
+./dt start --verbose
 ```
 
 to enable verbose logging, which among other things, also prints all output from Chrome to the terminal, which is
@@ -198,38 +207,38 @@ otherwise suppressed.
 
 ##### Controlling the feature set
 
-By default `npm start` will enable a bunch of experimental features (related to DevTools) that are considered ready for teamfood.
+By default `./dt start` will enable a bunch of experimental features (related to DevTools) that are considered ready for teamfood.
 To also enable experimental features that aren't yet considered sufficiently stable to enable them by default for the team, run:
 
 ```bash
 # Long version
-npm start -- --unstable-features
+./dt start --unstable-features
 
 # Short version
-npm start -- -u
+./dt start -u
 ```
 
 Just like with Chrome itself, you can also control the set of enabled and disabled features using
 
 ```bash
-npm start -- --enable-features=DevToolsWellKnown
-npm start -- --disable-features=DevToolsWellKnown --enable-features=DevToolsFreestyler:multimodal/true
+./dt start --enable-features=DevToolsWellKnown
+./dt start --disable-features=DevToolsWellKnown --enable-features=DevToolsFreestyler:multimodal/true
 ```
 
 which you can use to override the default feature set.
 
 ##### Remote debugging
 
-The `npm start` command also supports launching Chrome for remote debugging via
+The `./dt start` command also supports launching Chrome for remote debugging via
 
 ```bash
-npm start -- --remote-debugging-port=9222
+./dt start --remote-debugging-port=9222
 ```
 
 or
 
 ```bash
-npm start -- --browser=canary --remote-debugging-port=9222 --user-data-dir=\`mktemp -d`
+./dt start --browser=canary --remote-debugging-port=9222 --user-data-dir=\`mktemp -d`
 ```
 
 Note that you have to also pass the `--user-data-dir` and point it to a non-standard profile directory (a freshly created
@@ -362,22 +371,22 @@ out/Default/chrome --custom-devtools-frontend=file://$(realpath out/Default/gen/
 afterwards, which can be quite a bit faster than building and linking the full
 Chromium binary.
 
-Alternatively you can use `npm start` from the DevTools sub folder (`third_party/devtools-frontend/src/`) with the browser set to `chromium`.
+Alternatively you can use `./dt start` from the DevTools sub folder (`third_party/devtools-frontend/src/`) with the browser set to `chromium`.
 This will tell the command that you are in a Chromium checkout and try to find the correct browser executable path to resolve.
 Or alternately you can use a `.env` file, see [set up here](#using-a-env-file-for-default-script-options).
 
 ```bash
 cd third_party/devtools-frontend/src/
-npm start -- --browser=chromium
+./dt start --browser=chromium
 ```
 
 ### Testing
 
-To run the test suite, use `npm test` from within the DevTools front-end folder:
+To run the test suite, use `./dt test` from within the DevTools front-end folder:
 
 ```bash
 cd third_party/devtools-frontend/src
-npm test
+./dt test
 ```
 
 ### Juggling the git submodules

package/docs/ui_engineering.md

@@ -906,6 +906,34 @@ export const DEFAULT_VIEW = (input, _output, target) => {
 };
 ```
 
+### Long-press action buttons
+
+Imperative long-press action buttons (`UI.Toolbar.Toolbar.createLongPressActionButton`) are migrated declaratively by nesting secondary `<devtools-button>` elements inside `<devtools-button ${bindToAction('...')}>`. The parent button triggers the primary action on click, and holding the button down opens a menu presenting the nested buttons:
+
+```typescript
+export const DEFAULT_VIEW = (input, _output, target) => {
+  const {bindToAction} = UI.UIUtils;
+  render(html`
+    <devtools-toolbar>
+      <devtools-button ${bindToAction('debugger.toggle-pause')}>
+        <devtools-button
+            .iconName=${'stop'}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            .title=${i18nString(UIStrings.terminateCurrentJavascriptCall)}
+            @click=${input.onTerminateExecution}>
+        </devtools-button>
+        <devtools-button
+            .iconName=${'play'}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            .title=${i18nString(UIStrings.resumeWithAllPausesBlockedForMs)}
+            @click=${input.onLongResume}>
+        </devtools-button>
+      </devtools-button>
+    </devtools-toolbar>`,
+    target);
+};
+```
+
 ## Binding a setting to a checkbox
 
 Use the `bindToSetting` directive to bind a boolean setting to a `<devtools-checkbox>` component.
@@ -1244,6 +1272,12 @@ export const DEFAULT_VIEW = (input, _output, target) => {
 };
 ```
 
+### Pre-existing Widget Instances (`WrapperWidget`)
+When embedding pre-existing `UI.Widget` instances that are created elsewhere (such as `UI.ViewManager` locations: `TabbedViewLocation.tabbedPane()`, `StackLocation.widget()`), render them declaratively using `${widget(UI.Widget.WrapperWidget, {widget: myWidgetInstance})}` instead of creating custom wrapper widget classes. `WrapperWidget` automatically forwards constraints and manages child widget attach/detach lifecycles.
+
+### Preserving `showMode` Settings
+When migrating a `SplitWidget` that persists sidebar visibility (e.g. via `splitWidget.showModeSetting()`), bind the setting's value to the `<devtools-split-view show=${input.showMode}>` property (`Both`, `OnlyMain`, or `OnlySidebar`) to preserve user settings and layout state across sessions.
+
 ## Migrating `UI.ARIAUtils` helpers
 
 Replace calls to `UI.ARIAUtils` helper functions with the corresponding ARIA attributes directly in the lit-html template.

package/dt

@@ -0,0 +1,7 @@
+#!/bin/sh
+# 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.
+#
+# Launcher for scripts/tools/dt.py, so it can be run as `./dt <script> [args]`.
+exec vpython3 "$(dirname "$0")/scripts/tools/dt.py" "$@"

package/dt.bat

@@ -0,0 +1,8 @@
+@echo off
+rem Copyright 2026 The Chromium Authors
+rem Use of this source code is governed by a BSD-style license that can be
+rem found in the LICENSE file.
+rem
+rem Launcher for scripts\tools\dt.py, so it can be run as `dt <script> [args]`.
+call vpython3 "%~dp0scripts\tools\dt.py" %*
+exit /b %ERRORLEVEL%

package/front_end/core/common/ParsedURL.ts

@@ -334,7 +334,7 @@ export class ParsedURL {
     // 8 - ?fragment
     const schemeRegex = /([A-Za-z][A-Za-z0-9+.-]*):\/\//;
     const userRegex = /(?:([A-Za-z0-9\-._~%!$&'()*+,;=:]*)@)?/;
-    const hostRegex = /((?:\[::\d?\])|(?:[^\s\/:]*))/;
+    const hostRegex = /((?:\[[0-9a-fA-F:.]*:[0-9a-fA-F:.]*\])|(?:[^\s\/:]*))/;
     const portRegex = /(?::([\d]+))?/;
     const pathRegex = /(\/[^#?]*)?/;
     const queryRegex = /(?:\?([^#]*))?/;

package/front_end/core/common/Settings.ts

@@ -258,6 +258,11 @@ export class Settings {
     return setting;
   }
 
+  /** The event target shared by all settings. Change listeners are registered with the setting name as event type. */
+  get eventTargetForTest(): ObjectWrapper<GenericEvents> {
+    return this.#eventSupport;
+  }
+
   /**
    * Get setting via key, and create a new setting if the requested setting does not exist.
    * @param key kebab-case string ID

package/front_end/core/host/UserMetricsEnums.ts

@@ -636,6 +636,7 @@ export enum IssueCreated {
   'GenericIssue::AutofillAndManualTextPolicyControlledFeaturesInfo' = 114,
   'GenericIssue::AutofillPolicyControlledFeatureInfo' = 115,
   'GenericIssue::ManualTextPolicyControlledFeatureInfo' = 116,
+  'GenericIssue::GeolocationPromptWithoutUserGesture' = 117,
   'CorsIssue::InvalidLocalNetworkAccess' = 118,
   /* eslint-enable @typescript-eslint/naming-convention */
   MAX_VALUE = 119,

package/front_end/core/sdk/CSSModel.ts

@@ -537,6 +537,24 @@ export class CSSModel extends SDKModel<EventTypes> {
     return true;
   }
 
+  forcePositionTryOption(node: DOMNode, index?: number): boolean {
+    const currentForcedIndex = node.marker<number>(PositionTryOptionMarker) ?? undefined;
+    if (currentForcedIndex === index) {
+      return false;
+    }
+    node.setMarker(PositionTryOptionMarker, index ?? null);
+    if (node.id === undefined) {
+      return false;
+    }
+    void this.agent.invoke_forcePositionTryOption({nodeId: node.id, index});
+    this.dispatchEventToListeners(Events.PositionTryOptionForced, node);
+    return true;
+  }
+
+  forcedPositionTryOption(node: DOMNode): number|undefined {
+    return node.marker<number>(PositionTryOptionMarker) ?? undefined;
+  }
+
   forcePseudoState(node: DOMNode, pseudoClass: string, enable: boolean): boolean {
     const forcedPseudoClasses = node.marker<string[]>(PseudoStateMarker) || [];
     const hasPseudoClass = forcedPseudoClasses.includes(pseudoClass);
@@ -1058,6 +1076,7 @@ export enum Events {
   MediaQueryResultChanged = 'MediaQueryResultChanged',
   ModelWasEnabled = 'ModelWasEnabled',
   ModelDisposed = 'ModelDisposed',
+  PositionTryOptionForced = 'PositionTryOptionForced',
   PseudoStateForced = 'PseudoStateForced',
   StartingStylesStateForced = 'StartingStylesStateForced',
   StyleSheetAdded = 'StyleSheetAdded',
@@ -1087,6 +1106,7 @@ export interface EventTypes {
   [Events.MediaQueryResultChanged]: void;
   [Events.ModelWasEnabled]: void;
   [Events.ModelDisposed]: CSSModel;
+  [Events.PositionTryOptionForced]: DOMNode;
   [Events.PseudoStateForced]: PseudoStateForcedEvent;
   [Events.StartingStylesStateForced]: DOMNode;
   [Events.StyleSheetAdded]: CSSStyleSheetHeader;
@@ -1096,6 +1116,7 @@ export interface EventTypes {
 }
 
 const PseudoStateMarker = 'pseudo-state-marker';
+const PositionTryOptionMarker = 'position-try-option-marker';
 
 export class Edit {
   styleSheetId: string;

package/front_end/core/sdk/CSSPropertyParser.ts

@@ -341,7 +341,7 @@ class ComputedTextChunk {
  * original and computed slices as required.
  **/
 export class ComputedText {
-  readonly #chunks: ComputedTextChunk[] = [];
+  #chunks: ComputedTextChunk[] = [];
   readonly text: string;
   readonly #topLevelValueCounts = new Map<string, number>();
 
@@ -356,6 +356,7 @@ export class ComputedText {
   }
 
   get chunkCount(): number {
+    this.#sortIfNecessary();
     return this.#chunks.length;
   }
 
@@ -363,6 +364,14 @@ export class ComputedText {
     if (this.#sorted) {
       return;
     }
+    // A match that was pushed more than once is superseded by its last push.
+    const lastPush = new Map<Match, ComputedTextChunk>();
+    for (const chunk of this.#chunks) {
+      lastPush.set(chunk.match, chunk);
+    }
+    if (lastPush.size < this.#chunks.length) {
+      this.#chunks = this.#chunks.filter(chunk => lastPush.get(chunk.match) === chunk);
+    }
     // Sort intervals by offset, with longer intervals first if the offset is identical.
     this.#chunks.sort((a, b) => {
       if (a.offset < b.offset) {
@@ -383,7 +392,7 @@ export class ComputedText {
   }
 
   // Add another substitutable match. The match will either be appended to the list of existing matches or it will
-  // be substituted for the last match(es) if it encompasses them.
+  // be substituted for the last match(es) if it encompasses them. Pushing a match again supersedes its earlier push.
   push(match: Match, offset: number): void {
     function hasComputedText(match: Match): match is MatchWithComputedText {
       return Boolean(match.computedText);

package/front_end/core/sdk/DOMModel.ts

@@ -1188,7 +1188,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
   }
 
   marker<T>(name: string): T|null {
-    return this.#markers.get(name) as T || null;
+    return (this.#markers.get(name) as T) ?? null;
   }
 
   getMarkerKeysForTest(): string[] {

package/front_end/core/sdk/DebuggerModel.ts

@@ -959,6 +959,9 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     this.#disableAsyncStackTracesSetting.removeChangeListener(this.asyncStackTracesStateChanged, this);
     this.#breakpointsActiveSetting.removeChangeListener(this.breakpointsActiveChanged, this);
     this.#jsSourceMapsEnabledSetting.removeChangeListener(this.jsSourceMapsStateChanged, this);
+    // Drop all scripts and their source maps, so they don't outlive the target in case something
+    // still holds on to this model (e.g. a console message with "Preserve log" enabled).
+    this.reset();
   }
 
   override async suspendModel(): Promise<void> {

package/front_end/core/sdk/EmulationModel.ts

@@ -4,7 +4,7 @@
 
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
-import type * as Common from '../common/common.js';
+import * as Common from '../common/common.js';
 
 import {CSSModel} from './CSSModel.js';
 import type {MultitargetNetworkManager} from './NetworkManager.js';
@@ -59,7 +59,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
   #screenOrientationLocked: boolean;
   #lockedOrientation: Protocol.Emulation.ScreenOrientation|null;
   readonly #dataSaverSetting: Common.Settings.Setting<DataSaverOverride>;
-  readonly #dataSaverChangeListener: () => void;
+  readonly #settingListeners: Common.EventTarget.EventDescriptor[] = [];
 
   constructor(target: Target) {
     super(target);
@@ -78,22 +78,22 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
 
     const settings = this.target().targetManager().settings;
     const disableJavascriptSetting = settings.resolve(javaScriptDisabledSettingDescriptor);
-    disableJavascriptSetting.addChangeListener(
+    this.#settingListeners.push(disableJavascriptSetting.addChangeListener(
         async () =>
-            await this.#emulationAgent.invoke_setScriptExecutionDisabled({value: disableJavascriptSetting.get()}));
+            await this.#emulationAgent.invoke_setScriptExecutionDisabled({value: disableJavascriptSetting.get()})));
     if (disableJavascriptSetting.get()) {
       void this.#emulationAgent.invoke_setScriptExecutionDisabled({value: true});
     }
 
     const touchSetting = settings.resolve(touchSettingDescriptor);
-    touchSetting.addChangeListener(() => {
+    this.#settingListeners.push(touchSetting.addChangeListener(() => {
       const settingValue = touchSetting.get();
 
       void this.overrideEmulateTouch(settingValue === 'force');
-    });
+    }));
 
     const idleDetectionSetting = settings.resolve(idleDetectionSettingDescriptor);
-    idleDetectionSetting.addChangeListener(async () => {
+    this.#settingListeners.push(idleDetectionSetting.addChangeListener(async () => {
       const settingValue = idleDetectionSetting.get();
       if (settingValue === 'none') {
         await this.clearIdleOverride();
@@ -105,10 +105,10 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
         isScreenUnlocked: boolean,
       });
       await this.setIdleOverride(emulationParams);
-    });
+    }));
 
     const cpuPressureDetectionSetting = settings.resolve(cpuPressureSettingDescriptor);
-    cpuPressureDetectionSetting.addChangeListener(async () => {
+    this.#settingListeners.push(cpuPressureDetectionSetting.addChangeListener(async () => {
       const settingValue = cpuPressureDetectionSetting.get();
 
       if (settingValue === 'none') {
@@ -123,7 +123,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
       }
 
       await this.setPressureStateOverride(settingValue);
-    });
+    }));
 
     const mediaTypeSetting = settings.resolve(emulatedCSSMediaSettingDescriptor);
     const mediaFeatureColorGamutSetting = settings.resolve(emulatedCSSMediaFeatureColorGamutSettingDescriptor);
@@ -152,67 +152,69 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
       ['prefers-reduced-motion', mediaFeaturePrefersReducedMotionSetting.get()],
       ['prefers-reduced-transparency', mediaFeaturePrefersReducedTransparencySetting.get()],
     ]);
-    mediaTypeSetting.addChangeListener(() => {
+    this.#settingListeners.push(mediaTypeSetting.addChangeListener(() => {
       this.#mediaConfiguration.set('type', mediaTypeSetting.get());
       void this.updateCssMedia();
-    });
-    mediaFeatureColorGamutSetting.addChangeListener(() => {
+    }));
+    this.#settingListeners.push(mediaFeatureColorGamutSetting.addChangeListener(() => {
       this.#mediaConfiguration.set('color-gamut', mediaFeatureColorGamutSetting.get());
       void this.updateCssMedia();
-    });
-    mediaFeaturePrefersColorSchemeSetting.addChangeListener(() => {
+    }));
+    this.#settingListeners.push(mediaFeaturePrefersColorSchemeSetting.addChangeListener(() => {
       this.#mediaConfiguration.set('prefers-color-scheme', mediaFeaturePrefersColorSchemeSetting.get());
       void this.updateCssMedia();
-    });
-    mediaFeatureForcedColorsSetting.addChangeListener(() => {
+    }));
+    this.#settingListeners.push(mediaFeatureForcedColorsSetting.addChangeListener(() => {
       this.#mediaConfiguration.set('forced-colors', mediaFeatureForcedColorsSetting.get());
       void this.updateCssMedia();
-    });
-    mediaFeaturePrefersContrastSetting.addChangeListener(() => {
+    }));
+    this.#settingListeners.push(mediaFeaturePrefersContrastSetting.addChangeListener(() => {
       this.#mediaConfiguration.set('prefers-contrast', mediaFeaturePrefersContrastSetting.get());
       void this.updateCssMedia();
-    });
-    mediaFeaturePrefersReducedDataSetting.addChangeListener(() => {
+    }));
+    this.#settingListeners.push(mediaFeaturePrefersReducedDataSetting.addChangeListener(() => {
       this.#mediaConfiguration.set('prefers-reduced-data', mediaFeaturePrefersReducedDataSetting.get());
       void this.updateCssMedia();
-    });
-    mediaFeaturePrefersReducedMotionSetting.addChangeListener(() => {
+    }));
+    this.#settingListeners.push(mediaFeaturePrefersReducedMotionSetting.addChangeListener(() => {
       this.#mediaConfiguration.set('prefers-reduced-motion', mediaFeaturePrefersReducedMotionSetting.get());
       void this.updateCssMedia();
-    });
-    mediaFeaturePrefersReducedTransparencySetting.addChangeListener(() => {
+    }));
+    this.#settingListeners.push(mediaFeaturePrefersReducedTransparencySetting.addChangeListener(() => {
       this.#mediaConfiguration.set('prefers-reduced-transparency', mediaFeaturePrefersReducedTransparencySetting.get());
       void this.updateCssMedia();
-    });
+    }));
     void this.updateCssMedia();
 
     const autoDarkModeSetting = settings.resolve(emulateAutoDarkModeSettingDescriptor);
-    autoDarkModeSetting.addChangeListener(() => {
+    this.#settingListeners.push(autoDarkModeSetting.addChangeListener(() => {
       const enabled = autoDarkModeSetting.get();
       mediaFeaturePrefersColorSchemeSetting.set(enabled ? 'dark' : '');
       void this.emulateAutoDarkMode(enabled);
-    });
+    }));
     if (autoDarkModeSetting.get()) {
       mediaFeaturePrefersColorSchemeSetting.set('dark');
       void this.emulateAutoDarkMode(true);
     }
 
     const visionDeficiencySetting = settings.resolve(emulatedVisionDeficiencySettingDescriptor);
-    visionDeficiencySetting.addChangeListener(() => this.emulateVisionDeficiency(visionDeficiencySetting.get()));
+    this.#settingListeners.push(
+        visionDeficiencySetting.addChangeListener(() => this.emulateVisionDeficiency(visionDeficiencySetting.get())));
     if (visionDeficiencySetting.get()) {
       void this.emulateVisionDeficiency(visionDeficiencySetting.get());
     }
 
     const osTextScaleSetting = settings.resolve(emulatedOSTextScaleSettingDescriptor);
-    osTextScaleSetting.addChangeListener(() => {
+    this.#settingListeners.push(osTextScaleSetting.addChangeListener(() => {
       void this.emulateOSTextScale(parseFloat(osTextScaleSetting.get()) || undefined);
-    });
+    }));
     if (osTextScaleSetting.get()) {
       void this.emulateOSTextScale(parseFloat(osTextScaleSetting.get()) || undefined);
     }
 
     const localFontsDisabledSetting = settings.resolve(localFontsDisabledSettingDescriptor);
-    localFontsDisabledSetting.addChangeListener(() => this.setLocalFontsDisabled(localFontsDisabledSetting.get()));
+    this.#settingListeners.push(
+        localFontsDisabledSetting.addChangeListener(() => this.setLocalFontsDisabled(localFontsDisabledSetting.get())));
     if (localFontsDisabledSetting.get()) {
       this.setLocalFontsDisabled(localFontsDisabledSetting.get());
     }
@@ -235,19 +237,18 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
       this.setDisabledImageTypes(types);
     };
 
-    avifFormatDisabledSetting.addChangeListener(updateDisabledImageFormats);
-    jpegXlFormatDisabledSetting.addChangeListener(updateDisabledImageFormats);
-    webpFormatDisabledSetting.addChangeListener(updateDisabledImageFormats);
+    this.#settingListeners.push(avifFormatDisabledSetting.addChangeListener(updateDisabledImageFormats));
+    this.#settingListeners.push(jpegXlFormatDisabledSetting.addChangeListener(updateDisabledImageFormats));
+    this.#settingListeners.push(webpFormatDisabledSetting.addChangeListener(updateDisabledImageFormats));
 
     if (avifFormatDisabledSetting.get() || jpegXlFormatDisabledSetting.get() || webpFormatDisabledSetting.get()) {
       updateDisabledImageFormats();
     }
 
     this.#dataSaverSetting = settings.resolve(dataSaverSettingDescriptor);
-    this.#dataSaverChangeListener = () => {
+    this.#settingListeners.push(this.#dataSaverSetting.addChangeListener(() => {
       void this.setDataSaverOverride(this.#dataSaverSetting.get());
-    };
-    this.#dataSaverSetting.addChangeListener(this.#dataSaverChangeListener, this);
+    }));
     if (this.#dataSaverSetting.get() !== DataSaverOverride.UNSET) {
       void this.setDataSaverOverride(this.#dataSaverSetting.get());
     }
@@ -266,7 +267,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
 
   override dispose(): void {
     super.dispose();
-    this.#dataSaverSetting.removeChangeListener(this.#dataSaverChangeListener, this);
+    Common.EventTarget.removeEventListeners(this.#settingListeners);
   }
 
   setTouchEmulationAllowed(touchEmulationAllowed: boolean): void {

package/front_end/core/sdk/NetworkManager.ts

@@ -563,6 +563,7 @@ export class NetworkManager extends SDKModel<EventTypes> {
     const settings = this.target().targetManager().settings;
     settings.resolve(cacheDisabledSettingDescriptor).removeChangeListener(this.cacheDisabledSettingChanged, this);
     settings.resolve(preserveNetworkLogSettingDescriptor).removeChangeListener(this.preserveLogChanged, this);
+    this.#bypassServiceWorkerSetting.removeChangeListener(this.bypassServiceWorkerChanged, this);
   }
 
   private bypassServiceWorkerChanged(): void {

package/front_end/core/sdk/NetworkRequest.ts

@@ -1506,6 +1506,27 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     return this.#contentData;
   }
 
+  /**
+   * Returns the response body without waiting for the request to finish loading.
+   *
+   * `requestContentData()` waits for `FINISHED_LOADING` when the request has no
+   * content data provider. Some requests never finish: Chrome does not send
+   * `loadingFinished` for a `Cache-Control: no-store` fetch() whose body the page
+   * never reads, and synthetic requests without a provider are never finished at all.
+   * Callers that must not block, such as AI context building, use this method instead.
+   *
+   * Requests with a content data provider (Local Overrides, Cache Storage, HAR
+   * imports) resolve even when they have not finished.
+   */
+  requestContentDataIfAvailable(): Promise<TextUtils.ContentData.ContentDataOrError> {
+    // A content data provider returns the body without waiting for the request
+    // to finish, so only requests without a content data provider can block.
+    if (!this.finished && !this.#contentDataProvider) {
+      return Promise.resolve({error: 'Request has not finished loading'});
+    }
+    return this.requestContentData();
+  }
+
   setContentDataProvider(
       dataProvider: () => Promise<TextUtils.ContentData.ContentDataOrError>,
       ): void {