Merge branch 'main' into feature/extension-debugging

Author: Tasktivity

README.md

@@ -241,6 +241,25 @@ Or, from the IDE **Activity Bar** > `Kiro` > `MCP Servers` > `Click Open MCP Con
 
 </details>
 
+<details>
+  <summary>OpenCode</summary>
+
+Add the following configuration to your `opencode.json` file. If you don't have one, create it at `~/.config/opencode/opencode.json` (<a href="https://opencode.ai/docs/mcp-servers">guide</a>):
+
+```json
+{
+  "$schema": "https://opencode.ai/config.json",
+  "mcp": {
+    "chrome-devtools": {
+      "type": "local",
+      "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
+    }
+  }
+}
+```
+
+</details>
+
 <details>
   <summary>Qoder</summary>
 

docs/tool-reference.md

@@ -131,7 +131,7 @@
 
 **Parameters:**
 
-- **pageIdx** (number) **(required)**: The index of the page to close. Call [`list_pages`](#list_pages) to list pages.
+- **pageId** (number) **(required)**: The ID of the page to close. Call [`list_pages`](#list_pages) to list pages.
 
 ---
 
@@ -173,7 +173,7 @@
 
 **Parameters:**
 
-- **pageIdx** (number) **(required)**: The index of the page to select. Call [`list_pages`](#list_pages) to get available pages.
+- **pageId** (number) **(required)**: The ID of the page to select. Call [`list_pages`](#list_pages) to get available pages.
 - **bringToFront** (boolean) _(optional)_: Whether to focus the page and bring it to the top.
 
 ---

package-lock.json

@@ -41,7 +41,7 @@
   "mcpName": "io.github.ChromeDevTools/chrome-devtools-mcp",
   "devDependencies": {
     "@eslint/js": "^9.35.0",
-    "@modelcontextprotocol/sdk": "1.24.3",
+    "@modelcontextprotocol/sdk": "1.25.2",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -53,16 +53,16 @@
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
-    "chrome-devtools-frontend": "1.0.1555430",
+    "chrome-devtools-frontend": "1.0.1565595",
     "core-js": "3.47.0",
     "debug": "4.4.3",
     "eslint": "^9.35.0",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "globals": "^17.0.0",
     "prettier": "^3.6.2",
-    "puppeteer": "24.33.0",
-    "rollup": "4.54.0",
+    "puppeteer": "24.34.0",
+    "rollup": "4.55.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-license": "^3.6.0",
     "sinon": "^21.0.0",

package.json

@@ -7,8 +7,6 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 
-import {sed} from './sed.ts';
-
 const BUILD_DIR = path.join(process.cwd(), 'build');
 
 /**
@@ -73,21 +71,6 @@ export const experiments = {
   `;
   writeFile(runtimeFile, runtimeContent);
 
-  // Update protocol_client to remove:
-  // 1. self.Protocol assignment
-  // 2. Call to register backend commands.
-  const protocolClientDir = path.join(
-    BUILD_DIR,
-    devtoolsFrontEndCorePath,
-    'protocol_client',
-  );
-  const clientFile = path.join(protocolClientDir, 'protocol_client.js');
-  const globalAssignment = /self\.Protocol = self\.Protocol \|\| \{\};/;
-  const registerCommands =
-    /InspectorBackendCommands\.registerCommands\(InspectorBackend\.inspectorBackend\);/;
-  sed(clientFile, globalAssignment, '');
-  sed(clientFile, registerCommands, '');
-
   copyDevToolsDescriptionFiles();
 }
 

scripts/post-build.ts

