chore: experimental devtools-on-devtools support (#51)

Allows using the MCP server for the devtools development.

Author: OrKoN

src/browser.ts

@@ -11,45 +11,48 @@ import path from 'node:path';
 import type {
   Browser,
   ChromeReleaseChannel,
-  ConnectOptions,
   LaunchOptions,
   Target,
 } from 'puppeteer-core';
 import puppeteer from 'puppeteer-core';
 
 let browser: Browser | undefined;
 
-const ignoredPrefixes = new Set([
-  'chrome://',
-  'chrome-extension://',
-  'chrome-untrusted://',
-  'devtools://',
-]);
+function makeTargetFilter(devtools: boolean) {
+  const ignoredPrefixes = new Set([
+    'chrome://',
+    'chrome-extension://',
+    'chrome-untrusted://',
+  ]);
 
-function targetFilter(target: Target): boolean {
-  if (target.url() === 'chrome://newtab/') {
-    return true;
+  if (!devtools) {
+    ignoredPrefixes.add('devtools://');
   }
-  for (const prefix of ignoredPrefixes) {
-    if (target.url().startsWith(prefix)) {
-      return false;
+  return function targetFilter(target: Target): boolean {
+    if (target.url() === 'chrome://newtab/') {
+      return true;
     }
-  }
-  return true;
+    for (const prefix of ignoredPrefixes) {
+      if (target.url().startsWith(prefix)) {
+        return false;
+      }
+    }
+    return true;
+  };
 }
 
-const connectOptions: ConnectOptions = {
-  targetFilter,
-};
-
-export async function ensureBrowserConnected(browserURL: string) {
+export async function ensureBrowserConnected(options: {
+  browserURL: string;
+  devtools: boolean;
+}) {
   if (browser?.connected) {
     return browser;
   }
   browser = await puppeteer.connect({
-    ...connectOptions,
-    browserURL,
+    targetFilter: makeTargetFilter(options.devtools),
+    browserURL: options.browserURL,
     defaultViewport: null,
+    handleDevToolsAsPage: options.devtools,
   });
   return browser;
 }
@@ -68,6 +71,7 @@ interface McpLaunchOptions {
     height: number;
   };
   args?: string[];
+  devtools: boolean;
 }
 
 export async function launch(options: McpLaunchOptions): Promise<Browser> {
@@ -101,6 +105,9 @@ export async function launch(options: McpLaunchOptions): Promise<Browser> {
     args.push('--screen-info={3840x2160}');
   }
   let puppeteerChannel: ChromeReleaseChannel | undefined;
+  if (options.devtools) {
+    args.push('--auto-open-devtools-for-tabs');
+  }
   if (!executablePath) {
     puppeteerChannel =
       channel && channel !== 'stable'
@@ -110,15 +117,16 @@ export async function launch(options: McpLaunchOptions): Promise<Browser> {
 
   try {
     const browser = await puppeteer.launch({
-      ...connectOptions,
       channel: puppeteerChannel,
+      targetFilter: makeTargetFilter(options.devtools),
       executablePath,
       defaultViewport: null,
       userDataDir,
       pipe: true,
       headless,
       args,
       acceptInsecureCerts: options.acceptInsecureCerts,
+      handleDevToolsAsPage: options.devtools,
     });
     if (options.logFile) {
       // FIXME: we are probably subscribing too late to catch startup logs. We

src/cli.ts

@@ -88,6 +88,11 @@ export const cliOptions = {
     type: 'boolean',
     description: `If enabled, ignores errors relative to self-signed and expired certificates. Use with caution.`,
   },
+  experimentalDevtools: {
+    type: 'boolean' as const,
+    describe: 'Whether to enable automation over DevTools targets',
+    hidden: true,
+  },
 } satisfies Record<string, YargsOptions>;
 
 export function parseArguments(version: string, argv = process.argv) {

src/main.ts

@@ -73,8 +73,12 @@ async function getContext(): Promise<McpContext> {
   if (args.proxyServer) {
     extraArgs.push(`--proxy-server=${args.proxyServer}`);
   }
+  const devtools = args.experimentalDevtools ?? false;
   const browser = args.browserUrl
-    ? await ensureBrowserConnected(args.browserUrl)
+    ? await ensureBrowserConnected({
+        browserURL: args.browserUrl,
+        devtools,
+      })
     : await ensureBrowserLaunched({
         headless: args.headless,
         executablePath: args.executablePath,
@@ -85,6 +89,7 @@ async function getContext(): Promise<McpContext> {
         viewport: args.viewport,
         args: extraArgs,
         acceptInsecureCerts: args.acceptInsecureCerts,
+        devtools,
       });
 
   if (context?.browser !== browser) {
@@ -143,6 +148,9 @@ function registerTool(tool: ToolDefinition): void {
             isError: true,
           };
         }
+      } catch (err) {
+        logger(`${tool.name} error: ${err.message}`);
+        throw err;
       } finally {
         guard.dispose();
       }

tests/browser.test.ts

@@ -21,6 +21,7 @@ describe('browser', () => {
       isolated: false,
       userDataDir: folderPath,
       executablePath: executablePath(),
+      devtools: false,
     });
     try {
       try {
@@ -29,6 +30,7 @@ describe('browser', () => {
           isolated: false,
           userDataDir: folderPath,
           executablePath: executablePath(),
+          devtools: false,
         });
         await browser2.close();
         assert.fail('not reached');
@@ -55,6 +57,7 @@ describe('browser', () => {
         width: 1501,
         height: 801,
       },
+      devtools: false,
     });
     try {
       const [page] = await browser.pages();