chrome-devtools-mcp 0.10.2 → 0.12.0

package/README.md

@@ -7,7 +7,7 @@ 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.
 
-## [Tool reference](./docs/tool-reference.md) | [Changelog](./CHANGELOG.md) | [Contributing](./CONTRIBUTING.md) | [Troubleshooting](./docs/troubleshooting.md)
+## [Tool reference](./docs/tool-reference.md) | [Changelog](./CHANGELOG.md) | [Contributing](./CONTRIBUTING.md) | [Troubleshooting](./docs/troubleshooting.md) | [Design Principles](./docs/design-principles.md)
 
 ## Key features
 
@@ -63,6 +63,32 @@ amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
 
 </details>
 
+<details>
+  <summary>Antigravity</summary>
+
+To use the Chrome DevTools MCP server follow the instructions from <a href="https://antigravity.google/docs/mcp">Antigravity's docs<a/> to install a custom MCP server. Add the following config to the MCP servers config:
+
+```bash
+{
+  "mcpServers": {
+    "chrome-devtools": {
+      "command": "npx",
+      "args": [
+        "chrome-devtools-mcp@latest",
+        "--browser-url=http://127.0.0.1:9222",
+        "-y"
+      ]
+    }
+  }
+}
+```
+
+This will make the Chrome DevTools MCP server automatically connect to the browser that Antigravity is using. If you are not using port 9222, make sure to adjust accordingly.
+
+Chrome DevTools MCP will not start the browser instance automatically using this approach as as the Chrome DevTools MCP server runs in Antigravity's built-in browser. If the browser is not already running, you have to start it first by clicking the Chrome icon at the top right corner.
+
+</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>):
@@ -131,12 +157,22 @@ Configure the following fields and press `CTRL+S` to save the configuration:
 
 <details>
   <summary>Copilot / VS Code</summary>
