get-element-styles

Retrieve computed CSS styles for specific HTML elements using CSS selectors and property names to inspect styling during development.

Instructions

Retrieves style information of a specific element

Input Schema

TableJSON Schema

Name	Required	Description	Default
`selector`	Yes	CSS selector of the element to inspect
`styleProperties`	Yes	Array of style property names to retrieve (e.g., ['color', 'fontSize', 'backgroundColor'])

Implementation Reference

src/tools/browser-tools.ts:375-441 (handler)

Handler function that validates browser context, waits implicitly via evaluate, uses document.querySelector and window.getComputedStyle to fetch specified style properties, formats response with checkpoint ID or error.

async ({ selector, styleProperties }) => {
  try {
    // Check browser status
    const browserStatus = getContextForOperation();
    if (!browserStatus.isStarted) {
      return browserStatus.error;
    }

    // Get current checkpoint ID
    const checkpointId = await getCurrentCheckpointId(browserStatus.page);

    // Retrieve element styles
    const styles = await browserStatus.page.evaluate(({ selector, stylePropsToGet }: { selector: string; stylePropsToGet: string[] }) => {
      const element = document.querySelector(selector);
      if (!element) return null;

      const computedStyle = window.getComputedStyle(element);
      const result: Record<string, string> = {};

      stylePropsToGet.forEach((prop: string) => {
        result[prop] = computedStyle.getPropertyValue(prop);
      });

      return result;
    }, { selector, stylePropsToGet: styleProperties });

    if (!styles) {
      return {
        content: [
          {
            type: 'text',
            text: `Element with selector "${selector}" not found`
          }
        ],
        isError: true
      };
    }

    // Result message construction
    const resultMessage = {
      selector,
      styles,
      checkpointId
    };

    return {
      content: [
        {
          type: 'text',
          text: JSON.stringify(resultMessage, null, 2)
        }
      ]
    };
  } catch (error) {
    const errorMessage = error instanceof Error ? error.message : String(error);
    Logger.error(`Failed to get element styles: ${errorMessage}`);
    return {
      content: [
        {
          type: 'text',
          text: `Failed to get element styles: ${errorMessage}`
        }
      ],
      isError: true
    };
  }
}

src/tools/browser-tools.ts:372-374 (schema)

Zod schema defining input parameters: selector (CSS selector string) and styleProperties (array of style property names).

  selector: z.string().describe('CSS selector of the element to inspect'),
  styleProperties: z.array(z.string()).describe("Array of style property names to retrieve (e.g., ['color', 'fontSize', 'backgroundColor'])")
},

src/tools/browser-tools.ts:368-442 (registration)

server.tool registration call for 'get-element-styles' within registerBrowserTools function, which is called from src/index.ts

server.tool(
  'get-element-styles',
  'Retrieves style information of a specific element',
  {
    selector: z.string().describe('CSS selector of the element to inspect'),
    styleProperties: z.array(z.string()).describe("Array of style property names to retrieve (e.g., ['color', 'fontSize', 'backgroundColor'])")
  },
  async ({ selector, styleProperties }) => {
    try {
      // Check browser status
      const browserStatus = getContextForOperation();
      if (!browserStatus.isStarted) {
        return browserStatus.error;
      }

      // Get current checkpoint ID
      const checkpointId = await getCurrentCheckpointId(browserStatus.page);

      // Retrieve element styles
      const styles = await browserStatus.page.evaluate(({ selector, stylePropsToGet }: { selector: string; stylePropsToGet: string[] }) => {
        const element = document.querySelector(selector);
        if (!element) return null;

        const computedStyle = window.getComputedStyle(element);
        const result: Record<string, string> = {};

        stylePropsToGet.forEach((prop: string) => {
          result[prop] = computedStyle.getPropertyValue(prop);
        });

        return result;
      }, { selector, stylePropsToGet: styleProperties });

      if (!styles) {
        return {
          content: [
            {
              type: 'text',
              text: `Element with selector "${selector}" not found`
            }
          ],
          isError: true
        };
      }

      // Result message construction
      const resultMessage = {
        selector,
        styles,
        checkpointId
      };

      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify(resultMessage, null, 2)
          }
        ]
      };
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : String(error);
      Logger.error(`Failed to get element styles: ${errorMessage}`);
      return {
        content: [
          {
            type: 'text',
            text: `Failed to get element styles: ${errorMessage}`
          }
        ],
        isError: true
      };
    }
  }
);

src/tools/browser-tools.ts:55-95 (helper)

Helper function used by get-element-styles to retrieve the active Page object from ContextManager, falling back to most recent context if no contextId provided, returns error structure if no browser available.

const getContextForOperation = (contextId?: string): BrowserStatus => {
  let contextInstance;
  
  if (contextId) {
    contextInstance = contextManager.getContext(contextId);
    if (!contextInstance) {
      return {
        isStarted: false,
        error: {
          content: [
            {
              type: 'text',
              text: `Browser '${contextId}' not found. Use 'list-browsers' to see available browsers or 'start-browser' to create one.`
            }
          ],
          isError: true
        }
      };
    }
  } else {
    contextInstance = contextManager.getMostRecentContext();
    if (!contextInstance) {
      return {
        isStarted: false,
        error: {
          content: [
            {
              type: 'text',
              text: 'No active browsers found. Use \'start-browser\' to create a browser first.'
            }
          ],
          isError: true
        }
      };
    }
  }

  // Note: contextInstance.page is now always defined (never null)

  return { isStarted: true, page: contextInstance.page };
};

src/tools/browser-tools.ts:98-104 (helper)

Helper function used to extract the current checkpoint ID from the page's meta tag for including in tool responses.

const getCurrentCheckpointId = async (page: Page) => {
  const checkpointId = await page.evaluate(() => {
    const metaTag = document.querySelector('meta[name="__mcp_checkpoint"]');
    return metaTag ? metaTag.getAttribute('data-id') : null;
  });
  return checkpointId;
};

src/index.ts:87-92 (registration)
Invocation of registerBrowserTools in main server setup, which registers all browser tools including get-element-styles.
```
registerBrowserTools(
  server,
  contextManager,
  lastHMREvents,
  screenshotHelpers
);
```

Vite MCP Server