Skip to main content
Glama

Inspect layout and CSS

browser_inspect
Read-only

Inspect an element's box model, computed CSS, flex/grid layout, visibility, contrast, overflow, and overlays, or audit a page for layout, clipped text, broken images, and tap-target issues.

Instructions

With a ref or selector: the element's box model, position, computed CSS (or the properties you name), flex/grid layout, visibility, text contrast, overflow, and what is covering it. With no target: a layout audit of the whole page — horizontal overflow and its culprits, clipped text, broken images, missing alt text, small tap targets, low-contrast text, layout shift, fonts. Numbers instead of a screenshot, for CSS debugging.

Input Schema

NameRequiredDescriptionDefault
refNoElement ref from browser_find or browser_capabilities.
tabIdNo
selectorNoCSS selector, if you have no ref.
propertiesNoCSS properties to report, e.g. ["gap", "margin-top"].

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.1.2

TDQS

A4.4/5.0
Behavior4/5

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

Annotations only supply readOnlyHint=true, so the description carries most of the burden and does well: it enumerates the categories of data returned and clarifies the output is numeric rather than an image. It stops short of stating cost, depth limits, or whether the page must be idle/loaded before inspection.

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

Conciseness5/5

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

Two sentences, each mapping to one mode, with the targeting condition front-loaded before the payoff list. The enumerations are dense but every item is a distinct capability that changes what the agent gets back.

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

Completeness4/5

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

There is no output schema, so the description usefully doubles as a return-value preview by listing the inspected dimensions. Gaps remain around output shape/size for whole-page audits and the role of tabId, but nothing essential for a safe read-only call is missing.

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

Parameters4/5

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

Schema coverage is 75%; the description compensates for the two targeting params by establishing that ref and selector are alternative ways to aim the tool, and 'the properties you name' clarifies that the properties array narrows the computed-CSS output rather than being required. The undocumented tabId is left unexplained, and precedence when both ref and selector are supplied is unaddressed.

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 names the specific resource (element box model, position, computed CSS, flex/grid layout, contrast, overflow) and splits into two clearly named modes: targeted inspection vs. whole-page layout audit. An agent can distinguish this from browser_screenshot or browser_look purely from the text.

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

Usage Guidelines4/5

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

It explicitly states the condition for each mode ('With a ref or selector' vs. 'With no target'), which is genuine routing guidance. The closing phrase 'Numbers instead of a screenshot, for CSS debugging' implicitly contrasts with browser_screenshot, but no sibling is named outright and no exclusions are given.

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