-  Follow the MCP install <a href="https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server">guide</a>,
-  with the standard config from above. You can also install the Chrome DevTools MCP server using the VS Code CLI:
-  
-  ```bash
-  code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'
-  ```
+
+**Click the button to install:**
+
+[<img src="https://mcpbadge.dev/badge-install-in-vs-code-stable-dark" alt="Install in VS Code">](https://vscode.dev/redirect/mcp/install?name=io.github.ChromeDevTools%2Fchrome-devtools-mcp&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22chrome-devtools-mcp%22%5D%2C%22env%22%3A%7B%7D%7D)
+
+[<img src="https://mcpbadge.dev/badge-install-in-vs-code-insiders-dark" alt="Install in VS Code Insiders">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522io.github.ChromeDevTools%252Fchrome-devtools-mcp%2522%252C%2522config%2522%253A%257B%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522-y%2522%252C%2522chrome-devtools-mcp%2522%255D%252C%2522env%2522%253A%257B%257D%257D%257D)
+
+**Or install manually:**
+
+Follow the MCP install <a href="https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server">guide</a>,
+with the standard config from above. You can also install the Chrome DevTools MCP server using the VS Code CLI:
+
+```bash
+code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'
+```
+
 </details>
 
 <details>
@@ -214,6 +250,25 @@ Alternatively, follow the <a href="https://docs.qoder.com/user-guide/chat/model-
 
 </details>
 
+<details>
+  <summary>Qoder CLI</summary>
+
+Install the Chrome DevTools MCP server using the Qoder CLI (<a href="https://docs.qoder.com/cli/using-cli#mcp-servsers">guide</a>):
+
+**Project wide:**
+
+```bash
+qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
+```
+
+**Globally:**
+
+```bash
+qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest
+```
+
+</details>
+
 <details>
   <summary>Visual Studio</summary>
   
@@ -295,8 +350,13 @@ The Chrome DevTools MCP server supports the following configuration option:
 
 <!-- BEGIN AUTO GENERATED OPTIONS -->
 
+- **`--autoConnect`**
+  If specified, automatically connects to a browser (Chrome 145+) running in the user data directory identified by the channel param. Requires remote debugging being enabled in Chrome here: chrome://inspect/#remote-debugging.
+  - **Type:** boolean
+  - **Default:** `false`
+
 - **`--browserUrl`, `-u`**
-  Connect to a running Chrome instance using port forwarding. For more details see: https://developer.chrome.com/docs/devtools/remote-debugging/local-server.
+  Connect to a running, debuggable Chrome instance (e.g. `http://127.0.0.1:9222`). For more details see: https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.
   - **Type:** string
 
 - **`--wsEndpoint`, `-w`**
@@ -317,9 +377,12 @@ The Chrome DevTools MCP server supports the following configuration option:
   - **Type:** string
 
 - **`--isolated`**
-  If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed.
+  If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed. Defaults to false.
   - **Type:** boolean
-  - **Default:** `false`
+
+- **`--userDataDir`**
+  Path to the user data directory for Chrome. Default is $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE
+  - **Type:** string
 
 - **`--channel`**
   Specify a different Chrome channel that should be used. The default is the stable channel version.

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

@@ -14,7 +14,6 @@ import * as EventTarget from './EventTarget.js';
 import * as Gzip from './Gzip.js';
 import * as JavaScriptMetaData from './JavaScriptMetaData.js';
 import * as Lazy from './Lazy.js';
-import * as Linkifier from './Linkifier.js';
 import * as MapWithDefault from './MapWithDefault.js';
 import * as Mutex from './Mutex.js';
 import * as ObjectWrapper from './Object.js';
@@ -33,11 +32,10 @@ import * as StringOutputStream from './StringOutputStream.js';
 import * as TextDictionary from './TextDictionary.js';
 import * as Throttler from './Throttler.js';
 import * as Trie from './Trie.js';
-import * as Worker from './Worker.js';
 /*
  * This is re-exported here because we moved UIString into platform from
  * common and wanted to avoid a huge rename of imports. A future CL will
  * update all references to `Common.UIString` to `Platform.UIString`.
  */
 export { UIString } from '../platform/platform.js';
-export { App, AppProvider, Base64, CharacterIdMap, Color, ColorConverter, ColorUtils, Console, Debouncer, EventTarget, Gzip, JavaScriptMetaData, Lazy, Linkifier, MapWithDefault, Mutex, ObjectWrapper, ParsedURL, Progress, ResolverBase, ResourceType, ReturnToPanel, Revealer, Runnable, SegmentedRange, SettingRegistration, Settings, SimpleHistoryManager, StringOutputStream, TextDictionary, Throttler, Trie, Worker, };
+export { App, AppProvider, Base64, CharacterIdMap, Color, ColorConverter, ColorUtils, Console, Debouncer, EventTarget, Gzip, JavaScriptMetaData, Lazy, MapWithDefault, Mutex, ObjectWrapper, ParsedURL, Progress, ResolverBase, ResourceType, ReturnToPanel, Revealer, Runnable, SegmentedRange, SettingRegistration, Settings, SimpleHistoryManager, StringOutputStream, TextDictionary, Throttler, Trie, };

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

@@ -389,7 +389,7 @@ export function convertToUserTierEnum(userTier) {
                 return UserTier.PUBLIC;
         }
     }
