Skip to main content
Glama

measure_element

Read-only

Measure padding, margin, border, and dimensions in visual box model format. Debug spacing issues with directional arrows and raw dimensions for scroll detection.

Instructions

📏 MEASUREMENT TOOL - DEBUG SPACING ISSUES: See padding, margin, border, and dimension measurements in visual box model format. Use when elements have unexpected spacing or size. Returns compact visual representation showing content → padding → border → margin with directional arrows (↑24px for top margin, etc.). Also provides raw dimensions useful for scroll detection (clientHeight vs content height). For parent-child centering issues, use inspect_dom() first (shows if child is centered in parent). For comparing alignment between two elements, use compare_element_alignment(). For quick scroll detection, use inspect_dom() instead (shows 'scrollable ↕️'). More readable than get_computed_styles() or evaluate() for box model debugging.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector or testid shorthand (e.g., 'testid:submit', '#login-button')
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

The description explains the output format in detail: 'compact visual representation showing content → padding → border → margin with directional arrows.' It also mentions providing raw dimensions for scroll detection. This goes beyond the readOnlyHint=true annotation, giving the agent a clear mental model of what the tool returns.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is reasonably concise given the amount of information. It front-loads the tool's purpose and usage in the first sentence, then provides behavioral details and sibling comparisons. Every sentence adds value, though it could be slightly trimmed without loss.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Considering the tool has only one parameter and a straightforward read operation, the description is complete. It explains what the tool does, when to use it, what output to expect, and how it relates to sibling tools. No gaps are evident.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema already has a clear description for the 'selector' parameter (CSS selector or testid shorthand). The main description does not add further parameter semantics beyond repeating 'selector for the element.' With 100% schema coverage, a baseline score of 3 is appropriate as no additional insights are needed.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'DEBUG SPACING ISSUES' and specifies it measures padding, margin, border, and dimensions. It distinguishes from siblings by comparing to inspect_dom(), compare_element_alignment(), get_computed_styles(), and evaluate(), making it easy for an AI agent to select the correct tool.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly says when to use the tool: 'Use when elements have unexpected spacing or size.' It also provides clear alternatives for different scenarios, such as using inspect_dom() for parent-child centering or compare_element_alignment() for comparing two elements, which helps an agent decide when not to use this tool.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/antonzherdev/mcp-web-inspector'

If you have feedback or need assistance with the MCP directory API, please join our Discord server