get-element-dimensions
Retrieve precise dimension and position data for any element using its CSS selector, aiding in accurate element inspection and live code updates within the Vite MCP Server.
Instructions
Retrieves dimension and position information of a specific element
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector of the element to inspect |
Implementation Reference
- src/tools/browser-tools.ts:444-527 (handler)Full tool registration including handler function that retrieves element dimensions using getBoundingClientRect() via page.evaluate, checks visibility, and returns structured dimensions data.// Element dimensions and position retrieval tool server.tool( 'get-element-dimensions', 'Retrieves dimension and position information of a specific element', { selector: z.string().describe('CSS selector of the element to inspect') }, async ({ selector }) => { 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 dimensions and position information const dimensions = await browserStatus.page.evaluate((selector: string) => { const element = document.querySelector(selector); if (!element) return null; const rect = element.getBoundingClientRect(); return { width: rect.width, height: rect.height, top: rect.top, left: rect.left, bottom: rect.bottom, right: rect.right, x: rect.x, y: rect.y, isVisible: !!( rect.width && rect.height && window.getComputedStyle(element).display !== 'none' && window.getComputedStyle(element).visibility !== 'hidden' ) }; }, selector); if (!dimensions) { return { content: [ { type: 'text', text: `Element with selector "${selector}" not found` } ], isError: true }; } // Result message construction const resultMessage = { selector, dimensions, 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 dimensions: ${errorMessage}`); return { content: [ { type: 'text', text: `Failed to get element dimensions: ${errorMessage}` } ], isError: true }; } } );
- src/tools/browser-tools.ts:448-450 (schema)Input schema validation using Zod for the 'selector' parameter.{ selector: z.string().describe('CSS selector of the element to inspect') },
- src/tools/browser-tools.ts:55-95 (helper)Helper function getContextForOperation used by the tool to get the browser page context, handling contextId or most recent.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 getCurrentCheckpointId extracts checkpoint ID from meta tag in the page.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/tools/index.ts:1-2 (registration)Export of browser-tools making the tool available for import/registration elsewhere.export * from './browser-tools.js'; export * from './log-manager.js';