-    return UserTier.BETA;
+    return UserTier.PUBLIC;
 }
 let hostConfigTrackerInstance;
 export class HostConfigTracker extends Common.ObjectWrapper.ObjectWrapper {

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

@@ -2,436 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as Common from '../common/common.js';
-import * as i18n from '../i18n/i18n.js';
-import * as Platform from '../platform/platform.js';
 import * as Root from '../root/root.js';
-import { EventDescriptors, Events, } from './InspectorFrontendHostAPI.js';
+import { EventDescriptors, } from './InspectorFrontendHostAPI.js';
+import { InspectorFrontendHostStub } from './InspectorFrontendHostStub.js';
 import { streamWrite as resourceLoaderStreamWrite } from './ResourceLoader.js';
-const UIStrings = {
-    /**
-     * @description Document title in Inspector Frontend Host of the DevTools window
-     * @example {example.com} PH1
-     */
-    devtoolsS: 'DevTools - {PH1}',
-};
-const str_ = i18n.i18n.registerUIStrings('core/host/InspectorFrontendHost.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const MAX_RECORDED_HISTOGRAMS_SIZE = 100;
-const OVERRIDES_FILE_SYSTEM_PATH = '/overrides';
-/**
- * The `InspectorFrontendHostStub` is a stub interface used the frontend is loaded like a webpage. Examples:
- *   - devtools://devtools/bundled/devtools_app.html
- *   - https://chrome-devtools-frontend.appspot.com/serve_rev/@030cc140435b0152645522b9864b75cac6c0a854/worker_app.html
- *   - http://localhost:9222/devtools/inspector.html?ws=localhost:9222/devtools/page/xTARGET_IDx
- *
- * When the frontend runs within the native embedder, then the InspectorFrontendHostAPI methods are provided
- * by devtools_compatibility.js. Those leverage `DevToolsAPI.sendMessageToEmbedder()` which match up with
- * the embedder API defined here: https://source.chromium.org/search?q=f:devtools%20f:dispatcher%20f:cc%20symbol:CreateForDevToolsFrontend&sq=&ss=chromium%2Fchromium%2Fsrc
- * The native implementations live in devtools_ui_bindings.cc: https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/devtools/devtools_ui_bindings.cc
- */
-export class InspectorFrontendHostStub {
-    #urlsBeingSaved = new Map();
-    #fileSystem = null;
-    recordedCountHistograms = [];
-    recordedEnumeratedHistograms = [];
-    recordedPerformanceHistograms = [];
-    constructor() {
-        // Guard against errors should this file ever be imported at the top level
-        // within a worker - in which case this constructor is run. If there's no
-        // document, we can early exit.
-        if (typeof document === 'undefined') {
-            return;
-        }
-        function stopEventPropagation(event) {
-            // Let browser handle Ctrl+/Ctrl- shortcuts in hosted mode.
-            const zoomModifier = this.platform() === 'mac' ? event.metaKey : event.ctrlKey;
-            if (zoomModifier && (event.key === '+' || event.key === '-')) {
-                event.stopPropagation();
-            }
-        }
-        document.addEventListener('keydown', event => {
-            stopEventPropagation.call(this, (event));
-        }, true);
-    }
-    platform() {
-        const userAgent = navigator.userAgent;
-        if (userAgent.includes('Windows NT')) {
-            return 'windows';
-        }
-        if (userAgent.includes('Mac OS X')) {
-            return 'mac';
-        }
-        return 'linux';
-    }
-    loadCompleted() {
-    }
-    bringToFront() {
-    }
-    closeWindow() {
-    }
-    setIsDocked(_isDocked, callback) {
-        window.setTimeout(callback, 0);
-    }
-    showSurvey(_trigger, callback) {
-        window.setTimeout(() => callback({ surveyShown: false }), 0);
-    }
-    canShowSurvey(_trigger, callback) {
-        window.setTimeout(() => callback({ canShowSurvey: false }), 0);
-    }
-    /**
-     * Requests inspected page to be placed atop of the inspector frontend with specified bounds.
-     */
-    setInspectedPageBounds(_bounds) {
-    }
-    inspectElementCompleted() {
-    }
-    setInjectedScriptForOrigin(_origin, _script) {
-    }
-    inspectedURLChanged(url) {
-        document.title = i18nString(UIStrings.devtoolsS, { PH1: url.replace(/^https?:\/\//, '') });
-    }
-    copyText(text) {
-        if (text === undefined || text === null) {
-            return;
-        }
-        void navigator.clipboard.writeText(text);
-    }
-    openInNewTab(url) {
-        if (Common.ParsedURL.schemeIs(url, 'javascript:')) {
-            return;
-        }
-        window.open(url, '_blank');
-    }
-    openSearchResultsInNewTab(_query) {
-        Common.Console.Console.instance().error('Search is not enabled in hosted mode. Please inspect using chrome://inspect');
-    }
-    showItemInFolder(_fileSystemPath) {
-        Common.Console.Console.instance().error('Show item in folder is not enabled in hosted mode. Please inspect using chrome://inspect');
-    }
-    // Reminder: the methods in this class belong to InspectorFrontendHostStub and are typically not executed.
-    // InspectorFrontendHostStub is ONLY used in the uncommon case of devtools not being embedded. For example: trace.cafe or http://localhost:9222/devtools/inspector.html?ws=localhost:9222/devtools/page/xTARGET_IDx
-    save(url, content, _forceSaveAs, isBase64) {
-        let buffer = this.#urlsBeingSaved.get(url)?.buffer;
-        if (!buffer) {
-            buffer = [];
-            this.#urlsBeingSaved.set(url, { isBase64, buffer });
-        }
-        buffer.push(content);
-        this.events.dispatchEventToListeners(Events.SavedURL, { url, fileSystemPath: url });
-    }
-    append(url, content) {
-        const buffer = this.#urlsBeingSaved.get(url)?.buffer;
-        if (buffer) {
-            buffer.push(content);
-            this.events.dispatchEventToListeners(Events.AppendedToURL, url);
-        }
-    }
-    close(url) {
-        const { isBase64, buffer } = this.#urlsBeingSaved.get(url) || { isBase64: false, buffer: [] };
-        this.#urlsBeingSaved.delete(url);
-        let fileName = '';
-        if (url) {
-            try {
-                const trimmed = Platform.StringUtilities.trimURL(url);
-                fileName = Platform.StringUtilities.removeURLFragment(trimmed);
-            }
-            catch {
-                // If url is not a valid URL, it is probably a filename.
-                fileName = url;
-            }
-        }
-        /* eslint-disable-next-line @devtools/no-imperative-dom-api */
-        const link = document.createElement('a');
-        link.download = fileName;
-        let blob;
-        if (isBase64) {
-            const bytes = Common.Base64.decode(buffer.join(''));
-            blob = new Blob([bytes], { type: 'application/gzip' });
-        }
-        else {
-            blob = new Blob(buffer, { type: 'text/plain' });
-        }
-        const blobUrl = URL.createObjectURL(blob);
-        link.href = blobUrl;
-        link.click();
-        URL.revokeObjectURL(blobUrl);
-    }
-    sendMessageToBackend(_message) {
-    }
-    recordCountHistogram(histogramName, sample, min, exclusiveMax, bucketSize) {
-        if (this.recordedCountHistograms.length >= MAX_RECORDED_HISTOGRAMS_SIZE) {
-            this.recordedCountHistograms.shift();
-        }
-        this.recordedCountHistograms.push({ histogramName, sample, min, exclusiveMax, bucketSize });
-    }
-    recordEnumeratedHistogram(actionName, actionCode, _bucketSize) {
-        if (this.recordedEnumeratedHistograms.length >= MAX_RECORDED_HISTOGRAMS_SIZE) {
-            this.recordedEnumeratedHistograms.shift();
-        }
-        this.recordedEnumeratedHistograms.push({ actionName, actionCode });
-    }
-    recordPerformanceHistogram(histogramName, duration) {
-        if (this.recordedPerformanceHistograms.length >= MAX_RECORDED_HISTOGRAMS_SIZE) {
-            this.recordedPerformanceHistograms.shift();
-        }
-        this.recordedPerformanceHistograms.push({ histogramName, duration });
-    }
-    recordUserMetricsAction(_umaName) {
-    }
-    recordNewBadgeUsage(_featureName) {
-    }
-    connectAutomaticFileSystem(_fileSystemPath, _fileSystemUUID, _addIfMissing, callback) {
-        queueMicrotask(() => callback({ success: false }));
-    }
-    disconnectAutomaticFileSystem(_fileSystemPath) {
-    }
-    requestFileSystems() {
-        this.events.dispatchEventToListeners(Events.FileSystemsLoaded, []);
-    }
-    addFileSystem(_type) {
-        const onFileSystem = (fs) => {
-            this.#fileSystem = fs;
-            const fileSystem = {
-                fileSystemName: 'sandboxedRequestedFileSystem',
-                fileSystemPath: OVERRIDES_FILE_SYSTEM_PATH,
-                rootURL: 'filesystem:devtools://devtools/isolated/',
-                type: 'overrides',
-            };
-            this.events.dispatchEventToListeners(Events.FileSystemAdded, { fileSystem });
-        };
-        window.webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024, onFileSystem);
-    }
-    removeFileSystem(_fileSystemPath) {
-        const removalCallback = (entries) => {
-            entries.forEach(entry => {
-                if (entry.isDirectory) {
-                    entry.removeRecursively(() => { });
-                }
-                else if (entry.isFile) {
-                    entry.remove(() => { });
-                }
-            });
-        };
-        if (this.#fileSystem) {
-            this.#fileSystem.root.createReader().readEntries(removalCallback);
-        }
-        this.#fileSystem = null;
-        this.events.dispatchEventToListeners(Events.FileSystemRemoved, OVERRIDES_FILE_SYSTEM_PATH);
-    }
-    isolatedFileSystem(_fileSystemId, _registeredName) {
-        return this.#fileSystem;
-    }
-    loadNetworkResource(url, _headers, streamId, callback) {
-        fetch(url)
-            .then(async (result) => {
-            const respBuffer = await result.arrayBuffer();
-            const text = await Common.Gzip.arrayBufferToString(respBuffer);
-            return text;
-        })
-            .then(function (text) {
-            resourceLoaderStreamWrite(streamId, text);
-            callback({
-                statusCode: 200,
-                headers: undefined,
-                messageOverride: undefined,
-                netError: undefined,
-                netErrorName: undefined,
-                urlValid: undefined,
-            });
-        })
-            .catch(function () {
-            callback({
-                statusCode: 404,
-                headers: undefined,
-                messageOverride: undefined,
-                netError: undefined,
-                netErrorName: undefined,
-                urlValid: undefined,
-            });
-        });
-    }
-    registerPreference(_name, _options) {
-    }
-    getPreferences(callback) {
-        const prefs = {};
-        for (const name in window.localStorage) {
-            prefs[name] = window.localStorage[name];
-        }
-        callback(prefs);
-    }
-    getPreference(name, callback) {
-        callback(window.localStorage[name]);
-    }
-    setPreference(name, value) {
-        window.localStorage[name] = value;
-    }
-    removePreference(name) {
-        delete window.localStorage[name];
-    }
-    clearPreferences() {
-        window.localStorage.clear();
-    }
-    getSyncInformation(callback) {
-        if ('getSyncInformationForTesting' in globalThis) {
-            // @ts-expect-error for testing
-            return callback(globalThis.getSyncInformationForTesting());
-        }
-        callback({
-            isSyncActive: false,
-            arePreferencesSynced: false,
-        });
-    }
-    getHostConfig(callback) {
-        // This HostConfig config is used in the hosted mode (see the
-        // comment on top of this class). Only add non-default config params
-        // here that you want to also apply in the hosted mode. For tests
-        // use the hostConfigForTesting override.
-        const hostConfigForHostedMode = {
-            devToolsVeLogging: {
-                enabled: true,
-            },
-            thirdPartyCookieControls: {
-                thirdPartyCookieMetadataEnabled: true,
-                thirdPartyCookieHeuristicsEnabled: true,
-                managedBlockThirdPartyCookies: 'Unset',
-            },
-            devToolsFlexibleLayout: {
-                verticalDrawerEnabled: true,
-            },
-            devToolsStartingStyleDebugging: {
-                enabled: false,
-            },
-        };
-        if ('hostConfigForTesting' in globalThis) {
-            const { hostConfigForTesting } = globalThis;
-            for (const key of Object.keys(hostConfigForTesting)) {
-                const mergeEntry = (key) => {
-                    if (typeof hostConfigForHostedMode[key] === 'object' && typeof hostConfigForTesting[key] === 'object') {
-                        // If the config is an object, merge the settings, but preferring
-                        // the hostConfigForTesting values over the result values.
-                        hostConfigForHostedMode[key] = { ...hostConfigForHostedMode[key], ...hostConfigForTesting[key] };
-                    }
-                    else {
-                        // Override with the testing config if the value is present + not null/undefined.
-                        hostConfigForHostedMode[key] = hostConfigForTesting[key] ?? hostConfigForHostedMode[key];
-                    }
-                };
-                mergeEntry(key);
-            }
-        }
-        callback(hostConfigForHostedMode);
-    }
-    upgradeDraggedFileSystemPermissions(_fileSystem) {
-    }
-    indexPath(_requestId, _fileSystemPath, _excludedFolders) {
-    }
-    stopIndexing(_requestId) {
-    }
-    searchInPath(_requestId, _fileSystemPath, _query) {
-    }
-    zoomFactor() {
-        return 1;
-    }
-    zoomIn() {
-    }
-    zoomOut() {
-    }
-    resetZoom() {
-    }
-    setWhitelistedShortcuts(_shortcuts) {
-    }
-    setEyeDropperActive(_active) {
-    }
-    showCertificateViewer(_certChain) {
-    }
-    reattach(_callback) {
-    }
-    readyForTest() {
-    }
-    connectionReady() {
-    }
-    setOpenNewWindowForPopups(_value) {
-    }
-    setDevicesDiscoveryConfig(_config) {
-    }
-    setDevicesUpdatesEnabled(_enabled) {
-    }
-    openRemotePage(_browserId, _url) {
-    }
-    openNodeFrontend() {
-    }
-    showContextMenuAtPoint(_x, _y, _items, _document) {
-        throw new Error('Soft context menu should be used');
-    }
-    /**
-     * Think of **Hosted mode** as "non-embedded" mode; you can see a devtools frontend URL as the tab's URL. It's an atypical way that DevTools is run.
-     * Whereas in **Non-hosted** (aka "embedded"), DevTools is embedded and fully dockable. It's the common way DevTools is run.
-     *
-     * **Hosted mode** == we're using the `InspectorFrontendHostStub`. impl. (@see `InspectorFrontendHostStub` class comment)
-     * Whereas with **non-hosted** mode, native `DevToolsEmbedderMessageDispatcher` is used for CDP and more.  `globalThis.DevToolsAPI` is present.
-     *
-     * Relationships to other signals:
-     * - _Connection_: Hosted-ness does not indicate whether the frontend is _connected to a valid CDP target_.
-     * - _Dockability_: Being _"dockable"_ (aka `canDock`) is typically aligned but technically orthogonal.
-     * - _URL scheme_: If the main frame's URL scheme is `devtools://`, it's non-hosted.
-     *
-     *  | Example case                                | Mode           | Example devtools                                                              |
-     *  | :------------------------------------------ | :------------- | :---------------------------------------------------------------------------- |
-     *  | tab URL: `devtools://…`                     | **NOT Hosted** | `devtools://devtools/bundled/devtools_app.html?targetType=tab&...`            |
-     *  | tab URL: `devtools://…?ws=…`                | **NOT Hosted** | `devtools://devtools/bundled/devtools_app.html?ws=localhost:9228/...`         |
-     *  | tab URL: `devtools://…` but no connection   | **NOT Hosted** | `devtools://devtools/bundled/trace_app.html`                                  |
-     *  | tab URL: `https://…` but no connection      | **Hosted**     | `https://chrome-devtools-frontend.appspot.com/serve_rev/@.../trace_app.html`  |
-     *  | tab URL: `http://…?ws=` (connected)         | **Hosted**     | `http://localhost:9222/devtools/inspector.html?ws=localhost:9222/...`         |
-     */
-    isHostedMode() {
-        return true;
-    }
-    setAddExtensionCallback(_callback) {
-        // Extensions are not supported in hosted mode.
-    }
-    async initialTargetId() {
-        return null;
-    }
-    doAidaConversation(_request, _streamId, callback) {
-        callback({
-            error: 'Not implemented',
-        });
-    }
-    registerAidaClientEvent(_request, callback) {
-        callback({
-            error: 'Not implemented',
-        });
-    }
-    aidaCodeComplete(_request, callback) {
-        callback({
-            error: 'Not implemented',
-        });
-    }
-    dispatchHttpRequest(_request, callback) {
-        callback({ error: 'Not implemented' });
-    }
-    recordImpression(_event) {
-    }
-    recordResize(_event) {
-    }
-    recordClick(_event) {
-    }
-    recordHover(_event) {
-    }
-    recordDrag(_event) {
-    }
-    recordChange(_event) {
-    }
-    recordKeyDown(_event) {
-    }
-    recordSettingAccess(_event) {
-    }
-    recordFunctionCall(_event) {
-    }
-}
-// @ts-expect-error Global injected by devtools_compatibility.js
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export let InspectorFrontendHostInstance = globalThis.InspectorFrontendHost;
+export let InspectorFrontendHostInstance;
 class InspectorFrontendAPIImpl {
     constructor() {
         for (const descriptor of EventDescriptors) {
@@ -467,33 +43,37 @@ class InspectorFrontendAPIImpl {
         resourceLoaderStreamWrite(id, chunk);
     }
 }
-(function () {
-    function initializeInspectorFrontendHost() {
-        if (!InspectorFrontendHostInstance) {
-            // Instantiate stub for web-hosted mode if necessary.
-            // @ts-expect-error Global injected by devtools_compatibility.js
-            globalThis.InspectorFrontendHost = InspectorFrontendHostInstance = new InspectorFrontendHostStub();
-        }
-        else {
-            // Otherwise add stubs for missing methods that are declared in the interface.
-            const proto = InspectorFrontendHostStub.prototype;
-            for (const name of Object.getOwnPropertyNames(proto)) {
-                const stub = proto[name];
-                if (typeof stub !== 'function' || InspectorFrontendHostInstance[name]) {
-                    continue;
-                }
-                console.error(`Incompatible embedder: method Host.InspectorFrontendHost.${name} is missing. Using stub instead.`);
-                // @ts-expect-error Global injected by devtools_compatibility.js
-                InspectorFrontendHostInstance[name] = stub;
+/**
+ * Installs the provided host bindings implementation as the globally used one by DevTools.
+ *
+ *   - In non-hosted mode this is provided by `devtools_compatibility.js`.
+ *   - In hosted mode this tends to be the {@link InspectorFrontendHostStub}.
+ *   - For the MCP server this is a custom node.js specific implementation.
+ *
+ * Note that missing methods will be copied over from the stub.
+ */
+export function installInspectorFrontendHost(instance) {
+    globalThis.InspectorFrontendHost = InspectorFrontendHostInstance = instance;
+    if (!(instance instanceof InspectorFrontendHostStub)) {
+        // Add stubs for missing methods.
+        const proto = InspectorFrontendHostStub.prototype;
+        for (const name of Object.getOwnPropertyNames(proto)) {
+            const stub = proto[name];
+            if (typeof stub !== 'function' || InspectorFrontendHostInstance[name]) {
+                continue;
             }
+            console.error(`Incompatible embedder: method Host.InspectorFrontendHost.${name} is missing. Using stub instead.`);
+            // @ts-expect-error Global injected by devtools_compatibility.js
+            InspectorFrontendHostInstance[name] = stub;
         }
-        // Attach the events object.
-        InspectorFrontendHostInstance.events = new Common.ObjectWrapper.ObjectWrapper();
     }
+    // Attach the events object.
+    InspectorFrontendHostInstance.events = new Common.ObjectWrapper.ObjectWrapper();
+}
+(function () {
     // FIXME: This file is included into both apps, since the devtools_app needs the InspectorFrontendHostAPI only,
     // so the host instance should not be initialized there.
-    initializeInspectorFrontendHost();
-    // @ts-expect-error Global injected by devtools_compatibility.js
+    installInspectorFrontendHost(globalThis.InspectorFrontendHost ?? new InspectorFrontendHostStub());
     globalThis.InspectorFrontendAPI = new InspectorFrontendAPIImpl();
 })();
 export function isUnderTest(prefs) {
@@ -508,3 +88,5 @@ export function isUnderTest(prefs) {
     return Common.Settings.Settings.hasInstance() &&
         Common.Settings.Settings.instance().createSetting('isUnderTest', false).get();
 }
+// The stub class used to be declared here so for backwards compatibility we re-export it from here.
+export { InspectorFrontendHostStub };