@mcp-b/chrome-devtools-mcp 1.2.0 → 1.3.1

package/README.md

@@ -5,10 +5,10 @@
 [![npm @mcp-b/chrome-devtools-mcp package](https://img.shields.io/npm/v/@mcp-b/chrome-devtools-mcp.svg)](https://www.npmjs.com/package/@mcp-b/chrome-devtools-mcp)
 [![npm downloads](https://img.shields.io/npm/dm/@mcp-b/chrome-devtools-mcp?style=flat-square)](https://www.npmjs.com/package/@mcp-b/chrome-devtools-mcp)
 [![License: Apache 2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg?style=flat-square)](https://opensource.org/licenses/Apache-2.0)
-[![28 Tools](https://img.shields.io/badge/MCP_Tools-28-green?style=flat-square)](./docs/tool-reference.md)
+[![27 Tools](https://img.shields.io/badge/MCP_Tools-27-green?style=flat-square)](./docs/tool-reference.md)
 [![Chrome](https://img.shields.io/badge/Chrome-DevTools-4285F4?style=flat-square&logo=googlechrome)](https://developer.chrome.com/docs/devtools/)
 
-📖 **[WebMCP Documentation](https://docs.mcp-b.ai)** | 🚀 **[Quick Start](https://docs.mcp-b.ai/quickstart)** | 🔌 **[Connecting Agents](https://docs.mcp-b.ai/connecting-agents)**
+📖 **[WebMCP Documentation](https://docs.mcp-b.ai)** | 🚀 **[Quick Start](https://docs.mcp-b.ai/quickstart)** | 🔌 **[Connecting Agents](https://docs.mcp-b.ai/connecting-agents)** | 🎯 **[Chrome DevTools Quickstart](https://github.com/WebMCP-org/chrome-devtools-quickstart)**
 
 **@mcp-b/chrome-devtools-mcp** lets AI coding agents like Claude, Gemini, Cursor, and Copilot control and inspect a live Chrome browser via the Model Context Protocol (MCP). Get performance insights, debug network requests, take screenshots, and interact with website-specific MCP tools through WebMCP integration.
 
@@ -21,12 +21,27 @@
 
 | Feature | Benefit |
 |---------|---------|
-| **28 MCP Tools** | Comprehensive browser control - navigation, input, screenshots, performance, debugging |
+| **27 MCP Tools** | Comprehensive browser control - navigation, input, screenshots, performance, debugging |
 | **WebMCP Integration** | Connect to website-specific AI tools via `@mcp-b/global` |
 | **Performance Analysis** | Chrome DevTools-powered performance insights and trace recording |
 | **Reliable Automation** | Puppeteer-based with automatic waiting for action results |
 | **Works with All MCP Clients** | Claude, Cursor, Copilot, Gemini CLI, VS Code, Windsurf, and more |
 
+### Token Efficiency
+
+WebMCP tools are dramatically more efficient than screenshot-based workflows:
+
+![Token usage comparison: WebMCP tools vs screenshots](https://raw.githubusercontent.com/WebMCP-org/chrome-devtools-quickstart/main/assets/benchmark.png)
+
+| Task | Screenshot-Based | WebMCP Tools | Savings |
+|------|-----------------|--------------|---------|
+| Simple task (set counter) | 3,801 tokens | 433 tokens | **89% fewer tokens** |
+| Complex task (calendar event) | 11,390 tokens | 2,583 tokens | **77% fewer tokens** |
+
+Screenshots are expensive (~2,000 tokens each). WebMCP tool responses are compact JSON (20-100 tokens typically).
+
+> **Try it yourself:** Clone the [Chrome DevTools Quickstart](https://github.com/WebMCP-org/chrome-devtools-quickstart) and run the benchmarks.
+
 ## What's Different from Chrome DevTools MCP?
 
 This fork adds **WebMCP integration** - the ability to call MCP tools that are registered directly on webpages. This unlocks a powerful new workflow:
@@ -41,34 +56,15 @@ This fork adds **WebMCP integration** - the ability to call MCP tools that are r
 | **List website MCP tools** | ❌ | ✅ |
 | **AI-driven tool development** | ❌ | ✅ |
 
-The key addition is the `list_webmcp_tools` and `call_webmcp_tool` tools that let your AI agent interact with MCP tools that websites expose via [@mcp-b/global](https://www.npmjs.com/package/@mcp-b/global).
+The key addition is automatic WebMCP tool discovery and registration. When you visit a page with [@mcp-b/global](https://www.npmjs.com/package/@mcp-b/global), its tools are automatically registered as first-class MCP tools that your AI agent can call directly.
 
 ## AI-Driven Development Workflow
 
 One of the most powerful use cases for this package is **AI-driven tool development** - essentially test-driven development for AI agents. Here's how it works:
 
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│                    AI Development Feedback Loop                     │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│   1. AI writes WebMCP tool code ──────────────────────────┐        │
-│                                                            │        │
-│   2. Dev server hot-reloads ◄─────────────────────────────┘        │
-│                                                                     │
-│   3. AI opens browser via Chrome DevTools MCP                       │
-│            │                                                        │
-│            ▼                                                        │
-│   4. AI calls list_webmcp_tools to see the new tool                 │
-│            │                                                        │
-│            ▼                                                        │
-│   5. AI calls call_webmcp_tool to test it                           │
-│            │                                                        │
-│            ▼                                                        │
-│   6. AI sees results, iterates if needed ───────► Back to step 1    │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
+![WebMCP: AI-Driven Development Workflow](https://raw.githubusercontent.com/WebMCP-org/chrome-devtools-quickstart/main/assets/image.png)
+
+> **Want to try it yourself?** Check out the [Chrome DevTools Quickstart](https://github.com/WebMCP-org/chrome-devtools-quickstart) - a minimal example you can clone and run in 3 steps.
 
 ### Example: Building a Search Tool
 
@@ -127,13 +123,19 @@ The AI can see the actual response, fix any bugs, and repeat until it works perf
 This creates a tight feedback loop where your AI assistant can:
 - **Write** WebMCP tools in your codebase
 - **Deploy** them automatically via hot-reload
-- **Discover** them through `list_webmcp_tools`
-- **Test** them through `call_webmcp_tool`
+- **Discover** them through `diff_webmcp_tools`
+- **Test** them by calling tools directly by their prefixed names (e.g., `webmcp_localhost_3000_page0_search_products`)
 - **Debug** issues using console messages and snapshots
 - **Iterate** until the tool works correctly
 
 This is like **TDD for AI** - the AI can build and verify its own tools in real-time.
 
+### Demo: Tool Execution Result
+
+Here's what it looks like when an AI agent successfully discovers and calls WebMCP tools:
+
+![Demo: AI agent executing WebMCP tools](https://raw.githubusercontent.com/WebMCP-org/chrome-devtools-quickstart/main/assets/demo-result.png)
+
 ## [Tool reference](./docs/tool-reference.md) | [Changelog](./CHANGELOG.md) | [Contributing](./CONTRIBUTING.md) | [Troubleshooting](./docs/troubleshooting.md) | [Design Principles](./docs/design-principles.md)
 
 ## Key features
@@ -165,6 +167,8 @@ MCP clients.
 
 ## Getting started
 
+> **New to WebMCP?** Try the [Chrome DevTools Quickstart](https://github.com/WebMCP-org/chrome-devtools-quickstart) - clone, run, and see AI-driven tool development in action in under 5 minutes.
+
 Add the following config to your MCP client:
 
 ```json
@@ -471,9 +475,8 @@ If you run into any issues, checkout our [troubleshooting guide](./docs/troubles
   - [`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)
-- **Website MCP Tools** (2 tools)
-  - [`list_webmcp_tools`](docs/tool-reference.md#list_webmcp_tools) - List available website tools (auto-connects)
-  - [`call_webmcp_tool`](docs/tool-reference.md#call_webmcp_tool) - Call a website tool (auto-connects)
+- **Website MCP Tools** (1 tool)
+  - [`diff_webmcp_tools`](docs/tool-reference.md#diff_webmcp_tools) - List available website tools across all pages (with diff)
 
 <!-- END AUTO GENERATED TOOLS -->
 
@@ -670,6 +673,14 @@ all instances of `@mcp-b/chrome-devtools-mcp`. Set the `isolated` option to `tru
 to use a temporary user data dir instead which will be cleared automatically after
 the browser is closed.
 
+> [!NOTE]
+> When using a shared user data directory (non-isolated), the server launches
+> Chrome with a local remote debugging port (`--remote-debugging-port=0` and
+> `--remote-debugging-address=127.0.0.1`) so it can auto-connect on future runs.
+> This means any local process can attach to that port. If you prefer pipe-only
+> mode, pass `--chrome-arg=--remote-debugging-pipe` (auto-connect across runs
+> will be disabled).
+
 ### Connecting to a running Chrome instance
 
 You can connect to a running Chrome instance by using the `--browser-url` option. This is useful if you want to use your existing Chrome profile or if you are running the MCP server in a sandboxed environment that does not allow starting a new Chrome instance.
@@ -803,20 +814,42 @@ Navigate to https://example.com/app
 What tools are available on this website?
 ```
 
-The AI agent will use `list_webmcp_tools` to show you what functionality the
+The AI agent will use `diff_webmcp_tools` to show you what functionality the
 website exposes. This automatically connects to the page's WebMCP server.
 
-**3. Use the tools**
+**3. Use the tools directly**
 
 ```
 Search for "wireless headphones" using the website's search tool
 ```
 
-The AI agent will use `call_webmcp_tool` to invoke the website's functionality.
+The AI agent will call the tool directly by its prefixed name (e.g., `webmcp_example_com_page0_search_products`).
+WebMCP tools are registered as first-class MCP tools, so they appear directly in your agent's tool list.
 
 That's it! No explicit connect or disconnect steps needed - WebMCP tools
-auto-connect when called and automatically reconnect when you navigate to
-a different page.
+auto-connect when detected and automatically update when you navigate.
+
+### Dynamic Tool Registration
+
+By default, WebMCP tools are automatically registered as first-class MCP tools when detected on a webpage. This means tools like `search_products` appear directly in your MCP client's tool list with prefixed names like `webmcp_localhost_3000_page0_search_products`.
+
+**MCP Client Compatibility:**
+
+| Client | Dynamic Tool Updates | Notes |
+|--------|---------------------|-------|
+| Claude Code | Yes | Full support for `tools/list_changed` |
+| GitHub Copilot | Yes | Supports list changed notifications |
+| Gemini CLI | Yes | Recently added support |
+| Cursor | No | Use `diff_webmcp_tools` to poll manually |
+| Cline | Partial | May need manual polling with `diff_webmcp_tools` |
+| Continue | Unknown | Use `diff_webmcp_tools` if tools don't appear |
+
+**For clients without dynamic tool support:**
+
+If your MCP client doesn't support `tools/list_changed` notifications, use `diff_webmcp_tools` to manually see which tools are available, then call them directly by their prefixed names. The `diff_webmcp_tools` tool is diff-aware to reduce context pollution:
+- First call returns the full tool list
+- Subsequent calls return only added/removed tools
+- Use `full: true` to force the complete list
 
 ### Example prompts
 
@@ -839,9 +872,9 @@ Call the website's form submission tool to fill out the contact form
 - **"WebMCP not detected"**: The current webpage doesn't have `@mcp-b/global`
   installed or no tools are registered. The page needs the WebMCP polyfill loaded.
 - **Tool call fails**: Check the tool's input schema matches your parameters.
-  Use `list_webmcp_tools` to see the expected input format.
+  Use `diff_webmcp_tools` to see the expected input format.
 - **Tools not appearing after navigation**: WebMCP auto-reconnects when you
-  navigate. If the new page has different tools, call `list_webmcp_tools` again.
+  navigate. If the new page has different tools, call `diff_webmcp_tools` again.
 
 ## Related Packages
 

package/build/src/McpContext.js

@@ -8,6 +8,7 @@ import os from 'node:os';
 import path from 'node:path';
 import { Client } from '@modelcontextprotocol/sdk/client/index.js';
 import { extractUrlLikeFromDevToolsTitle, urlsEqual } from './DevtoolsUtils.js';
+import { ToolListChangedNotificationSchema } from './third_party/index.js';
 import { NetworkCollector, ConsoleCollector } from './PageCollector.js';
 import { WEB_MCP_BRIDGE_SCRIPT, CHECK_WEBMCP_AVAILABLE_SCRIPT } from './transports/WebMCPBridgeScript.js';
 import { WebMCPClientTransport } from './transports/WebMCPClientTransport.js';
@@ -16,8 +17,16 @@ import { listPages } from './tools/pages.js';
 import { takeSnapshot } from './tools/snapshot.js';
 import { CLOSE_PAGE_ERROR } from './tools/ToolDefinition.js';
 import { WaitForHelper } from './WaitForHelper.js';
+/** Default timeout for page operations in milliseconds. */
 const DEFAULT_TIMEOUT = 5_000;
+/** Default timeout for navigation operations in milliseconds. */
 const NAVIGATION_TIMEOUT = 10_000;
+/**
+ * Get the timeout multiplier for a given network condition.
+ *
+ * @param condition - The network condition name (e.g., "Fast 4G", "Slow 3G").
+ * @returns Multiplier to apply to timeouts (1 = no slowdown, 10 = max slowdown).
+ */
 function getNetworkMultiplierFromString(condition) {
     const puppeteerCondition = condition;
     switch (puppeteerCondition) {
@@ -32,6 +41,13 @@ function getNetworkMultiplierFromString(condition) {
     }
     return 1;
 }
+/**
+ * Get the file extension for a given MIME type.
+ *
+ * @param mimeType - The MIME type (e.g., "image/png").
+ * @returns The corresponding file extension without the dot.
+ * @throws Error if the MIME type is not supported.
+ */
 function getExtensionFromMimeType(mimeType) {
     switch (mimeType) {
         case 'image/png':
@@ -43,14 +59,23 @@ function getExtensionFromMimeType(mimeType) {
     }
     throw new Error(`No mapping for Mime type ${mimeType}.`);
 }
+/**
+ * Central context for MCP operations on a browser instance.
+ *
+ * Manages page state, accessibility snapshots, network/console collection,
+ * WebMCP connections, and tool registration. This class serves as the primary
+ * interface between MCP tools and the browser.
+ */
 export class McpContext {
     browser;
     logger;
-    // The most recent page state.
+    /** Cached list of available pages (refreshed by createPagesSnapshot). */
     #pages = [];
+    /** Mapping of content pages to their associated DevTools inspector pages. */
     #pageToDevToolsPage = new Map();
+    /** Currently selected page for tool operations. */
     #selectedPage;
-    // The most recent snapshot.
+    /** Most recent accessibility snapshot of the selected page. */
     #textSnapshot = null;
     #networkCollector;
     #consoleCollector;
@@ -64,6 +89,9 @@ export class McpContext {
     #locatorClass;
     #options;
     #webMCPConnections = new WeakMap();
+    #toolHub;
+    /** Tracks pages that have WebMCP auto-detection listeners installed. */
+    #pagesWithWebMCPListeners = new WeakSet();
     constructor(browser, logger, options, locatorClass) {
         this.browser = browser;
         this.logger = logger;
@@ -141,9 +169,122 @@ export class McpContext {
         this.#networkCollector.dispose();
         this.#consoleCollector.dispose();
     }
-    static async from(browser, logger, opts, 
-    /* Let tests use unbundled Locator class to avoid overly strict checks within puppeteer that fail when mixing bundled and unbundled class instances */
-    locatorClass = Locator) {
+    /**
+     * Set the WebMCPToolHub for dynamic tool registration.
+     * This enables automatic registration of WebMCP tools as native MCP tools.
+     * Also sets up auto-detection for all existing pages.
+     */
+    setToolHub(hub) {
+        this.#toolHub = hub;
+        // Trigger auto-detection for all existing pages asynchronously
+        this.#setupWebMCPAutoDetectionForAllPages().catch(err => {
+            this.logger('Error setting up WebMCP auto-detection:', err);
+        });
+    }
+    /**
+     * Get the WebMCPToolHub instance (for testing purposes)
+     */
+    getToolHub() {
+        return this.#toolHub;
+    }
+    /**
+     * Set up automatic WebMCP detection for a page.
+     * This installs listeners that detect WebMCP after navigation and sync tools.
+     */
+    #setupWebMCPAutoDetection(page) {
+        // Skip if listeners already installed
+        if (this.#pagesWithWebMCPListeners.has(page)) {
+            return;
+        }
+        // Skip chrome:// and devtools:// pages
+        const url = page.url();
+        if (url.startsWith('chrome://') ||
+            url.startsWith('chrome-extension://') ||
+            url.startsWith('devtools://')) {
+            return;
+        }
+        this.#pagesWithWebMCPListeners.add(page);
+        // Handler for frame navigation - detect WebMCP after main frame navigates
+        const onFrameNavigated = async (frame) => {
+            // Only handle main frame navigation
+            // @ts-expect-error Frame type not exported
+            if (frame.parentFrame?.() !== null) {
+                return;
+            }
+            // Skip internal pages
+            const newUrl = page.url();
+            if (newUrl.startsWith('chrome://') ||
+                newUrl.startsWith('chrome-extension://') ||
+                newUrl.startsWith('devtools://') ||
+                newUrl === 'about:blank') {
+                return;
+            }
+            // Wait a bit for the page to initialize WebMCP
+            // The bridge script runs on DOMContentLoaded, and WebMCP may initialize after that
+            await new Promise(resolve => setTimeout(resolve, 500));
+            // Proactively check for WebMCP and sync tools
+            await this.#proactivelyDetectWebMCP(page);
+        };
+        page.on('framenavigated', onFrameNavigated);
+        // Clean up listener when page closes
+        page.once('close', () => {
+            page.off('framenavigated', onFrameNavigated);
+            this.#pagesWithWebMCPListeners.delete(page);
+        });
+        this.logger(`WebMCP auto-detection listener installed for page: ${url}`);
+    }
+    /**
+     * Proactively detect WebMCP on a page and sync tools if available.
+     * This is called after page navigation to automatically discover WebMCP tools.
+     */
+    async #proactivelyDetectWebMCP(page) {
+        // Skip if tool hub is not enabled
+        if (!this.#toolHub?.isEnabled()) {
+            return;
+        }
+        try {
+            // Check if WebMCP is available on the page
+            const hasWebMCP = await this.#checkWebMCPAvailable(page);
+            if (!hasWebMCP) {
+                this.logger(`No WebMCP detected on page: ${page.url()}`);
+                return;
+            }
+            this.logger(`WebMCP detected on page: ${page.url()}, connecting...`);
+            // Connect and sync tools - this handles everything including sending list_changed
+            const result = await this.getWebMCPClient(page);
+            if (result.connected) {
+                this.logger(`WebMCP tools synced for page: ${page.url()}`);
+            }
+            else {
+                this.logger(`Failed to connect to WebMCP: ${result.error}`);
+            }
+        }
+        catch (err) {
+            this.logger('Error during proactive WebMCP detection:', err);
+        }
+    }
+    /**
+     * Set up WebMCP auto-detection for all current pages.
+     * Called during initialization and when tool hub is set.
+     */
+    async #setupWebMCPAutoDetectionForAllPages() {
+        for (const page of this.#pages) {
+            this.#setupWebMCPAutoDetection(page);
+            // Also do an initial check for existing pages
+            await this.#proactivelyDetectWebMCP(page);
+        }
+    }
+    /**
+     * Create a new McpContext instance.
+     *
+     * @param browser - Puppeteer browser instance to operate on.
+     * @param logger - Debug logger for internal operations.
+     * @param opts - Configuration options.
+     * @param locatorClass - Locator class to use (injectable for testing with
+     *   unbundled Puppeteer to avoid class instance mismatch errors).
+     * @returns Initialized McpContext ready for use.
+     */
+    static async from(browser, logger, opts, locatorClass = Locator) {
         const context = new McpContext(browser, logger, opts, locatorClass);
         await context.#init();
         return context;
@@ -164,6 +305,14 @@ export class McpContext {
         }
         return this.#networkCollector.getIdForResource(request);
     }
+    /**
+     * Resolve a CDP backend node ID to a snapshot element UID.
+     *
+     * @param cdpBackendNodeId - The CDP backend node ID from DevTools.
+     * @returns The corresponding snapshot UID, or undefined if not found.
+     *
+     * @todo Optimize with a backendNodeId index instead of tree traversal.
+     */
     resolveCdpElementId(cdpBackendNodeId) {
         if (!cdpBackendNodeId) {
             this.logger('no cdpBackendNodeId');
@@ -173,7 +322,6 @@ export class McpContext {
             this.logger('no text snapshot');
             return;
         }
-        // TODO: index by backendNodeId instead.
         const queue = [this.#textSnapshot.root];
         while (queue.length) {
             const current = queue.pop();
@@ -206,6 +354,8 @@ export class McpContext {
         this.selectPage(page);
         this.#networkCollector.addPage(page);
         this.#consoleCollector.addPage(page);
+        // Set up WebMCP auto-detection for the new page
+        this.#setupWebMCPAutoDetection(page);
         return page;
     }
     async closePage(pageIdx) {
@@ -352,8 +502,21 @@ export class McpContext {
             this.selectPage(this.#pages[0]);
         }
         await this.detectOpenDevToolsWindows();
+        // Set up WebMCP auto-detection for any new pages
+        // (safe to call for existing pages - it checks if listeners are already installed)
+        for (const page of this.#pages) {
+            this.#setupWebMCPAutoDetection(page);
+        }
         return this.#pages;
     }
+    /**
+     * Detect and map open DevTools windows to their inspected pages.
+     *
+     * Iterates through all browser pages to find DevTools windows and
+     * associates them with the pages they're inspecting.
+     *
+     * @todo Optimize page lookup with a URL-indexed map instead of nested loops.
+     */
     async detectOpenDevToolsWindows() {
         this.logger('Detecting open DevTools windows');
         const pages = await this.browser.pages(this.#options.experimentalIncludeAllPages);
@@ -371,7 +534,6 @@ export class McpContext {
                     if (!urlLike) {
                         continue;
                     }
-                    // TODO: lookup without a loop.
                     for (const page of this.#pages) {
                         if (urlsEqual(page.url(), urlLike)) {
                             this.#pageToDevToolsPage.set(page, devToolsPage);
@@ -574,10 +736,36 @@ export class McpContext {
                 if (currentConn?.client === client) {
                     this.#webMCPConnections.delete(targetPage);
                 }
+                // Remove tools for this page when transport closes
+                this.#toolHub?.removeToolsForPage(targetPage);
             };
+            // Also listen for page close events to trigger cleanup
+            // This handles cases where the page is closed without navigation
+            const onPageClose = () => {
+                const currentConn = this.#webMCPConnections.get(targetPage);
+                if (currentConn?.client === client) {
+                    this.#webMCPConnections.delete(targetPage);
+                }
+                this.#toolHub?.removeToolsForPage(targetPage);
+                // Clean up the listener
+                targetPage.off('close', onPageClose);
+            };
+            targetPage.on('close', onPageClose);
             await client.connect(transport);
             // Store connection for this page
             this.#webMCPConnections.set(targetPage, { client, transport, page: targetPage });
+            // Subscribe to tool list changes if tool hub is enabled and server supports it
+            const serverCapabilities = client.getServerCapabilities();
+            if (serverCapabilities?.tools?.listChanged && this.#toolHub?.isEnabled()) {
+                client.setNotificationHandler(ToolListChangedNotificationSchema, async () => {
+                    this.logger('WebMCP tools changed, re-syncing...');
+                    await this.#toolHub?.syncToolsForPage(targetPage, client);
+                });
+            }
+            // Initial tool sync if tool hub is enabled
+            if (this.#toolHub?.isEnabled()) {
+                await this.#toolHub.syncToolsForPage(targetPage, client);
+            }
             return { connected: true, client };
         }
         catch (err) {

package/build/src/PageCollector.js

@@ -43,18 +43,28 @@ export class PageCollector {
         this.#browser.off('targetdestroyed', this.#onTargetDestroyed);
     }
     #onTargetCreated = async (target) => {
-        const page = await target.page();
-        if (!page) {
-            return;
+        try {
+            const page = await target.page();
+            if (!page) {
+                return;
+            }
+            this.addPage(page);
+        }
+        catch (err) {
+            logger('Error getting a page for a target onTargetCreated', err);
         }
-        this.addPage(page);
     };
     #onTargetDestroyed = async (target) => {
-        const page = await target.page();
-        if (!page) {
-            return;
+        try {
+            const page = await target.page();
+            if (!page) {
+                return;
+            }
+            this.cleanupPageDestroyed(page);
+        }
+        catch (err) {
+            logger('Error getting a page for a target onTargetDestroyed', err);
         }
-        this.cleanupPageDestroyed(page);
     };
     addPage(page) {
         this.#initializePage(page);