MCP Browser Debugger

Instructions

Implementation Reference

• src/browserTools.ts:88-109 (handler)

  Handler function that implements the core logic of the 'get_dom' tool: fetches page HTML, optionally prettifies it, and returns as MCP ToolResponse.

  export async function handleGetDom(args: unknown, currentPage: Page): Promise<ToolResponse> {
    const typedArgs = args as unknown as GetDomArgs;
    const { prettify = true } = typedArgs;
  
    let html = await currentPage.content();
  
    if (prettify) {
      html = await currentPage.evaluate(() => {
        const div = document.createElement('div');
        div.innerHTML = document.documentElement.outerHTML;
        return div.innerHTML;
      });
    }
  
    return {
      content: [
        {
          type: 'text',
          text: html,
        },
      ],
    };

• src/types.ts:34-36 (schema)

  TypeScript interface defining the input schema for get_dom tool arguments.

  export interface GetDomArgs {
    prettify?: boolean;
  }

• src/tools.ts:27-40 (registration)

  Tool registration entry in the tools array, including name, description, and JSON schema for input validation used by MCP listTools.

  {
    name: 'get_dom',
    description: 'Extrai o HTML completo do DOM atual da página',
    inputSchema: {
      type: 'object',
      properties: {
        prettify: {
          type: 'boolean',
          description: 'Se true, formata o HTML de forma legível',
          default: true,
        },
      },
    },
  },

• src/index.ts:71-74 (registration)

  Dispatch case in the main tool call handler that routes 'get_dom' calls to the handleGetDom function.

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