chrome-devtools-mcp 0.1.0 → 0.2.1

package/README.md

@@ -1,14 +1,17 @@
 # Chrome DevTools MCP
 
-`chrome-devtools-mcp` is a Model-Context-Protocol (MCP) server that brings
-the power of Chrome DevTools to coding agents. Using it, coding agents can live
-debug style, performance or networking issues directly in Chrome.
+[![npm chrome-devtools-mcp package](https://img.shields.io/npm/v/chrome-devtools-mcp.svg)](https://npmjs.org/package/chrome-devtools-mcp)
+
+`chrome-devtools-mcp` lets your coding agent (such as Gemini, Claude, Cursor or Copilot)
+control and inspect a live Chrome browser. It acts as a Model-Context-Protocol
+(MCP) server, giving your AI coding assistant access to the full power of
+Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.
 
 ## Key features
 
 - **Get performance insights**: Uses [Chrome
   DevTools](https://github.com/ChromeDevTools/devtools-frontend) to record
-  traces and extract performance insights.
+  traces and extract actionable performance insights.
 - **Advanced browser debugging**: Analyze network requests, take screenshots and
   check the browser console.
 - **Reliable automation**. Uses
@@ -46,7 +49,7 @@ Add the following config to your MCP client:
 > [!NOTE]  
 > Using `chrome-devtools-mcp@latest` ensures that your MCP client will always use the latest version of the Chrome DevTools MCP server.
 
-### MCP Client specific configuration
+### MCP Client configuration
 
 <details>
   <summary>Claude Code</summary>
@@ -75,7 +78,15 @@ claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
 
 <details>
   <summary>Cursor</summary>
-  Follow https://docs.cursor.com/en/context/mcp#using-mcp-json and use the config provided above.
+
+**Click the button to install:**
+
+[<img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="Install in Cursor">](https://cursor.com/en/install-mcp?name=chrome-devtools&config=eyJjb21tYW5kIjoibnB4IGNocm9tZS1kZXZ0b29scy1tY3BAbGF0ZXN0In0%3D)
+
+**Or install manually:**
+
+Go to `Cursor Settings` -> `MCP` -> `New MCP Server`. Use the config provided above.
+
 </details>
 
 <details>
@@ -114,7 +125,8 @@ claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
   - [`emulate_cpu`](docs/tool-reference.md#emulate_cpu)
   - [`emulate_network`](docs/tool-reference.md#emulate_network)
   - [`resize_page`](docs/tool-reference.md#resize_page)
-- **Performance** (2 tools)
+- **Performance** (3 tools)
+  - [`performance_analyze_insight`](docs/tool-reference.md#performance_analyze_insight)
   - [`performance_start_trace`](docs/tool-reference.md#performance_start_trace)
   - [`performance_stop_trace`](docs/tool-reference.md#performance_stop_trace)
 - **Network** (2 tools)
@@ -153,10 +165,9 @@ The Chrome DevTools MCP server supports the following configuration option:
   - **Default:** `false`
 
 - **`--channel`**
-  Specify a different Chrome channel that should be used.
+  Specify a different Chrome channel that should be used. The default is the stable channel version.
   - **Type:** string
   - **Choices:** `stable`, `canary`, `beta`, `dev`
-  - **Default:** `stable`
 
 <!-- END AUTO GENERATED OPTIONS -->
 
@@ -187,10 +198,21 @@ You can also run `npx chrome-devtools-mcp@latest --help` to see all available co
 `chrome-devtools-mcp` starts a Chrome's stable channel instance using the following user
 data directory:
 
-- Linux / MacOS: `$HOME/.cache/chrome-devtools-mcp/mcp-profile-$CHANNEL`
-- Window: `%HOMEPATH%/.cache/chrome-devtools-mcp/mcp-profile-$CHANNEL`
+- Linux / MacOS: `$HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL`
+- Window: `%HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL`
 
 The user data directory is not cleared between runs and shared across
 all instances of `chrome-devtools-mcp`. Set the `isolated` option to `true`
 to use a temporary user data dir instead which will be cleared automatically after
 the browser is closed.
+
+## Known limitations
+
+### Operating system sandboxes
+
+Some MCP clients allow sandboxing the MCP server using macOS Seatbelt or Linux
+containers. If sandboxes are enabled, `chrome-devtools-mcp` is not able to start
+Chrome that requires permissions to create its own sandboxes. As a workaround,
+either disable sandboxing for `chrome-devtools-mcp` in your MCP client or use
+`--connect-url` to connect to a Chrome instance that you start manually outside
+of the MCP client sandbox.

package/build/node_modules/chrome-devtools-frontend/front_end/core/common/Progress.js

@@ -2,19 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 export class Progress {
-    setTotalWork(_totalWork) {
-    }
-    setTitle(_title) {
-    }
-    setWorked(_worked, _title) {
-    }
-    incrementWorked(_worked) {
-    }
-    done() {
-    }
-    isCanceled() {
-        return false;
-    }
+    totalWork = 0;
+    worked = 0;
+    title = undefined;
+    canceled = false;
+    done = false;
 }
 export class CompositeProgress {
     parent;
@@ -24,14 +16,14 @@ export class CompositeProgress {
         this.parent = parent;
         this.#children = [];
         this.#childrenDone = 0;
-        this.parent.setTotalWork(1);
-        this.parent.setWorked(0);
+        this.parent.totalWork = 1;
+        this.parent.worked = 0;
     }
     childDone() {
         if (++this.#childrenDone !== this.#children.length) {
             return;
         }
-        this.parent.done();
+        this.parent.done = true;
     }
     createSubProgress(weight) {
         const child = new SubProgress(this, weight);
@@ -43,12 +35,12 @@ export class CompositeProgress {
         let done = 0;
         for (let i = 0; i < this.#children.length; ++i) {
             const child = this.#children[i];
-            if (child.getTotalWork()) {
-                done += child.getWeight() * child.getWorked() / child.getTotalWork();
+            if (child.totalWork) {
+                done += child.weight * child.worked / child.totalWork;
             }
-            totalWeights += child.getWeight();
+            totalWeights += child.weight;
         }
-        this.parent.setWorked(done / totalWeights);
+        this.parent.worked = done / totalWeights;
     }
 }
 export class SubProgress {
@@ -62,76 +54,91 @@ export class SubProgress {
         this.#worked = 0;
         this.#totalWork = 0;
     }
-    isCanceled() {
-        return this.#composite.parent.isCanceled();
+    get canceled() {
+        return this.#composite.parent.canceled;
     }
-    setTitle(title) {
-        this.#composite.parent.setTitle(title);
+    set title(title) {
+        this.#composite.parent.title = title;
     }
-    done() {
-        this.setWorked(this.#totalWork);
+    set done(done) {
+        if (!done) {
+            return;
+        }
+        this.worked = this.#totalWork;
         this.#composite.childDone();
     }
-    setTotalWork(totalWork) {
+    set totalWork(totalWork) {
         this.#totalWork = totalWork;
         this.#composite.update();
     }
-    setWorked(worked, title) {
+    set worked(worked) {
         this.#worked = worked;
-        if (typeof title !== 'undefined') {
-            this.setTitle(title);
-        }
         this.#composite.update();
     }
-    incrementWorked(worked) {
-        this.setWorked(this.#worked + (worked || 1));
-    }
-    getWeight() {
+    get weight() {
         return this.#weight;
     }
-    getWorked() {
+    get worked() {
         return this.#worked;
     }
-    getTotalWork() {
+    get totalWork() {
         return this.#totalWork;
     }
 }
 export class ProgressProxy {
     #delegate;
     #doneCallback;
-    constructor(delegate, doneCallback) {
+    #updateCallback;
+    constructor(delegate, doneCallback, updateCallback) {
         this.#delegate = delegate;
         this.#doneCallback = doneCallback;
+        this.#updateCallback = updateCallback;
     }
-    isCanceled() {
-        return this.#delegate ? this.#delegate.isCanceled() : false;
+    get canceled() {
+        return this.#delegate ? this.#delegate.canceled : false;
     }
-    setTitle(title) {
+    set title(title) {
         if (this.#delegate) {
-            this.#delegate.setTitle(title);
+            this.#delegate.title = title;
+        }
+        if (this.#updateCallback) {
+            this.#updateCallback();
         }
     }
-    done() {
+    get title() {
+        return this.#delegate?.title ?? '';
+    }
+    set done(done) {
         if (this.#delegate) {
-            this.#delegate.done();
+            this.#delegate.done = done;
         }
-        if (this.#doneCallback) {
+        if (done && this.#doneCallback) {
             this.#doneCallback();
         }
     }
-    setTotalWork(totalWork) {
-        if (this.#delegate) {
-            this.#delegate.setTotalWork(totalWork);
-        }
+    get done() {
+        return this.#delegate ? this.#delegate.done : false;
     }
-    setWorked(worked, title) {
+    set totalWork(totalWork) {
         if (this.#delegate) {
-            this.#delegate.setWorked(worked, title);
+            this.#delegate.totalWork = totalWork;
         }
+        if (this.#updateCallback) {
+            this.#updateCallback();
+        }
+    }
+    get totalWork() {
+        return this.#delegate ? this.#delegate.totalWork : 0;
     }
-    incrementWorked(worked) {
+    set worked(worked) {
         if (this.#delegate) {
-            this.#delegate.incrementWorked(worked);
+            this.#delegate.worked = worked;
         }
+        if (this.#updateCallback) {
+            this.#updateCallback?.();
+        }
+    }
+    get worked() {
+        return this.#delegate ? this.#delegate.worked : 0;
     }
 }

package/build/node_modules/chrome-devtools-frontend/front_end/core/common/Settings.js

@@ -95,7 +95,6 @@ export class Settings {
      * If you are creating a setting that you expect the user to control, and
      * sync, prefer {@see createSetting}
      */
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     moduleSetting(settingName) {
         const setting = this.moduleSettings.get(settingName);
@@ -493,7 +492,6 @@ export class Setting {
         this.storage.dumpSizes();
     }
 }
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export class RegExpSetting extends Setting {
     #regexFlags;
@@ -539,6 +537,9 @@ export class RegExpSetting extends Setting {
         return this.#regex;
     }
 }
+// The VersionController does a lot of mapping and restructuring which often need
+// typecasting to any, allow it in there
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export class VersionController {
     static GLOBAL_VERSION_SETTING_NAME = 'inspectorVersion';
     static SYNCED_VERSION_SETTING_NAME = 'syncedInspectorVersion';
@@ -673,16 +674,12 @@ export class VersionController {
             const showMode = hidden ? 'OnlyMain' : 'Both';
             const newSetting = Settings.instance().createSetting(newName, {});
             const newValue = newSetting.get() || {};
-            // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
             // @ts-expect-error
             newValue.vertical = newValue.vertical || {};
-            // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
             // @ts-expect-error
             newValue.vertical.showMode = showMode;
-            // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
             // @ts-expect-error
             newValue.horizontal = newValue.horizontal || {};
-            // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
             // @ts-expect-error
             newValue.horizontal.showMode = showMode;
             newSetting.set(newValue);
@@ -755,7 +752,6 @@ export class VersionController {
         const newList = [];
         for (let i = 0; i < list.length; ++i) {
             const value = list[i];
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const device = {};
             device['title'] = value['title'];
             device['type'] = 'unknown';
@@ -793,8 +789,6 @@ export class VersionController {
         Settings.instance().createSetting('networkConditions', defaultValue).set(defaultValue);
     }
     updateVersionFrom14To15() {
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const setting = Settings.instance().createLocalSetting('workspaceExcludedFolders', {});
         const oldValue = setting.get();
         const newValue = {};
@@ -807,8 +801,6 @@ export class VersionController {
         setting.set(newValue);
     }
     updateVersionFrom15To16() {
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const setting = Settings.instance().createSetting('InspectorView.panelOrder', {});
         const tabOrders = setting.get();
         for (const key of Object.keys(tabOrders)) {
@@ -817,8 +809,6 @@ export class VersionController {
         setting.set(tabOrders);
     }
     updateVersionFrom16To17() {
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const setting = Settings.instance().createSetting('networkConditionsCustomProfiles', []);
         const oldValue = setting.get();
         const newValue = [];
@@ -836,8 +826,6 @@ export class VersionController {
         setting.set(newValue);
     }
     updateVersionFrom17To18() {
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const setting = Settings.instance().createLocalSetting('workspaceExcludedFolders', {});
         const oldValue = setting.get();
         const newValue = {};
@@ -857,8 +845,6 @@ export class VersionController {
     }
     updateVersionFrom18To19() {
         const defaultColumns = { status: true, type: true, initiator: true, size: true, time: true };
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const visibleColumnSettings = Settings.instance().createSetting('networkLogColumnsVisibility', defaultColumns);
         const visibleColumns = visibleColumnSettings.get();
         visibleColumns.name = true;
@@ -888,8 +874,6 @@ export class VersionController {
         networkColumns.set(columns);
     }
     updateVersionFrom21To22() {
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const breakpointsSetting = Settings.instance().createLocalSetting('breakpoints', []);
         const breakpoints = breakpointsSetting.get();
         for (const breakpoint of breakpoints) {
@@ -909,8 +893,6 @@ export class VersionController {
     }
     updateVersionFrom24To25() {
         const defaultColumns = { status: true, type: true, initiator: true, size: true, time: true };
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const networkLogColumnsSetting = Settings.instance().createSetting('networkLogColumns', defaultColumns);
         const columns = networkLogColumnsSetting.get();
         delete columns.product;
@@ -921,8 +903,6 @@ export class VersionController {
         const urls = Object.keys(oldSetting.get());
         const textFilter = urls.map(url => `-url:${url}`).join(' ');
         if (textFilter) {
-            // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const textFilterSetting = Settings.instance().createSetting('console.textFilter', '');
             const suffix = textFilterSetting.get() ? ` ${textFilterSetting.get()}` : '';
             textFilterSetting.set(`${textFilter}${suffix}`);
@@ -931,8 +911,6 @@ export class VersionController {
     }
     updateVersionFrom26To27() {
         function renameKeyInObjectSetting(settingName, from, to) {
-            // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const setting = Settings.instance().createSetting(settingName, {});
             const value = setting.get();
             if (from in value) {
@@ -960,8 +938,6 @@ export class VersionController {
     }
     updateVersionFrom28To29() {
         function renameKeyInObjectSetting(settingName, from, to) {
-            // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const setting = Settings.instance().createSetting(settingName, {});
             const value = setting.get();
             if (from in value) {
@@ -1007,7 +983,6 @@ export class VersionController {
         // this change we synchronized the breakpoint only by URL, but since we don't
         // know on which resource type the given breakpoint was set, we just assume
         // 'script' here to keep things simple.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const breakpointsSetting = Settings.instance().createLocalSetting('breakpoints', []);
         const breakpoints = breakpointsSetting.get();
         for (const breakpoint of breakpoints) {
@@ -1016,11 +991,9 @@ export class VersionController {
         breakpointsSetting.set(breakpoints);
     }
     updateVersionFrom32To33() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const previouslyViewedFilesSetting = Settings.instance().createLocalSetting('previouslyViewedFiles', []);
         let previouslyViewedFiles = previouslyViewedFilesSetting.get();
         // Discard old 'previouslyViewedFiles' items that don't have a 'url' property.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         previouslyViewedFiles = previouslyViewedFiles.filter((previouslyViewedFile) => 'url' in previouslyViewedFile);
         // Introduce the new 'resourceTypeName' property on previously viewed files.
         // Prior to this change we only keyed them based on the URL, but since we
@@ -1042,7 +1015,6 @@ export class VersionController {
         // the future.
         const logpointPrefix = '/** DEVTOOLS_LOGPOINT */ console.log(';
         const logpointSuffix = ')';
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const breakpointsSetting = Settings.instance().createLocalSetting('breakpoints', []);
         const breakpoints = breakpointsSetting.get();
         for (const breakpoint of breakpoints) {
@@ -1059,7 +1031,6 @@ export class VersionController {
         // the future.
         const logpointPrefix = '/** DEVTOOLS_LOGPOINT */ console.log(';
         const logpointSuffix = ')';
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const breakpointsSetting = Settings.instance().createLocalSetting('breakpoints', []);
         const breakpoints = breakpointsSetting.get();
         for (const breakpoint of breakpoints) {

package/build/node_modules/chrome-devtools-frontend/front_end/core/host/GdpClient.js

@@ -39,7 +39,7 @@ function normalizeBadgeName(name) {
 }
 export const GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK = 'https://developers.google.com/profile/u/me';
 async function makeHttpRequest(request) {
-    if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled) {
+    if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled || Root.Runtime.hostConfig.isOffTheRecord) {
         return null;
     }
     const response = await new Promise(resolve => {

package/build/node_modules/chrome-devtools-frontend/front_end/core/host/UserMetrics.js

@@ -418,7 +418,11 @@ export var Action;
     Action[Action["AiAssistanceOpenedFromPerformanceInsight"] = 182] = "AiAssistanceOpenedFromPerformanceInsight";
     Action[Action["AiAssistanceOpenedFromPerformanceFullButton"] = 183] = "AiAssistanceOpenedFromPerformanceFullButton";
     Action[Action["AiCodeCompletionResponseServedFromCache"] = 184] = "AiCodeCompletionResponseServedFromCache";
-    Action[Action["MAX_VALUE"] = 185] = "MAX_VALUE";
+    Action[Action["AiCodeCompletionRequestTriggered"] = 185] = "AiCodeCompletionRequestTriggered";
+    Action[Action["AiCodeCompletionSuggestionDisplayed"] = 186] = "AiCodeCompletionSuggestionDisplayed";
+    Action[Action["AiCodeCompletionSuggestionAccepted"] = 187] = "AiCodeCompletionSuggestionAccepted";
+    Action[Action["AiCodeCompletionError"] = 188] = "AiCodeCompletionError";
+    Action[Action["MAX_VALUE"] = 189] = "MAX_VALUE";
     /* eslint-enable @typescript-eslint/naming-convention */
 })(Action || (Action = {}));
 export var PanelCodes;
@@ -694,7 +698,6 @@ export var DevtoolsExperiments;
     DevtoolsExperiments[DevtoolsExperiments["just-my-code"] = 65] = "just-my-code";
     DevtoolsExperiments[DevtoolsExperiments["use-source-map-scopes"] = 76] = "use-source-map-scopes";
     DevtoolsExperiments[DevtoolsExperiments["timeline-show-postmessage-events"] = 86] = "timeline-show-postmessage-events";
-    DevtoolsExperiments[DevtoolsExperiments["timeline-save-as-gz"] = 108] = "timeline-save-as-gz";
     DevtoolsExperiments[DevtoolsExperiments["timeline-enhanced-traces"] = 90] = "timeline-enhanced-traces";
     DevtoolsExperiments[DevtoolsExperiments["timeline-compiled-sources"] = 91] = "timeline-compiled-sources";
     DevtoolsExperiments[DevtoolsExperiments["timeline-debug-mode"] = 93] = "timeline-debug-mode";

package/build/node_modules/chrome-devtools-frontend/front_end/core/i18n/i18n.js

@@ -1,9 +1,36 @@
+
 export const i18n = {
-    registerUIStrings: () => {},
-    getLocalizedString: (_, str) => {
-      // So that the string passed in gets output verbatim.
-      return str;
-    },
-    lockedLazyString: () => {},
-    getLazilyComputedLocalizedString: () => {}
-  };
+  registerUIStrings: () => {},
+  getLocalizedString: (_, str) => {
+    // So that the string passed in gets output verbatim.
+    return str;
+  },
+  lockedLazyString: () => {},
+  getLazilyComputedLocalizedString: () => {},
+};
+
+// TODO(jacktfranklin): once the DocumentLatency insight does not depend on
+// this method, we can remove this stub.
+export const TimeUtilities = {
+  millisToString(x) {
+    const separator = ' ';
+    const formatter = new Intl.NumberFormat('en-US', {
+      style: 'unit',
+      unitDisplay: 'narrow',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 1,
+      unit: 'millisecond',
+    });
+
+    const parts = formatter.formatToParts(x);
+    for (const part of parts) {
+      if (part.type === 'literal') {
+        if (part.value === ' ') {
+          part.value = separator;
+        }
+      }
+    }
+
+    return parts.map(part => part.value).join('');
+  }
+};

package/build/node_modules/chrome-devtools-frontend/front_end/core/protocol_client/InspectorBackend.js

@@ -81,10 +81,12 @@ export class InspectorBackend {
 }
 let connectionFactory;
 export class Connection {
+    // on message from browser
     setOnMessage(_onMessage) {
     }
     setOnDisconnect(_onDisconnect) {
     }
+    // send raw CDP message to browser
     sendRawMessage(_message) {
     }
     disconnect() {

package/build/node_modules/chrome-devtools-frontend/front_end/core/root/Runtime.js

@@ -1 +1,4 @@
-export default {};
+
+export function getChromeVersion() { return ''; };
+export const hostConfig = {};
+  

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/CSSMatchedStyles.js

@@ -5,7 +5,7 @@ import * as Platform from '../platform/platform.js';
 import { CSSMetadata, cssMetadata } from './CSSMetadata.js';
 import { CSSProperty } from './CSSProperty.js';
 import * as PropertyParser from './CSSPropertyParser.js';
-import { AnchorFunctionMatcher, AngleMatcher, AttributeMatcher, AutoBaseMatcher, BaseVariableMatcher, BezierMatcher, BinOpMatcher, ColorMatcher, ColorMixMatcher, defaultValueForCSSType, EnvFunctionMatcher, FlexGridMatcher, GridTemplateMatcher, LengthMatcher, LightDarkColorMatcher, LinearGradientMatcher, LinkableNameMatcher, localEvalCSS, MathFunctionMatcher, PositionAnchorMatcher, PositionTryMatcher, RelativeColorChannelMatcher, ShadowMatcher, StringMatcher, URLMatcher, VariableMatcher } from './CSSPropertyParserMatchers.js';
+import { AnchorFunctionMatcher, AngleMatcher, AttributeMatcher, AutoBaseMatcher, BaseVariableMatcher, BezierMatcher, BinOpMatcher, ColorMatcher, ColorMixMatcher, CustomFunctionMatcher, defaultValueForCSSType, EnvFunctionMatcher, FlexGridMatcher, GridTemplateMatcher, LengthMatcher, LightDarkColorMatcher, LinearGradientMatcher, LinkableNameMatcher, localEvalCSS, MathFunctionMatcher, PositionAnchorMatcher, PositionTryMatcher, RelativeColorChannelMatcher, ShadowMatcher, StringMatcher, URLMatcher, VariableMatcher } from './CSSPropertyParserMatchers.js';
 import { CSSFontPaletteValuesRule, CSSFunctionRule, CSSKeyframeRule, CSSKeyframesRule, CSSPositionTryRule, CSSPropertyRule, CSSStyleRule, } from './CSSRule.js';
 import { CSSStyleDeclaration, Type } from './CSSStyleDeclaration.js';
 function containsStyle(styles, query) {
@@ -713,6 +713,7 @@ export class CSSMatchedStyles {
             new PositionTryMatcher(),
             new LengthMatcher(),
             new MathFunctionMatcher(),
+            new CustomFunctionMatcher(),
             new AutoBaseMatcher(),
             new BinOpMatcher(),
             new RelativeColorChannelMatcher(),
@@ -997,9 +998,9 @@ class DOMInheritanceCascade {
         if (!nodeCascade) {
             return null;
         }
-        return this.innerComputeCSSVariable(nodeCascade, variableName);
+        return this.#computeCSSVariable(nodeCascade, variableName);
     }
-    innerComputeCSSVariable(nodeCascade, variableName, sccRecord = new SCCRecord()) {
+    #computeCSSVariable(nodeCascade, variableName, sccRecord = new SCCRecord()) {
         const availableCSSVariables = this.#availableCSSVariables.get(nodeCascade);
         const computedCSSVariables = this.#computedCSSVariables.get(nodeCascade);
         if (!computedCSSVariables || !availableCSSVariables?.has(variableName)) {
@@ -1029,7 +1030,7 @@ class DOMInheritanceCascade {
         if (!ast) {
             return null;
         }
-        return this.innerWalkTree(nodeCascade, ast, definedValue.declaration.style, variableName, sccRecord, definedValue.declaration);
+        return this.#walkTree(nodeCascade, ast, definedValue.declaration.style, variableName, sccRecord, definedValue.declaration);
     }
     computeAttribute(style, attributeName, type) {
         this.ensureInitialized();
@@ -1037,7 +1038,7 @@ class DOMInheritanceCascade {
         if (!nodeCascade) {
             return null;
         }
-        return this.innerComputeAttribute(nodeCascade, style, attributeName, type, new SCCRecord());
+        return this.#computeAttribute(nodeCascade, style, attributeName, type, new SCCRecord());
     }
     attributeValueAsType(style, attributeName, type) {
         const rawValue = this.#matchedStyles.rawAttributeValueFromStyle(style, attributeName);
@@ -1055,9 +1056,9 @@ class DOMInheritanceCascade {
         if (!ast) {
             return null;
         }
-        return this.innerWalkTree(nodeCascade, ast, style, `attr(${attributeName})`, sccRecord)?.value ?? null;
+        return this.#walkTree(nodeCascade, ast, style, `attr(${attributeName})`, sccRecord)?.value ?? null;
     }
-    innerComputeAttribute(nodeCascade, style, attributeName, type, sccRecord = new SCCRecord()) {
+    #computeAttribute(nodeCascade, style, attributeName, type, sccRecord = new SCCRecord()) {
         if (type.isCSSTokens) {
             const value = this.attributeValueWithSubstitutions(nodeCascade, style, attributeName, sccRecord);
             if (value !== null && localEvalCSS(value, type.type) !== null) {
@@ -1067,7 +1068,7 @@ class DOMInheritanceCascade {
         }
         return this.attributeValueAsType(style, attributeName, type.type);
     }
-    innerWalkTree(outerNodeCascade, ast, parentStyle, substitutionName, sccRecord, declaration) {
+    #walkTree(outerNodeCascade, ast, parentStyle, substitutionName, sccRecord, declaration) {
         const record = sccRecord.add(outerNodeCascade, substitutionName);
         const computedCSSVariablesMap = this.#computedCSSVariables;
         const innerNodeCascade = this.#styleToNodeCascade.get(parentStyle);
@@ -1081,7 +1082,7 @@ class DOMInheritanceCascade {
         // bubbling up the minimum discovery time whenever we close a cycle.
         const matching = PropertyParser.BottomUpTreeMatching.walk(ast, [
             new BaseVariableMatcher(match => {
-                const { value, mayFallback } = recurseWithCycleDetection(match.name, nodeCascade => this.innerComputeCSSVariable(nodeCascade, match.name, sccRecord)?.value ?? null);
+                const { value, mayFallback } = recurseWithCycleDetection(match.name, nodeCascade => this.#computeCSSVariable(nodeCascade, match.name, sccRecord)?.value ?? null);
                 if (!mayFallback || value !== null) {
                     return value;
                 }
@@ -1268,7 +1269,7 @@ class DOMInheritanceCascade {
             for (const variableName of variableNames) {
                 const prevValue = accumulatedCSSVariables.get(variableName);
                 accumulatedCSSVariables.delete(variableName);
-                const computedValue = this.innerComputeCSSVariable(nodeCascade, variableName);
+                const computedValue = this.#computeCSSVariable(nodeCascade, variableName);
                 if (prevValue && computedValue?.value === prevValue.value) {
                     computedValue.declaration = prevValue.declaration;
                 }

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/CSSModel.js

@@ -1,4 +1,4 @@
-// Copyright 2021 The Chromium Authors
+// Copyright 2010 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 TextUtils from '../../models/text_utils/text_utils.js';