Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@sargel Inspect the submit button on myapp.com and test margin-top:20px"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Visual debugging for pixel-perfect web development.
Whether you're implementing designs or debugging CSS issues, this tool gives AI agents the ability to see and fix UI problems visually - just like using browser DevTools. Inspect elements, test CSS changes instantly, and iterate until perfect.
Getting CSS exactly right is hard. Designs don't match implementation, layouts break across browsers, spacing is off by a few pixels. The usual fix: back-and-forth screenshots, trial and error, and "close enough" compromises.
The solution: AI agents that can see your UI, understand what's wrong visually, test fixes instantly, and iterate until pixel-perfect.
Related MCP server: mcp-browser-lens
Inspect - AI sees current state: styles, layout, visual issues
Test - Apply CSS edits and see results immediately
Verify - Get screenshot with changes applied
Iterate - Refine until perfect
Apply - Copy working CSS to your code
The key: Test changes visually before touching your source code.
Problem: "The submit button is too close to the form fields"
// Step 1: Inspect current state
{
"tool": "inspect_element",
"arguments": {
"css_selector": ".submit-btn",
"url": "https://myapp.com/form"
}
}
// Returns: Screenshot + computed styles showing margin-top: 4px
// Step 2: Test a fix
{
"tool": "inspect_element",
"arguments": {
"css_selector": ".submit-btn",
"url": "https://myapp.com/form",
"css_edits": {
"margin-top": "16px"
}
}
}
// Returns: Updated screenshot showing improved spacing
// Step 3: Perfect it
{
"css_edits": {
"margin-top": "20px"
}
}
// Returns: Perfect spacing
// Result: Add margin-top: 20px to your CSSBefore and after: Visual iteration until pixel-perfect
inspect_elementParameter | Type | Description |
| string | CSS selector for target element(s) |
| string | Webpage URL to inspect |
| object | Test CSS changes before applying to source |
| array | Focus on: "layout", "colors", "typography", "positioning" |
| number | Max elements when selector matches multiple (default: 10) |
{
screenshot: string; // Base64 PNG with visual highlights
computed_styles: object; // Actual CSS property values
cascade_rules: array; // CSS rules in cascade order
box_model: object; // Margin, padding, border, content dimensions
applied_edits?: object; // CSS edits that were tested (if any)
}Architecture: MCP (Model Context Protocol) server using Chrome DevTools Protocol for DOM inspection and screenshot capture.
Requirements:
Node.js 18+
Chrome/Chromium browser
AI agent with MCP support (Claude Desktop, Continue, etc.)
MIT License - see LICENSE for details.
Made for anyone who believes getting CSS right shouldn't be guesswork
PIXEL-PERFECT CSS DEBUGGING WORKFLOW:
Step 1 - INSPECT: First, analyze the current state by inspecting elements to understand layout, styling, and visual issues. Step 2 - IDENTIFY: Determine what needs to be changed (spacing, alignment, colors, etc.). Step 3 - TEST & VERIFY: Use css_edits parameter to apply changes and instantly see results in returned screenshot. Step 4 - ITERATE: If not perfect, refine css_edits in next call and see updated results immediately. Step 5 - EXTRACT: Copy successful CSS values to your source files.
This tool enables the complete DevTools-like workflow: inspect → edit → verify → iterate → copy. Perfect for debugging layout issues, matching designs exactly, and achieving pixel-perfect UIs through systematic testing.
WHEN TO USE:
"This button is misaligned" → Inspect current position → Test alignment fixes → Perfect spacing
"Colors don't match design" → Inspect current colors → Test design values → Verify exact match
"Layout breaks on mobile" → Inspect responsive behavior → Test CSS fixes → Validate across sizes
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Complete webpage URL to inspect. Must include protocol. Examples: 'https://example.com', 'http://localhost:3000'. | |
| limit | No | Control scope when multiple elements match selector. MULTI-ELEMENT DEBUGGING STRATEGY: • Start with limit: 3-5 for focused analysis of key elements • Use limit: 10+ for comprehensive pattern analysis across components • Reduce limit if screenshot/response becomes too large ITERATION SIGNALS - When to stop refining css_edits: ✅ Visual spacing matches design specifications exactly ✅ Elements align properly with grid/layout system ✅ Colors match design tokens/brand guidelines ✅ Text is readable and properly sized ✅ Interactive states (hover, focus) work correctly MULTI-STEP FIX WORKFLOW: 1. Broad inspection (limit: 10) → Identify patterns 2. Focused testing (limit: 3) → Test fixes on key elements 3. Verify consistency (limit: 10) → Ensure fix works across all instances 4. Extract CSS → Copy working styles to source code Success = When visual result matches intended design and all elements behave consistently. | |
| autoZoom | No | INTELLIGENT ZOOM OPTIMIZATION - Automatically adjusts viewport scale for optimal element visibility. ZOOM BENEFITS: • Small elements (buttons, icons) are enlarged for detailed inspection • Large elements are scaled down to fit viewport while maintaining detail • Ensures consistent element visibility regardless of original size • Optimizes pixel density for clear CSS measurement analysis ZOOM LOGIC: • Elements <10% of viewport → Zoom in (up to 3x) for better visibility • Elements >80% of viewport → Zoom out (down to 0.5x) to show full element • Elements 10-80% → No zoom adjustment needed DEFAULT BEHAVIOR: • true (recommended) - Automatic intelligent scaling • false - Elements shown at original browser zoom level OVERRIDE: Use zoomFactor parameter to manually control zoom level. Perfect for debugging tiny UI elements or ensuring large components fit in screenshot view. | |
| css_edits | No | ITERATIVE CSS TESTING - Apply and see results instantly in one call! WORKFLOW: Each call with css_edits returns updated screenshot + computed styles, enabling rapid iteration: ITERATION PATTERN: 1st call: Inspect without css_edits to see current state 2nd call: Apply initial fix → {"margin-left": "16px"} → See if spacing improves 3rd call: Refine based on result → {"margin-left": "24px", "margin-top": "8px"} → Perfect alignment Final: Copy working values to source code COMMON FIXES: - Alignment: {"align-self": "center", "justify-self": "start"} - Spacing: {"margin": "16px", "padding": "12px 24px"} - Colors: {"color": "#333", "background-color": "#f5f5f5"} - Layout: {"display": "flex", "flex-direction": "column", "gap": "8px"} - Debug: {"border": "2px solid red", "background": "rgba(255,0,0,0.1)"} PROGRESSIVE REFINEMENT: Start small → {"margin-top": "8px"} → If not enough, increase → {"margin-top": "16px"} → Perfect! Each call shows immediate visual feedback - no need for separate inspection calls when testing changes. | |
| autoCenter | No | AUTOMATIC ELEMENT CENTERING - Optimizes visual inspection for AI analysis. CENTERING BENEFITS: • Places elements in viewport center where LLMs focus attention naturally • Ensures small elements are prominently displayed for better analysis • Reduces need to scroll through screenshots to find inspected elements • Improves accuracy of visual debugging by positioning elements optimally DEFAULT BEHAVIOR: • true (recommended) - Automatically centers elements before screenshot • false - Elements remain in original position WHEN TO DISABLE: - Analyzing layout context where element position relative to siblings matters - Debugging scroll-dependent behaviors or sticky/fixed positioning - When element position itself is the issue being investigated Modern LLMs exhibit center-bias in visual attention - centering elements significantly improves inspection accuracy. | |
| zoomFactor | No | MANUAL ZOOM OVERRIDE - Explicitly set viewport scale factor. ZOOM LEVELS: • 0.5 - 50% zoom (fit large elements, see more context) • 1.0 - 100% normal browser zoom • 1.5 - 150% zoom (enlarge medium elements) • 2.0 - 200% zoom (detailed view of small elements) • 3.0 - 300% maximum zoom (pixel-perfect inspection) WHEN TO USE: - Override autoZoom when you need specific magnification level - Debugging pixel-perfect alignment at high zoom levels - Consistent zoom across multiple inspection calls for comparison - Custom zoom for specific design requirements PRECEDENCE: When provided, overrides autoZoom calculations completely. Range: 0.5 to 3.0 (enforced for screenshot quality and performance) | |
| css_selector | Yes | CSS selector to target element(s) for inspection and editing. SELECTOR STRATEGY: - Start SPECIFIC for single elements: "#submit-button", ".main-header" - Use GENERAL for pattern analysis: "button", ".nav-item", ".card" - COMPOUND selectors for precision: ".modal .close-button", "form input[type='submit']" COMMON PATTERNS: - Single element fix: ".hero-title" → Perfect one element's styling - Multi-element alignment: "button" → Analyze spacing between all buttons - Component analysis: ".card" → Check consistency across all cards - Responsive issues: ".sidebar" → Debug layout at different screen sizes - Form debugging: "input, textarea" → Inspect all form inputs together SELECTION TIPS: - Use browser DevTools to test selectors first - Multiple matches = automatic relationship analysis - Be specific enough to avoid unintended matches - Consider ":nth-child()", ":first-of-type" for precision The selector determines the scope of your CSS debugging session. | |
| property_groups | No | Focus on specific CSS aspects to reduce noise and speed up debugging: PROPERTY GROUPS: • "layout" - display, flex, grid properties (for structural issues) • "box" - margin, padding, border, width, height (for spacing/sizing) • "typography" - font, text properties, line-height (for text styling) • "colors" - color, background-color, border-color (for visual styling) • "visual" - opacity, visibility, transform, filter (for effects) • "positioning" - position, top/left/right/bottom, z-index (for placement) DEBUGGING STRATEGIES: - Alignment issues → ["layout", "box"] → Focus on flex/grid + spacing - Text problems → ["typography"] → Just font styling, ignore layout noise - Color mismatches → ["colors"] → Only color-related properties - Spacing problems → ["box"] → Margins, padding, borders only - Layer conflicts → ["positioning"] → Z-index, position values - All styling → [] (empty) → Default comprehensive view Fewer groups = faster analysis, more focused debugging. Default: ["layout", "box", "typography", "colors"] |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It reveals that css_edits produce immediate visual feedback via screenshot, that changes are iterative and not persisted (implying the need to copy CSS to source files), and that autoZoom/autoCenter affect the viewport for analysis. It does not mention error cases, side effects, or exact persistence behavior, but it covers the key behavioral traits relevant to an AI agent. A score of 4 reflects the strong context provided while acknowledging the lack of caveats about network/URL limitations or security implications.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is quite long, but it is well-structured with clear section headers, numbered steps, and bullet lists that improve scannability. The workflow overview is front-loaded, and each parameter description is organized into logical subsections. However, there is some repetition (e.g., the benefits of iteration and autoZoom are restated multiple times), and the length could be trimmed without losing essential information. Still, it earns a 4 because every section serves a clear purpose and the structure aids comprehension.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has 8 parameters, no output schema, and no siblings, the description is exceptionally complete. It covers the full workflow, provides usage scenarios, explains parameter strategies, includes iteration signals and stopping criteria, and even details how to extract final CSS. It tells an agent everything needed to use the tool effectively, from initial inspection to final code copy, making it self-contained and contextually rich.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Though schema description coverage is 100%, the description adds substantial value beyond the raw schema. For example, css_edits is explained with iterative patterns and common fixes, property_groups lists all six groups with debugging strategies, zoomFactor maps values to visual outcomes, and css_selector includes selector strategies and selection tips. This transforms parameter usage from mechanical input to strategic guidance, far exceeding the baseline of 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose with a specific verb ('inspect') and resource ('element'), and expands into a complete DevTools-like workflow: inspect → edit → verify → iterate → copy. It explicitly frames the tool as a pixel-perfect CSS debugging solution, which is a distinct and well-defined purpose. Although no sibling tools are provided for differentiation, the description's specificity makes the purpose unambiguous.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description includes a dedicated 'WHEN TO USE' section with concrete examples such as 'This button is misaligned' and 'Colors don't match design', clearly mapping user intentions to tool actions. It also outlines a step-by-step workflow (inspect, identify, test, iterate, extract) that tells the agent exactly when and how to invoke the tool at each stage. The lack of sibling tools means no alternative comparison is needed, but the guidance is explicit and actionable.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v0.1.0inspect_elementOnly one tool exists, so there are no overlapping purposes. The tool's description clearly defines its role as inspecting elements and applying CSS edits.
The tool name 'inspect_element' follows a clear snake_case verb_noun pattern. With only one tool, naming consistency is trivially perfect.
The server has a single tool, which is on the thin side for a typical server. However, the tool is comprehensive and covers a complete debugging workflow, so it's borderline but not severely lacking.
The tool describes a full workflow: inspect, edit, verify, iterate, copy. This covers the core needs of CSS debugging without apparent gaps.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Browser-based QA for AI-built software. Test pages with real browsers via agents.
Live browser debugging for AI assistants — DOM, console, network via MCP.
Hosted browser for AI agents: screenshots, post-JS DOM, console, WCAG. No install, no API key.
AI-powered web automation. Navigate websites using AI agents for one page or a thousand
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/ofriw/inspect-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