@@ -126,6 +126,9 @@ export class McpContext implements Context {
   #geolocationMap = new WeakMap<Page, GeolocationOptions>();
   #dialog?: Dialog;
 
+  #pageIdMap = new WeakMap<Page, number>();
+  #nextPageId = 1;
+
   #nextSnapshotId = 1;
   #traceResults: TraceResult[] = [];
 
@@ -261,11 +264,11 @@ export class McpContext implements Context {
     this.#consoleCollector.addPage(page);
     return page;
   }
-  async closePage(pageIdx: number): Promise<void> {
+  async closePage(pageId: number): Promise<void> {
     if (this.#pages.length === 1) {
       throw new Error(CLOSE_PAGE_ERROR);
     }
-    const page = this.getPageByIdx(pageIdx);
+    const page = this.getPageById(pageId);
     await page.close({runBeforeUnload: false});
   }
 
@@ -342,15 +345,18 @@ export class McpContext implements Context {
     return page;
   }
 
-  getPageByIdx(idx: number): Page {
-    const pages = this.#pages;
-    const page = pages[idx];
+  getPageById(pageId: number): Page {
+    const page = this.#pages.find(p => this.#pageIdMap.get(p) === pageId);
     if (!page) {
       throw new Error('No page found');
     }
     return page;
   }
 
+  getPageId(page: Page): number | undefined {
+    return this.#pageIdMap.get(page);
+  }
+
   #dialogHandler = (dialog: Dialog): void => {
     this.#dialog = dialog;
   };
@@ -432,6 +438,12 @@ export class McpContext implements Context {
       this.#options.experimentalIncludeAllPages,
     );
 
+    for (const page of allPages) {
+      if (!this.#pageIdMap.has(page)) {
+        this.#pageIdMap.set(page, this.#nextPageId++);
+      }
+    }
+
     this.#pages = allPages.filter(page => {
       // If we allow debugging DevTools windows, return all pages.
       // If we are in regular mode, the user should only see non-DevTools page.

scripts/sed.ts

@@ -385,12 +385,10 @@ Call ${handleDialog.name} to handle it before continuing.`);
 
     if (this.#includePages) {
       const parts = [`## Pages`];
-      let idx = 0;
       for (const page of context.getPages()) {
         parts.push(
-          `${idx}: ${page.url()}${context.isPageSelected(page) ? ' [selected]' : ''}`,
+          `${context.getPageId(page)}: ${page.url()}${context.isPageSelected(page) ? ' [selected]' : ''}`,
         );
-        idx++;
       }
 
       // Include service workers when extension debugging is enabled

src/McpContext.ts

@@ -224,7 +224,6 @@ export async function launch(options: McpLaunchOptions): Promise<Browser> {
     }
     if (options.viewport) {
       const [page] = await browser.pages();
-      // @ts-expect-error internal API for now.
       await page?.resize({
         contentWidth: options.viewport.width,
         contentHeight: options.viewport.height,

src/McpResponse.ts

@@ -15,6 +15,7 @@ export interface ConsoleMessageData {
   count?: number;
   description?: string;
   args?: string[];
+  stackTrace?: DevTools.StackTrace.StackTrace.StackTrace;
 }
 
 // The short format for a console message, based on a previous format.
@@ -46,6 +47,7 @@ export function formatConsoleEventVerbose(
     `ID: ${msg.consoleMessageStableId}`,
     `Message: ${msg.type}> ${aggregatedIssue ? formatIssue(aggregatedIssue, msg.description, context) : msg.message}`,
     aggregatedIssue ? undefined : formatArgs(msg),
+    formatStackTrace(msg.stackTrace),
   ].filter(line => !!line);
   return result.join('\n');
 }
@@ -163,3 +165,42 @@ export function formatIssue(
   if (result.length === 0) return 'No affected resources found';
   return result.join('\n');
 }
+
+function formatStackTrace(
+  stackTrace: DevTools.StackTrace.StackTrace.StackTrace | undefined,
+): string {
+  if (!stackTrace) {
+    return '';
+  }
+
+  return [
+    '### Stack trace',
+    formatFragment(stackTrace.syncFragment),
+    ...stackTrace.asyncFragments.map(formatAsyncFragment),
+  ].join('\n');
+}
+
+function formatFragment(
+  fragment: DevTools.StackTrace.StackTrace.Fragment,
+): string {
+  return fragment.frames.map(formatFrame).join('\n');
+}
+
+function formatAsyncFragment(
+  fragment: DevTools.StackTrace.StackTrace.AsyncFragment,
+): string {
+  const separatorLineLength = 40;
+  const prefix = `--- ${fragment.description || 'async'} `;
+  const separator = prefix + '-'.repeat(separatorLineLength - prefix.length);
+  return separator + '\n' + formatFragment(fragment);
+}
+
+function formatFrame(frame: DevTools.StackTrace.StackTrace.Frame): string {
+  let result = `at ${frame.name ?? '<anonymous>'}`;
+  if (frame.uiSourceCode) {
+    result += ` (${frame.uiSourceCode.displayName()}:${frame.line}:${frame.column})`;
+  } else if (frame.url) {
+    result += ` (${frame.url}:${frame.line}:${frame.column})`;
+  }
+  return result;
+}