feat: get state from the open DevTools window

Author: OrKoN

src/McpContext.ts

@@ -337,12 +337,13 @@ export class McpContext implements Context {
       );
     });
 
-    await this.#detectOpenDevToolsWindows(allPages);
+    await this.detectOpenDevToolsWindows();
 
     return this.#pages;
   }
 
-  async #detectOpenDevToolsWindows(pages: Page[]) {
+  async detectOpenDevToolsWindows() {
+    const pages = await this.browser.pages();
     this.#pageToDevToolsPage = new Map<Page, Page>();
     for (const devToolsPage of pages) {
       if (devToolsPage.url().startsWith('devtools://')) {
@@ -377,6 +378,45 @@ export class McpContext implements Context {
     return this.#pageToDevToolsPage.get(page);
   }
 
+  async getDevToolsData(): Promise<undefined | {requestId?: number}> {
+    try {
+      const selectedPage = this.getSelectedPage();
+      const devtoolsPage = this.getDevToolsPage(selectedPage);
+      if (devtoolsPage) {
+        const cdpRequestId = await devtoolsPage.evaluate(async () => {
+          // @ts-expect-error no types
+          const UI = await import('/bundled/ui/legacy/legacy.js');
+          // @ts-expect-error no types
+          const SDK = await import('/bundled/core/sdk/sdk.js');
+          const request = UI.Context.Context.instance().flavor(
+            SDK.NetworkRequest.NetworkRequest,
+          );
+          return request?.requestId();
+        });
+        if (!cdpRequestId) {
+          this.logger('no context request');
+          return;
+        }
+        const request = this.#networkCollector.find(selectedPage, request => {
+          // @ts-expect-error id is internal.
+          return request.id === cdpRequestId;
+        });
+        if (!request) {
+          this.logger('no collected request for ' + cdpRequestId);
+          return;
+        }
+        return {
+          requestId: this.#networkCollector.getIdForResource(request),
+        };
+      } else {
+        this.logger('no devtools page deteched');
+      }
+    } catch (err) {
+      this.logger('error getting devtools data', err);
+    }
+    return;
+  }
+
   /**
    * Creates a text snapshot of a page.
    */

src/McpResponse.ts

@@ -51,6 +51,7 @@ export class McpResponse implements Response {
     types?: string[];
     includePreservedMessages?: boolean;
   };
+  #includeDevtoolsData = false;
 
   setIncludePages(value: boolean): void {
     this.#includePages = value;
@@ -62,6 +63,10 @@ export class McpResponse implements Response {
     };
   }
 
+  includeDevtoolsData(value: boolean): void {
+    this.#includeDevtoolsData = value;
+  }
+
   setIncludeNetworkRequests(
     value: boolean,
     options?: PaginationOptions & {
@@ -291,11 +296,17 @@ export class McpResponse implements Response {
       );
     }
 
+    let devToolsData;
+    if (this.#includeDevtoolsData) {
+      devToolsData = await context.getDevToolsData();
+    }
+
     return this.format(toolName, context, {
       bodies,
       consoleData,
       consoleListData,
       formattedSnapshot,
+      devToolsData,
     });
   }
 
@@ -310,13 +321,23 @@ export class McpResponse implements Response {
       consoleData: ConsoleMessageData | undefined;
       consoleListData: ConsoleMessageData[] | undefined;
       formattedSnapshot: string | undefined;
+      devToolsData?: {requestId?: number};
     },
   ): Array<TextContent | ImageContent> {
     const response = [`# ${toolName} response`];
     for (const line of this.#textResponseLines) {
       response.push(line);
     }
 
+    response.push('## Network requests inspected in DevTools');
+    if (data.devToolsData?.requestId) {
+      response.push(`Network request: reqid=${data.devToolsData?.requestId}`);
+    } else {
+      response.push(
+        `Nothing inspected right now. Call list_pages to check if anything is selected by the user in DevTools.`,
+      );
+    }
+
     const networkConditions = context.getNetworkConditions();
     if (networkConditions) {
       response.push(`## Network emulation`);

src/PageCollector.ts

@@ -173,6 +173,22 @@ export class PageCollector<T> {
 
     throw new Error('Request not found for selected page');
   }
+
+  find(page: Page, filter: (item: T) => boolean): T | undefined {
+    const navigations = this.storage.get(page);
+    if (!navigations) {
+      return;
+    }
+
+    for (const navigation of navigations) {
+      for (const collected of navigation) {
+        if (filter(collected)) {
+          return collected;
+        }
+      }
+    }
+    return;
+  }
 }
 
 export class NetworkCollector extends PageCollector<HTTPRequest> {

src/main.ts

@@ -21,6 +21,7 @@ import {
 } from './third_party/index.js';
 import {ToolCategory} from './tools/categories.js';
 import * as consoleTools from './tools/console.js';
+import * as devtoolsTools from './tools/devtools.js';
 import * as emulationTools from './tools/emulation.js';
 import * as inputTools from './tools/input.js';
 import * as networkTools from './tools/network.js';
@@ -129,6 +130,7 @@ function registerTool(tool: ToolDefinition): void {
       try {
         logger(`${tool.name} request: ${JSON.stringify(params, null, '  ')}`);
         const context = await getContext();
+        await context.detectOpenDevToolsWindows();
         const response = new McpResponse();
         await tool.handler(
           {
@@ -168,6 +170,7 @@ function registerTool(tool: ToolDefinition): void {
 
 const tools = [
   ...Object.values(consoleTools),
+  ...Object.values(devtoolsTools),
   ...Object.values(emulationTools),
   ...Object.values(inputTools),
   ...Object.values(networkTools),

src/tools/ToolDefinition.ts

@@ -65,6 +65,7 @@ export interface Response {
     },
   ): void;
   includeSnapshot(params?: SnapshotParams): void;
+  includeDevtoolsData(value: boolean): void;
   attachImage(value: ImageContentData): void;
   attachNetworkRequest(reqid: number): void;
   attachConsoleMessage(msgid: number): void;

src/tools/devtools.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ToolCategory} from './categories.js';
+import {defineTool} from './ToolDefinition.js';
+
+export const emulateNetwork = defineTool({
+  name: 'list_devtools_data',
+  description: `Returns data (network requests) that the user is currently inspecting in DevTools.`,
+  annotations: {
+    category: ToolCategory.DEBUGGING,
+    readOnlyHint: true,
+  },
+  schema: {},
+  handler: async (_request, response, _context) => {
+    response.includeDevtoolsData(true);
+  },
+});