home / mcp / web inspector mcp server
Provides web inspection and debugging capabilities to understand page structure, visibility, layouts, and computed styles in real browser environments.
Configuration
View docs{
"mcpServers": {
"antonzherdev-mcp-web-inspector": {
"command": "npx",
"args": [
"-y",
"mcp-web-inspector"
]
}
}
}Web Inspector MCP is a Model Context Protocol server that provides comprehensive web inspection and debugging capabilities built on Playwright. It helps you understand page structure, diagnose visibility and layout issues, inspect computed styles, and test selectors in a real browser environment, making AI-assisted web development and testing faster and more reliable.
You use Web Inspector MCP with your MCP client to inspect, test, and debug web pages. Start by configuring the MCP client to connect to the Web Inspector MCP server, then run tools to explore the DOM, verify visibility, measure spacing, compare element alignment, and fetch computed styles. Practical workflows include inspecting a page overview, drilling into semantic elements, validating layout consistency across components, and testing selector reliability before writing tests.
Prerequisites: Node.js (LTS version) and a terminal or command prompt. You will use a local, MCP-enabled tool or CLI that can request an MCP server. Install the Web Inspector MCP server package and make it available via your MCP client setup.
The Web Inspector MCP server runs as a local process that your MCP client can launch or connect to. The recommended runtime is to invoke it through a shared command, ensuring you have the required package available in your environment.
Below are the primary tools you can call to interact with web pages through the Web Inspector MCP server. Each tool returns structured information to help you understand page structure, layout constraints, and styling.
If you encounter issues with browser installation, server loading, or connectivity, ensure you used the correct MCP command for the local server, verify your client configuration, restart your MCP client, and check for any environmental restrictions or firewall rules that might block the server.
Real-world usage often involves a sequence of steps that include navigating to a page, inspecting the DOM, measuring elements, and validating layout consistency. Combine multiple tools to verify that selectors resolve correctly and that elements render and behave as expected.
This MCP focuses on inspection, debugging, and layout validation. If you need full browser automation beyond inspection and layout checks, consider using the broader Playwright-based capabilities alongside Web Inspector MCP.
PRIMARY INSPECTION TOOL to explore page structure with semantic elements, visibility, and inter-element spacing. Drill down from page overview to specific elements and identify layout issues.
TRACE LAYOUT CONSTRAINTS up the DOM tree to identify where width constraints, margins, borders, and overflow clipping originate. Useful for centering and clipping debugging.
COMPARE TWO ELEMENTS to reveal edge, center, and size alignment differences. Helps determine if headers, panels, or cards are aligned.
RETRIEVE COMPUTED CSS values for requested properties. Useful for understanding styles that affect layout and behavior.
CHECK IF AN ELEMENT IS VISIBLE in the viewport, including whether it is clipped, scrolled into view, or obscured by overlays.
TEST A CSS selector and return detailed information for multiple matches, including position, size, text, and visibility.
DISCOVER all test identifiers on the page (data-testid, data-test, data-cy) for reliable element selection.
MEASURE ELEMENT BOX MODEL across content, padding, border, and margin to diagnose spacing and size issues.
FIND ELEMENTS BY TEXT CONTENT for locating elements without strong selectors, with optional regex and exact matching.
CHECK EXISTENCE of an element with a simple true/false result to quick-check availability before interaction.
NAVIGATE browser history backward or forward to test navigation flows.
NAVIGATE to a specific URL, with options for viewport, device emulation, and headless mode.
SCROLL a container or page by a specified number of pixels to test scrolling behavior and lazy-loaded content.
SCROLL a particular element into view to ensure visibility before interaction.
CLICK an element on the page to initiate interactions.
DRAG an element to a target location to simulate drag-and-drop interactions.
FILL an input field with a value to simulate user typing.
HOVER an element to reveal tooltips or hover states.
SEND A KEY PRESS to the focused element to simulate keyboard input.
SELECT an option from a select element by value.
UPLOAD A FILE to an input of type file for form submissions.
RARELY NEEDED: Get raw HTML markup for a specific container or the full page.
RARELY NEEDED: Extract visible text content from the page for analysis.
CAPTURE screenshots for visual validation or sharing with designers.
CLEAR CAPTURED CONSOLE LOGS to reset debugging output.
RETRIEVE console logs with filtering and efficient grouping for debugging.
RUN CUSTOM JAVASCRIPT in the browser for advanced, token-protected results when other tools cannot accomplish the task.
RETRIEVE headers and bodies for a specific network request for API debugging.
LIST RECENT NETWORK REQUESTS captured by the browser to investigate API calls and performance.
WAIT for an element to reach a desired state such as visible or detached to replace arbitrary sleep calls.
WAIT for network activity to settle to ensure dynamic content has finished loading.
CLOSE the browser and release resources when you are done.
EMULATE a preferred color scheme for testing dark/light modes.
RETRIEVE full output for a previously previewed large result using a one-time token.