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