docs: switch remote debugging example to MCP SDK

Author: root

examples/remote-debugging-9222.mjs

@@ -1,4 +1,5 @@
-// Example: connect to a Chrome instance that was started with a remote debugging port.
+// Example: connect to a Chrome instance that was started with a remote debugging port,
+// using the official MCP TypeScript SDK.
 //
 // 1) Start Chrome manually with remote debugging enabled, e.g.:
 //    macOS:
@@ -9,59 +10,40 @@
 // 2) Run this script:
 //      node examples/remote-debugging-9222.mjs
 //
-// This spawns the MCP server and connects it to http://127.0.0.1:9222 via --browserUrl.
+// This starts chrome-devtools-mcp with --browserUrl and connects through MCP stdio.
 //
-// Note: This is intentionally a small template you can adapt for your own MCP client.
+// For SDK details, see:
+// https://modelcontextprotocol.io/docs/develop/build-client#typescript
 
-import { spawn } from 'node:child_process';
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
 
 const DEBUG_URL = process.env.CHROME_DEBUG_URL ?? 'http://127.0.0.1:9222';
 
-const child = spawn(
-  'npx',
-  ['--yes', 'chrome-devtools-mcp@latest', '--browserUrl', DEBUG_URL],
-  {
-    stdio: ['pipe', 'pipe', 'pipe'],
-    env: {
-      ...process.env,
-      CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS: 'true',
-    },
+const transport = new StdioClientTransport({
+  command: 'npx',
+  args: ['--yes', 'chrome-devtools-mcp@latest', '--browserUrl', DEBUG_URL],
+  env: {
+    ...process.env,
+    CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS: 'true',
   },
+  stderr: 'inherit',
+});
+
+const client = new Client(
+  { name: 'remote-debugging-9222', version: '0.0.0' },
+  { capabilities: {} },
 );
 
-child.stderr.on('data', (d) => process.stderr.write(d));
+try {
+  await client.connect(transport);
 
-let buf = '';
-child.stdout.on('data', (d) => {
-  buf += d.toString('utf8');
-  let idx;
-  while ((idx = buf.indexOf('\n')) !== -1) {
-    const line = buf.slice(0, idx).trim();
-    buf = buf.slice(idx + 1);
-    if (!line) continue;
-    try {
-      const msg = JSON.parse(line);
-      console.log('←', msg);
-      // Exit after initialize.
-      if (msg.id === 1) {
-        child.kill();
-        process.exit(0);
-      }
-    } catch {
-      // ignore non-JSON lines
-    }
-  }
-});
+  const { tools } = await client.listTools();
+  console.log(`Connected to ${DEBUG_URL}. Found ${tools.length} tools.`);
 
-const init = {
-  jsonrpc: '2.0',
-  id: 1,
-  method: 'initialize',
-  params: {
-    protocolVersion: '2024-11-05',
-    capabilities: {},
-    clientInfo: { name: 'remote-debugging-9222', version: '0.0.0' },
-  },
-};
-
-child.stdin.write(JSON.stringify(init) + '\n');
+  for (const tool of tools.slice(0, 10)) {
+    console.log(`- ${tool.name}`);
+  }
+} finally {
+  await transport.close();
+}