chrome-devtools-mcp 0.8.0 → 0.9.0

package/README.md

@@ -53,6 +53,16 @@ Add the following config to your MCP client:
 
 ### MCP Client configuration
 
+<details>
+  <summary>Amp</summary>
+  Follow https://ampcode.com/manual#mcp and use the config provided above. You can also install the Chrome DevTools MCP server using the CLI:
+
+```bash
+amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
+```
+
+</details>
+
 <details>
   <summary>Claude Code</summary>
     Use the Claude Code CLI to add the Chrome DevTools MCP server (<a href="https://docs.anthropic.com/en/docs/claude-code/mcp">guide</a>):
@@ -115,8 +125,7 @@ Configure the following fields and press `CTRL+S` to save the configuration:
 
 - **Server name:** `chrome-devtools`
 - **Server Type:** `[1] Local`
-- **Command:** `npx`
-- **Arguments:** `-y, chrome-devtools-mcp@latest`
+- **Command:** `npx -y chrome-devtools-mcp@latest`
 
 </details>
 
@@ -177,6 +186,24 @@ The same way chrome-devtools-mcp can be configured for JetBrains Junie in `Setti
 
 </details>
 
+<details>
+  <summary>Kiro</summary>
+
+In **Kiro Settings**, go to `Configure MCP` > `Open Workspace or User MCP Config` > Use the configuration snippet provided above.
+
+Or, from the IDE **Activity Bar** > `Kiro` > `MCP Servers` > `Click Open MCP Config`. Use the configuration snippet provided above.
+
+</details>
+
+<details>
+  <summary>Qoder</summary>
+
+In **Qoder Settings**, go to `MCP Server` > `+ Add` > Use the configuration snippet provided above.
+
+Alternatively, follow the <a href="https://docs.qoder.com/user-guide/chat/model-context-protocol">MCP guide</a> and use the standard config from above.
+
+</details>
+
 <details>
   <summary>Visual Studio</summary>
   
@@ -238,8 +265,9 @@ If you run into any issues, checkout our [troubleshooting guide](./docs/troubles
 - **Network** (2 tools)
   - [`get_network_request`](docs/tool-reference.md#get_network_request)
   - [`list_network_requests`](docs/tool-reference.md#list_network_requests)
-- **Debugging** (4 tools)
+- **Debugging** (5 tools)
   - [`evaluate_script`](docs/tool-reference.md#evaluate_script)
+  - [`get_console_message`](docs/tool-reference.md#get_console_message)
   - [`list_console_messages`](docs/tool-reference.md#list_console_messages)
   - [`take_screenshot`](docs/tool-reference.md#take_screenshot)
   - [`take_snapshot`](docs/tool-reference.md#take_snapshot)
@@ -256,6 +284,14 @@ The Chrome DevTools MCP server supports the following configuration option:
   Connect to a running Chrome instance using port forwarding. For more details see: https://developer.chrome.com/docs/devtools/remote-debugging/local-server.
   - **Type:** string
 
+- **`--wsEndpoint`, `-w`**
+  WebSocket endpoint to connect to a running Chrome instance (e.g., ws://127.0.0.1:9222/devtools/browser/<id>). Alternative to --browserUrl.
+  - **Type:** string
+
+- **`--wsHeaders`**
+  Custom headers for WebSocket connection in JSON format (e.g., '{"Authorization":"Bearer token"}'). Only works with --wsEndpoint.
+  - **Type:** string
+
 - **`--headless`**
   Whether to run in headless (no UI) mode.
   - **Type:** boolean
@@ -295,6 +331,21 @@ The Chrome DevTools MCP server supports the following configuration option:
   Additional arguments for Chrome. Only applies when Chrome is launched by chrome-devtools-mcp.
   - **Type:** array
 
+- **`--categoryEmulation`**
+  Set to false to exlcude tools related to emulation.
+  - **Type:** boolean
+  - **Default:** `true`
+
+- **`--categoryPerformance`**
+  Set to false to exlcude tools related to performance.
+  - **Type:** boolean
+  - **Default:** `true`
+
+- **`--categoryNetwork`**
+  Set to false to exlcude tools related to network.
+  - **Type:** boolean
+  - **Default:** `true`
+
 <!-- END AUTO GENERATED OPTIONS -->
 
 Pass them via the `args` property in the JSON configuration. For example:
@@ -315,6 +366,27 @@ Pass them via the `args` property in the JSON configuration. For example:
 }
 ```
 
