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.

How to use

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.

How to install

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.

Configuration and usage notes

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.

Core tools and how to use them

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.

Troubleshooting and tips

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.

Examples and practical workflows

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.

Notes

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.

Available tools

inspect_dom

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.

inspect_ancestors

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_element_alignment

COMPARE TWO ELEMENTS to reveal edge, center, and size alignment differences. Helps determine if headers, panels, or cards are aligned.

get_computed_styles

RETRIEVE COMPUTED CSS values for requested properties. Useful for understanding styles that affect layout and behavior.

check_visibility

CHECK IF AN ELEMENT IS VISIBLE in the viewport, including whether it is clipped, scrolled into view, or obscured by overlays.

query_selector

TEST A CSS selector and return detailed information for multiple matches, including position, size, text, and visibility.

get_test_ids

DISCOVER all test identifiers on the page (data-testid, data-test, data-cy) for reliable element selection.

measure_element

MEASURE ELEMENT BOX MODEL across content, padding, border, and margin to diagnose spacing and size issues.

find_by_text

FIND ELEMENTS BY TEXT CONTENT for locating elements without strong selectors, with optional regex and exact matching.

element_exists

CHECK EXISTENCE of an element with a simple true/false result to quick-check availability before interaction.

go_history

NAVIGATE browser history backward or forward to test navigation flows.

navigate

NAVIGATE to a specific URL, with options for viewport, device emulation, and headless mode.

scroll_by

SCROLL a container or page by a specified number of pixels to test scrolling behavior and lazy-loaded content.

scroll_to_element

SCROLL a particular element into view to ensure visibility before interaction.

click

CLICK an element on the page to initiate interactions.

drag

DRAG an element to a target location to simulate drag-and-drop interactions.

fill

FILL an input field with a value to simulate user typing.

hover

HOVER an element to reveal tooltips or hover states.

press_key

SEND A KEY PRESS to the focused element to simulate keyboard input.

select

SELECT an option from a select element by value.

upload_file

UPLOAD A FILE to an input of type file for form submissions.

get_html

RARELY NEEDED: Get raw HTML markup for a specific container or the full page.

get_text

RARELY NEEDED: Extract visible text content from the page for analysis.

visual_screenshot_for_humans

CAPTURE screenshots for visual validation or sharing with designers.

clear_console_logs

CLEAR CAPTURED CONSOLE LOGS to reset debugging output.

get_console_logs

RETRIEVE console logs with filtering and efficient grouping for debugging.

evaluate

RUN CUSTOM JAVASCRIPT in the browser for advanced, token-protected results when other tools cannot accomplish the task.

get_request_details

RETRIEVE headers and bodies for a specific network request for API debugging.

list_network_requests

LIST RECENT NETWORK REQUESTS captured by the browser to investigate API calls and performance.

wait_for_element

WAIT for an element to reach a desired state such as visible or detached to replace arbitrary sleep calls.

wait_for_network_idle

WAIT for network activity to settle to ensure dynamic content has finished loading.

close

CLOSE the browser and release resources when you are done.

set_color_scheme

EMULATE a preferred color scheme for testing dark/light modes.

confirm_output

RETRIEVE full output for a previously previewed large result using a one-time token.