MCP Browser Debugger

Instructions

Implementation Reference

• src/browserTools.ts:115-183 (handler)

  The handler function that executes the get_element tool: queries the DOM for the selector, extracts tag, HTML, text, attributes, computed styles, and bounding box using page.evaluate, returns JSON or error.

  export async function handleGetElement(args: unknown, currentPage: Page): Promise<ToolResponse> {
    const typedArgs = args as unknown as GetElementArgs;
    const { selector, includeStyles = true, includeAttributes = true } = typedArgs;
  
    const elementInfo = await currentPage.evaluate(
      (sel: string, incStyles: boolean, incAttrs: boolean): ElementInfo | null => {
        const element = document.querySelector(sel);
        if (!element) return null;
  
        const info: ElementInfo = {
          tagName: element.tagName,
          innerHTML: element.innerHTML,
          outerHTML: element.outerHTML,
          textContent: element.textContent || '',
          boundingBox: { x: 0, y: 0, width: 0, height: 0 },
        };
  
        if (incAttrs) {
          info.attributes = {};
          for (let i = 0; i < element.attributes.length; i++) {
            const attr = element.attributes[i];
            info.attributes[attr.name] = attr.value;
          }
        }
  
        if (incStyles) {
          const styles = window.getComputedStyle(element);
          info.computedStyles = {};
          for (let i = 0; i < styles.length; i++) {
            const prop = styles[i];
            info.computedStyles[prop] = styles.getPropertyValue(prop);
          }
        }
  
        const rect = element.getBoundingClientRect();
        info.boundingBox = {
          x: rect.x,
          y: rect.y,
          width: rect.width,
          height: rect.height,
        };
  
        return info;
      },
      selector,
      includeStyles,
      includeAttributes
    );
  
    if (!elementInfo) {
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify({ error: `Elemento não encontrado: ${selector}` }, null, 2),
          },
        ],
      };
    }
  
    return {
      content: [
        {
          type: 'text',
          text: JSON.stringify(elementInfo, null, 2),
        },
      ],
    };
  }

• src/types.ts:38-42 (schema)

  TypeScript interface defining the input parameters for the get_element tool.

  export interface GetElementArgs {
    selector: string;
    includeStyles?: boolean;
    includeAttributes?: boolean;
  }

• src/tools.ts:42-63 (registration)

  MCP tool definition and input schema registration for get_element in the tools array.

  name: 'get_element',
  description: 'Inspeciona um elemento específico usando seletor CSS',
  inputSchema: {
    type: 'object',
    properties: {
      selector: {
        type: 'string',
        description: "Seletor CSS do elemento (ex: '#id', '.class', 'div.container')",
      },
      includeStyles: {
        type: 'boolean',
        description: 'Incluir estilos computados do elemento',
        default: true,
      },
      includeAttributes: {
        type: 'boolean',
        description: 'Incluir todos os atributos do elemento',
        default: true,
      },
    },
    required: ['selector'],
  },

• src/index.ts:75-77 (registration)

  Dispatch/registration in the main switch case handler for calling the get_element tool handler.

  case 'get_element': {
    const currentPage = await initBrowser();
    return await handleGetElement(args, currentPage);

• src/types.ts:90-102 (schema)

  TypeScript interface for the output structure returned by the get_element handler.

  export interface ElementInfo {
    tagName: string;
    innerHTML: string;
    outerHTML: string;
    textContent: string;
    attributes?: Record<string, string>;
    computedStyles?: Record<string, string>;
    boundingBox: {
      x: number;
      y: number;
      width: number;
      height: number;
    };