MCP Browser Debugger

Instructions

Implementation Reference

• src/browserTools.ts:328-390 (handler)

  Main handler function that implements the get_page_source tool by evaluating the page to extract HTML, scripts, styles, and links.

  export async function handleGetPageSource(args: unknown, currentPage: Page): Promise<ToolResponse> {
    const typedArgs = args as unknown as GetPageSourceArgs;
    const { includeScripts = true, includeStyles = true } = typedArgs;
  
    const sources = await currentPage.evaluate(
      (incScripts: boolean, incStyles: boolean): PageSource => {
        const result: PageSource = {
          html: document.documentElement.outerHTML,
          scripts: [],
          styles: [],
          links: [],
        };
  
        if (incScripts) {
          document.querySelectorAll('script').forEach((script) => {
            result.scripts.push({
              src: script.src || null,
              inline: !script.src,
              content: script.src ? null : script.textContent,
              type: script.type || 'text/javascript',
            });
          });
        }
  
        if (incStyles) {
          document.querySelectorAll('style').forEach((style) => {
            result.styles.push({
              inline: true,
              content: style.textContent || '',
            });
          });
  
          document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
            result.styles.push({
              inline: false,
              href: (link as HTMLLinkElement).href,
            });
          });
        }
  
        document.querySelectorAll('link').forEach((link) => {
          result.links.push({
            rel: link.rel,
            href: link.href,
            type: link.type,
          });
        });
  
        return result;
      },
      includeScripts,
      includeStyles
    );
  
    return {
      content: [
        {
          type: 'text',
          text: JSON.stringify(sources, null, 2),
        },
      ],
    };
  }

• src/tools.ts:146-164 (schema)

  MCP tool schema definition including input schema for get_page_source.

  {
    name: 'get_page_source',
    description: 'Extrai todo o código fonte da página incluindo scripts, styles e recursos',
    inputSchema: {
      type: 'object',
      properties: {
        includeScripts: {
          type: 'boolean',
          description: 'Incluir conteúdo de todos os scripts',
          default: true,
        },
        includeStyles: {
          type: 'boolean',
          description: 'Incluir conteúdo de todos os estilos',
          default: true,
        },
      },
    },
  },

• src/index.ts:91-94 (registration)

  Runtime dispatch/registration in the main server handler switch statement.

  case 'get_page_source': {
    const currentPage = await initBrowser();
    return await handleGetPageSource(args, currentPage);
  }

• src/types.ts:65-68 (schema)

  TypeScript interface defining input arguments for the handler.

  export interface GetPageSourceArgs {
    includeScripts?: boolean;
    includeStyles?: boolean;
  }

• src/types.ts:130-148 (schema)

  TypeScript interface defining the output structure returned by the handler.

  export interface PageSource {
    html: string;
    scripts: Array<{
      src: string | null;
      inline: boolean;
      content: string | null;
      type: string;
    }>;
    styles: Array<{
      inline: boolean;
      content?: string;
      href?: string;
    }>;
    links: Array<{
      rel: string;
      href: string;
      type: string;
    }>;
  }