+### Connecting via WebSocket with custom headers
+
+You can connect directly to a Chrome WebSocket endpoint and include custom headers (e.g., for authentication):
+
+```json
+{
+  "mcpServers": {
+    "chrome-devtools": {
+      "command": "npx",
+      "args": [
+        "chrome-devtools-mcp@latest",
+        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
+        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
+      ]
+    }
+  }
+}
+```
+
+To get the WebSocket endpoint from a running Chrome instance, visit `http://127.0.0.1:9222/json/version` and look for the `webSocketDebuggerUrl` field.
+
 You can also run `npx chrome-devtools-mcp@latest --help` to see all available configuration options.
 
 ## Concepts
@@ -340,7 +412,7 @@ Here is a step-by-step guide on how to connect to a running Chrome Stable instan
 
 **Step 1: Configure the MCP client**
 
-Add the `--browser-url` option to your MCP client configuration. The value of this option should be the URL of the running Chrome instance. `http://localhost:9222` is a common default.
+Add the `--browser-url` option to your MCP client configuration. The value of this option should be the URL of the running Chrome instance. `http://127.0.0.1:9222` is a common default.
 
 ```json
 {
@@ -349,7 +421,7 @@ Add the `--browser-url` option to your MCP client configuration. The value of th
       "command": "npx",
       "args": [
         "chrome-devtools-mcp@latest",
-        "--browser-url=http://localhost:9222"
+        "--browser-url=http://127.0.0.1:9222"
       ]
     }
   }
@@ -393,6 +465,8 @@ Check the performance of https://developers.chrome.com
 
 Your MCP client should connect to the running Chrome instance and receive a performance report.
 
+If you hit VM-to-host port forwarding issues, see the “Remote debugging between virtual machine (VM) and host fails” section in [`docs/troubleshooting.md`](./docs/troubleshooting.md#remote-debugging-between-virtual-machine-vm-and-host-fails).
+
 For more details on remote debugging, see the [Chrome DevTools documentation](https://developer.chrome.com/docs/devtools/remote-debugging/).
 
 ## Known limitations

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

@@ -44,14 +44,16 @@ export async function compress(str) {
     return buffer;
 }
 /** Private coder/decoder **/
-function gzipCodec(buffer, codecStream) {
-    const { readable, writable } = new TransformStream();
+async function gzipCodec(buffer, codecStream) {
+    const readable = new ReadableStream({
+        start(controller) {
+            controller.enqueue(buffer);
+            controller.close();
+        }
+    });
     const codecReadable = readable.pipeThrough(codecStream);
-    const writer = writable.getWriter();
-    void writer.write(buffer);
-    void writer.close();
     // A response is a convenient way to get an ArrayBuffer from a ReadableStream.
-    return new Response(codecReadable).arrayBuffer();
+    return await new Response(codecReadable).arrayBuffer();
 }
 export function decompressStream(stream) {
     // https://github.com/wicg/compression/blob/main/explainer.md#deflate-compress-an-arraybuffer

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

@@ -93,7 +93,7 @@ export class Settings {
      * to store UI state such as how a user choses to position a split widget or
      * which panel they last opened.
      * If you are creating a setting that you expect the user to control, and
-     * sync, prefer {@see createSetting}
+     * sync, prefer {@link Settings.createSetting}
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     moduleSetting(settingName) {

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

@@ -4,9 +4,14 @@
 export class WorkerWrapper {
     #workerPromise;
     #disposed;
+    #rejectWorkerPromise;
     constructor(workerLocation) {
-        this.#workerPromise = new Promise(fulfill => {
+        this.#workerPromise = new Promise((fulfill, reject) => {
+            this.#rejectWorkerPromise = reject;
             const worker = new Worker(workerLocation, { type: 'module' });
+            worker.onerror = event => {
+                console.error(`Failed to load worker for ${workerLocation.href}:`, event);
+            };
             worker.onmessage = (event) => {
                 console.assert(event.data === 'workerReady');
                 worker.onmessage = null;
@@ -28,7 +33,10 @@ export class WorkerWrapper {
         this.#disposed = true;
         void this.#workerPromise.then(worker => worker.terminate());
     }
-    terminate() {
+    terminate(immediately = false) {
+        if (immediately) {
+            this.#rejectWorkerPromise?.(new Error('Worker terminated'));
+        }
         this.dispose();
     }
     set onmessage(listener) {

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

@@ -425,7 +425,8 @@ export var Action;
     Action[Action["AiCodeCompletionSuggestionAccepted"] = 187] = "AiCodeCompletionSuggestionAccepted";
     Action[Action["AiCodeCompletionError"] = 188] = "AiCodeCompletionError";
     Action[Action["AttributeLinkClicked"] = 189] = "AttributeLinkClicked";
-    Action[Action["MAX_VALUE"] = 190] = "MAX_VALUE";
+    Action[Action["InsightRequestedViaTeaser"] = 190] = "InsightRequestedViaTeaser";
+    Action[Action["MAX_VALUE"] = 191] = "MAX_VALUE";
     /* eslint-enable @typescript-eslint/naming-convention */
 })(Action || (Action = {}));
 export var PanelCodes;

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

@@ -18,7 +18,7 @@ export const removeElement = (array, element, firstOnly) => {
     array.length = index;
     return true;
 };
-function swap(array, i1, i2) {
+export function swap(array, i1, i2) {
     const temp = array[i1];
     array[i1] = array[i2];
     array[i2] = temp;

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

@@ -0,0 +1,12 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+let connectionFactory;
+export class ConnectionTransport {
+    static setFactory(factory) {
+        connectionFactory = factory;
+    }
+    static getFactory() {
+        return connectionFactory;
+    }
+}

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

@@ -1,6 +1,8 @@
 // Copyright 2011 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 InspectorBackendCommands from '../../generated/InspectorBackendCommands.js';
+import { ConnectionTransport } from './ConnectionTransport.js';
 import { NodeURL } from './NodeURL.js';
 export const DevToolsStubErrorCode = -32015;
 // TODO(dgozman): we are not reporting generic errors in tests, but we should
@@ -20,6 +22,13 @@ export class InspectorBackend {
     #eventParameterNamesForDomain = new Map();
     typeMap = new Map();
     enumMap = new Map();
+    constructor() {
+        // Create the global here because registering commands will involve putting
+        // items onto the global.
+        // @ts-expect-error Global namespace instantiation
+        globalThis.Protocol ||= {};
+        InspectorBackendCommands.registerCommands(this);
+    }
     getOrCreateEventParameterNamesForDomain(domain) {
         let map = this.#eventParameterNamesForDomain.get(domain);
         if (!map) {
@@ -79,26 +88,6 @@ export class InspectorBackend {
         this.#initialized = true;
     }
 }
-let connectionFactory;
-export class Connection {
-    // on message from browser
-    setOnMessage(_onMessage) {
-    }
-    setOnDisconnect(_onDisconnect) {
-    }
-    // send raw CDP message to browser
-    sendRawMessage(_message) {
-    }
-    disconnect() {
-        throw new Error('not implemented');
-    }
-    static setFactory(factory) {
-        connectionFactory = factory;
-    }
-    static getFactory() {
-        return connectionFactory;
-    }
-}
 export const test = {
     /**
      * This will get called for every protocol message.
@@ -243,9 +232,8 @@ export class SessionRouter {
         const sessionId = messageObject.sessionId || '';
         const session = this.#sessions.get(sessionId);
         if (!session) {
-            if (!suppressUnknownMessageErrors) {
-                InspectorBackend.reportProtocolError('Protocol Error: the message with wrong session id', messageObject);
-            }
+            // In the DevTools MCP case, we may share the transport with puppeteer so we silently
+            // ignore unknown sessions.
             return;
         }
         // If this message is directly for the target controlled by the proxy connection, don't handle it.
@@ -337,18 +325,18 @@ export class TargetBase {
     constructor(needsNodeJSPatching, parentTarget, sessionId, connection) {
         this.needsNodeJSPatching = needsNodeJSPatching;
         this.sessionId = sessionId;
-        if ((!parentTarget && connection) || (!parentTarget && sessionId) || (connection && sessionId)) {
-            throw new Error('Either connection or sessionId (but not both) must be supplied for a child target');
+        if (parentTarget && !sessionId) {
+            throw new Error('Specifying a parent target requires a session ID');
         }
         let router;
-        if (sessionId && parentTarget && parentTarget.#router) {
+        if (parentTarget && parentTarget.#router) {
             router = parentTarget.#router;
         }
         else if (connection) {
             router = new SessionRouter(connection);
         }
         else {
-            router = new SessionRouter(connectionFactory());
+            router = new SessionRouter(ConnectionTransport.getFactory()());
         }
         this.#router = router;
         router.registerSession(this, this.sessionId);

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

@@ -1,13 +1,7 @@
 // Copyright 2019 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 InspectorBackendCommands from '../../generated/InspectorBackendCommands.js';
+import * as ConnectionTransport from './ConnectionTransport.js';
 import * as InspectorBackend from './InspectorBackend.js';
 import * as NodeURL from './NodeURL.js';
-export { InspectorBackend, NodeURL, };
-// Create the global here because registering commands will involve putting
-// items onto the global.
-// @ts-expect-error Global namespace instantiation
-
-// FIXME: This instance of InspectorBackend should not be a side effect of importing this module.
-
+export { ConnectionTransport, InspectorBackend, NodeURL, };

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

@@ -305,7 +305,7 @@ export class CSSMatchedStyles {
         if (!addedAttributesStyle) {
             addAttributesStyle.call(this);
         }
-        nodeCascades.push(new NodeCascade(this, nodeStyles, false /* #isInherited */));
+        nodeCascades.push(new NodeCascade(this, nodeStyles, this.#node, false /* #isInherited */));
         // Walk the node structure and identify styles with inherited properties.
         let parentNode = this.#node.parentNode;
         const traverseParentInFlatTree = async (node) => {
@@ -361,8 +361,9 @@ export class CSSMatchedStyles {
                 inheritedStyles.push(inheritedRule.style);
                 this.#inheritedStyles.add(inheritedRule.style);
             }
+            const node = parentNode;
             parentNode = await traverseParentInFlatTree(parentNode);
-            nodeCascades.push(new NodeCascade(this, inheritedStyles, true /* #isInherited */));
+            nodeCascades.push(new NodeCascade(this, inheritedStyles, node, true /* #isInherited */));
         }
         return new DOMInheritanceCascade(this, nodeCascades, this.#registeredProperties);
     }
@@ -396,7 +397,7 @@ export class CSSMatchedStyles {
             }
         }
         for (const [highlightName, highlightStyles] of splitHighlightRules) {
-            const nodeCascade = new NodeCascade(this, highlightStyles, isInherited, true /* #isHighlightPseudoCascade*/);
+            const nodeCascade = new NodeCascade(this, highlightStyles, node, isInherited, true /* #isHighlightPseudoCascade*/);
             const cascadeListForHighlightName = pseudoCascades.get(highlightName);
             if (cascadeListForHighlightName) {
                 cascadeListForHighlightName.push(nodeCascade);
@@ -434,7 +435,7 @@ export class CSSMatchedStyles {
                     }
                 }
                 const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(entryPayload.pseudoType);
-                const nodeCascade = new NodeCascade(this, pseudoStyles, false /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+                const nodeCascade = new NodeCascade(this, pseudoStyles, this.#node, false /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
                 pseudoCascades.set(entryPayload.pseudoType, [nodeCascade]);
             }
         }
@@ -458,7 +459,7 @@ export class CSSMatchedStyles {
                             this.addMatchingSelectors(parentNode, pseudoRule, rules[k].matchingSelectors);
                         }
                         const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(inheritedEntryPayload.pseudoType);
-                        const nodeCascade = new NodeCascade(this, pseudoStyles, true /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+                        const nodeCascade = new NodeCascade(this, pseudoStyles, parentNode, true /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
                         const cascadeListForPseudoType = pseudoCascades.get(inheritedEntryPayload.pseudoType);
                         if (cascadeListForPseudoType) {
                             cascadeListForPseudoType.push(nodeCascade);
@@ -736,11 +737,13 @@ class NodeCascade {
     #isHighlightPseudoCascade;
     propertiesState = new Map();
     activeProperties = new Map();
-    constructor(matchedStyles, styles, isInherited, isHighlightPseudoCascade = false) {
+    #node;
+    constructor(matchedStyles, styles, node, isInherited, isHighlightPseudoCascade = false) {
         this.#matchedStyles = matchedStyles;
         this.styles = styles;
         this.#isInherited = isInherited;
         this.#isHighlightPseudoCascade = isHighlightPseudoCascade;
+        this.#node = node;
     }
     computeActiveProperties() {
         this.propertiesState.clear();
@@ -791,9 +794,41 @@ class NodeCascade {
             }
         }
     }
+    #treeScopeDistance(property) {
+        if (!property.ownerStyle.parentRule && property.ownerStyle.type !== Type.Inline) {
+            return -1;
+        }
+        const root = this.#node.getTreeRoot();
+        const nodeId = property.ownerStyle.parentRule?.treeScope ?? root?.backendNodeId();
+        if (nodeId === undefined) {
+            return -1;
+        }
+        let distance = 0;
+        for (let ancestor = this.#node; ancestor; ancestor = ancestor.parentNode) {
+            if (ancestor.backendNodeId() === nodeId) {
+                return distance;
+            }
+            distance++;
+        }
+        return -1;
+    }
+    #needsCascadeContextStep() {
+        if (!this.#node.isInShadowTree()) {
+            return false;
+        }
+        if (this.#node.ancestorShadowRoot()?.shadowRootType() === 'user-agent') {
+            // In UA shadow dom, only standards-track pseudo elements override style attributes. -webkit-* and -internal-*
+            // pseudos are still exempt from that to retain legacy behavior.
+            const pseudoElement = this.#node.getAttribute('pseudo');
+            return !pseudoElement?.startsWith('-webkit-') && !pseudoElement?.startsWith('-internal-');
+        }
+        return true;
+    }
     updatePropertyState(propertyWithHigherSpecificity, canonicalName) {
         const activeProperty = this.activeProperties.get(canonicalName);
-        if (activeProperty?.important && !propertyWithHigherSpecificity.important) {
+        if (activeProperty?.important && !propertyWithHigherSpecificity.important ||
+            activeProperty && this.#needsCascadeContextStep() &&
+                this.#treeScopeDistance(activeProperty) > this.#treeScopeDistance(propertyWithHigherSpecificity)) {
             this.propertiesState.set(propertyWithHigherSpecificity, "Overloaded" /* PropertyState.OVERLOADED */);
             return;
         }

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

@@ -18,10 +18,12 @@ export class CSSRule {
     origin;
     style;
     header;
+    treeScope;
     constructor(cssModel, payload) {
         this.header = payload.header;
         this.cssModelInternal = cssModel;
         this.origin = payload.origin;
+        this.treeScope = payload.originTreeScopeNodeId;
         this.style = new CSSStyleDeclaration(this.cssModelInternal, this, payload.style, Type.Regular);
     }
     get sourceURL() {
@@ -87,7 +89,12 @@ export class CSSStyleRule extends CSSRule {
     startingStyles;
     wasUsed;
     constructor(cssModel, payload, wasUsed) {
-        super(cssModel, { origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload) });
+        super(cssModel, {
+            origin: payload.origin,
+            style: payload.style,
+            header: styleSheetHeaderForRule(cssModel, payload),
+            originTreeScopeNodeId: payload.originTreeScopeNodeId
+        });
         this.reinitializeSelectors(payload.selectorList);
         this.nestingSelectors = payload.nestingSelectors;
         this.media = payload.media ? CSSMedia.parseMediaArrayPayload(cssModel, payload.media) : [];
@@ -188,7 +195,12 @@ export class CSSStyleRule extends CSSRule {
 export class CSSPropertyRule extends CSSRule {
     #name;
     constructor(cssModel, payload) {
-        super(cssModel, { origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload) });
+        super(cssModel, {
+            origin: payload.origin,
+            style: payload.style,
+            header: styleSheetHeaderForRule(cssModel, payload),
+            originTreeScopeNodeId: undefined,
+        });
         this.#name = new CSSValue(payload.propertyName);
     }
     propertyName() {
@@ -218,7 +230,12 @@ export class CSSPropertyRule extends CSSRule {
 export class CSSFontPaletteValuesRule extends CSSRule {
     #paletteName;
     constructor(cssModel, payload) {
-        super(cssModel, { origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload) });
+        super(cssModel, {
+            origin: payload.origin,
+            style: payload.style,
+            header: styleSheetHeaderForRule(cssModel, payload),
+            originTreeScopeNodeId: undefined
+        });
         this.#paletteName = new CSSValue(payload.fontPaletteName);
     }
     name() {
@@ -244,7 +261,12 @@ export class CSSKeyframeRule extends CSSRule {
     #keyText;
     #parentRuleName;
     constructor(cssModel, payload, parentRuleName) {
-        super(cssModel, { origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload) });
+        super(cssModel, {
+            origin: payload.origin,
+            style: payload.style,
+            header: styleSheetHeaderForRule(cssModel, payload),
+            originTreeScopeNodeId: undefined
+        });
         this.reinitializeKey(payload.keyText);
         this.#parentRuleName = parentRuleName;
     }
@@ -288,7 +310,12 @@ export class CSSPositionTryRule extends CSSRule {
     #name;
     #active;
     constructor(cssModel, payload) {
-        super(cssModel, { origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload) });
+        super(cssModel, {
+            origin: payload.origin,
+            style: payload.style,
+            header: styleSheetHeaderForRule(cssModel, payload),
+            originTreeScopeNodeId: undefined
+        });
         this.#name = new CSSValue(payload.name);
         this.#active = payload.active;
     }
@@ -307,7 +334,8 @@ export class CSSFunctionRule extends CSSRule {
         super(cssModel, {
             origin: payload.origin,
             style: { cssProperties: [], shorthandEntries: [] },
-            header: styleSheetHeaderForRule(cssModel, payload)
+            header: styleSheetHeaderForRule(cssModel, payload),
+            originTreeScopeNodeId: undefined
         });
         this.#name = new CSSValue(payload.name);
         this.#parameters = payload.parameters.map(({ name }) => name);

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

@@ -156,6 +156,9 @@ export class ChildTargetManager extends SDKModel {
         else if (targetInfo.type === 'page') {
             type = Type.FRAME;
         }
+        else if (targetInfo.type === 'browser_ui') {
+            type = Type.FRAME;
+        }
         else if (targetInfo.type === 'worker') {
             type = Type.Worker;
         }

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

@@ -219,12 +219,12 @@ export class ParallelConnection {
     }
 }
 export async function initMainConnection(createRootTarget, onConnectionLost) {
-    ProtocolClient.InspectorBackend.Connection.setFactory(createMainConnection.bind(null, onConnectionLost));
+    ProtocolClient.ConnectionTransport.ConnectionTransport.setFactory(createMainConnection.bind(null, onConnectionLost));
     await createRootTarget();
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.connectionReady();
 }
 function createMainConnection(onConnectionLost) {
-    if (Root.Runtime.getPathName().includes('rehydrated_devtools_app')) {
+    if (Root.Runtime.Runtime.isTraceApp()) {
         return new RehydratingConnection(onConnectionLost);
     }
     const wsParam = Root.Runtime.Runtime.queryParam('ws');

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

@@ -381,6 +381,9 @@ export class DOMNode {
     isInShadowTree() {
         return this.#isInShadowTree;
     }
+    getTreeRoot() {
+        return this.isShadowRoot() ? this : (this.ancestorShadowRoot() ?? this.ownerDocument ?? this);
+    }
     ancestorShadowHost() {
         const ancestorShadowRoot = this.ancestorShadowRoot();
         return ancestorShadowRoot ? ancestorShadowRoot.parentNode : null;

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

@@ -11,6 +11,7 @@ import { Events as ResourceTreeModelEvents, ResourceTreeModel } from './Resource
 import { RuntimeModel } from './RuntimeModel.js';
 import { Script } from './Script.js';
 import { SDKModel } from './SDKModel.js';
+import { SourceMap } from './SourceMap.js';
 import { SourceMapManager } from './SourceMapManager.js';
 import { Type } from './Target.js';
 const UIStrings = {
@@ -146,7 +147,7 @@ export class DebuggerModel extends SDKModel {
         target.registerDebuggerDispatcher(new DebuggerDispatcher(this));
         this.agent = target.debuggerAgent();
         this.#runtimeModel = target.model(RuntimeModel);
-        this.#sourceMapManager = new SourceMapManager(target);
+        this.#sourceMapManager = new SourceMapManager(target, (compiledURL, sourceMappingURL, payload, script) => new SourceMap(compiledURL, sourceMappingURL, payload, script));
         Common.Settings.Settings.instance()
             .moduleSetting('pause-on-exception-enabled')
             .addChangeListener(this.pauseOnExceptionStateChanged, this);