chore: experimental devtools

Author: OrKoN

src/McpContext.ts

@@ -89,8 +89,16 @@ export class McpContext implements Context {
 
   #nextSnapshotId = 1;
   #traceResults: TraceResult[] = [];
-
-  private constructor(browser: Browser, logger: Debugger) {
+  #devtools = false;
+
+  private constructor(
+    browser: Browser,
+    logger: Debugger,
+    options: {
+      devtools: boolean;
+    },
+  ) {
+    this.#devtools = options.devtools;
     this.browser = browser;
     this.logger = logger;
 
@@ -123,8 +131,14 @@ export class McpContext implements Context {
     await this.#consoleCollector.init();
   }
 
-  static async from(browser: Browser, logger: Debugger) {
-    const context = new McpContext(browser, logger);
+  static async from(
+    browser: Browser,
+    logger: Debugger,
+    options: {
+      devtools: boolean;
+    },
+  ) {
+    const context = new McpContext(browser, logger, options);
     await context.#init();
     return context;
   }
@@ -302,6 +316,16 @@ export class McpContext implements Context {
    */
   async createPagesSnapshot(): Promise<Page[]> {
     this.#pages = await this.browser.pages();
+    if (this.#devtools) {
+      for (const target of this.browser.targets()) {
+        if (
+          target.type() === 'other' &&
+          target.url().startsWith('devtools://')
+        ) {
+          this.#pages.push(await target.asPage());
+        }
+      }
+    }
     return this.#pages;
   }
 

src/browser.ts

@@ -11,44 +11,46 @@ 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,
   });
   return browser;
@@ -68,7 +70,8 @@ interface McpLaunchOptions {
     height: number;
   };
   args?: string[];
-}
+  devtools: boolean;
+};
 
 export async function launch(options: McpLaunchOptions): Promise<Browser> {
   const {channel, executablePath, customDevTools, headless, isolated} = options;
@@ -101,6 +104,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,8 +116,8 @@ 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,

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,10 +89,13 @@ async function getContext(): Promise<McpContext> {
         viewport: args.viewport,
         args: extraArgs,
         acceptInsecureCerts: args.acceptInsecureCerts,
+        devtools,
       });
 
   if (context?.browser !== browser) {
-    context = await McpContext.from(browser, logger);
+    context = await McpContext.from(browser, logger, {
+      devtools,
+    });
   }
   return context;
 }

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();

tests/utils.ts

@@ -35,7 +35,9 @@ export async function withBrowser(
     }),
   );
   const response = new McpResponse();
-  const context = await McpContext.from(browser, logger('test'));
+  const context = await McpContext.from(browser, logger('test'), {
+    devtools: false,
+  });
 
   await cb(response, context);
 }