Skip to main content
Glama

Web Inspector MCP πŸ”

Give LLMs visual superpowers to see, debug, and test any web page.

A Model Context Protocol (MCP) server that provides comprehensive web inspection and debugging capabilities. Built on Playwright, it enables AI assistants to deeply understand web page structure, debug element visibility issues, validate layouts, and inspect DOM in real browser environments.

Why Web Inspector MCP?

Modern web applications are complex. Elements are hidden, layouts break, selectors fail, and debugging feels like detective work. Web Inspector MCP gives your AI assistant the tools to:

  • πŸ” Understand any page structure - Progressive DOM inspection that drills through wrapper divs to find semantic elements

  • 🎯 Debug visibility issues - Detailed diagnostics showing exactly why clicks fail (clipped, covered, scrolled out of view)

  • πŸ”Ό Trace layout constraints - Walk up the DOM tree to find where unexpected margins, width limits, and overflow clipping come from

  • πŸ“ Validate layouts - Compare element positions to ensure consistent alignment and spacing

  • πŸ§ͺ Test selector reliability - See all matching elements with their visibility status before writing tests

  • 🎨 Inspect styles - Get computed CSS to understand why elements behave unexpectedly

  • πŸ“ Find elements without IDs - Locate elements by text content when test IDs aren't available

Related MCP server: Playwright MCP Server

Perfect For

  • QA Engineers - Debug failing automated tests and understand why selectors break

  • Frontend Developers - Investigate layout issues and CSS problems across browsers

  • Test Automation - Build robust selectors and validate page structure before writing tests

  • Accessibility Audits - Inspect ARIA roles, semantic HTML, and element visibility

  • Web Scraping - Understand page structure and find the right selectors for data extraction

Installation

No manual installation required! Your AI coding assistant will automatically install the server via npx when configured.

If you prefer global installation for faster startup:

npm install -g mcp-web-inspector

AI Tool Setup

All configurations below use npx which automatically downloads and runs the latest version. Click to expand installation instructions for your AI tool:

Installation via CLI

# Add the server globally
codex mcp add web-inspector -- npx -y mcp-web-inspector

# Verify it was registered
codex mcp list

Manual Configuration

Codex stores MCP server definitions in ~/.codex/config.toml. Add (or create) an entry under the [mcp.servers] table:

[mcp.servers.web-inspector]
command = "npx"
args = ["-y", "mcp-web-inspector"]

Restart Codex CLI to make sure the new server is available in future sessions.

Installation via CLI

# Add MCP server using Claude Code CLI
claude mcp add web-inspector --scope user -- npx -y mcp-web-inspector

# Verify installation
claude mcp list

Manual Configuration

Edit ~/.config/claude/mcp.json (Linux/macOS) or %APPDATA%\Claude\mcp.json (Windows):

{
  "mcpServers": {
    "web-inspector": {
      "command": "npx",
      "args": ["-y", "mcp-web-inspector"]
    }
  }
}

After installation, restart Claude Code to load the server.

Configuration File Location

  • MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json

  • Windows: %APPDATA%\Claude\claude_desktop_config.json

  • Linux: ~/.config/Claude/claude_desktop_config.json

Add to Configuration

{
  "mcpServers": {
    "web-inspector": {
      "command": "npx",
      "args": ["-y", "mcp-web-inspector"]
    }
  }
}

Restart Claude Desktop after saving the configuration.

Prerequisites

  • VS Code version 1.101 or later

  • GitHub Copilot extension installed

Installation via CLI

# VS Code Stable
code --add-mcp '{"name":"web-inspector","command":"npx","args":["-y","mcp-web-inspector"]}'

# VS Code Insiders
code-insiders --add-mcp '{"name":"web-inspector","command":"npx","args":["-y","mcp-web-inspector"]}'

Manual Configuration

  1. Open VS Code Settings (JSON)

  2. Add MCP server configuration to mcp.json:

{
  "servers": {
    "web-inspector": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "mcp-web-inspector"]
    }
  }
}

Enable MCP in VS Code

  1. Open VS Code Settings (UI)

  2. Search for "MCP"

  3. Enable Chat > MCP option

  4. MCP only works in Agent mode - switch to agent mode in the chat interface

  5. Open the mcp.json file and click the "Start" button next to the server

First-Time Browser Setup

When you first use the server with npx, Playwright browsers will be automatically installed on first tool use if not already present. The installation happens once and browsers are stored in your home directory, shared across all projects.

If automatic installation doesn't work (firewall, permissions, etc.), you'll see clear instructions to run:

npx playwright install chromium firefox webkit

Then restart VS Code to use the server.

Note about Embedded Browser

GitHub Copilot and VS Code may have an embedded browser feature. If you experience conflicts or prefer using Web Inspector MCP for all web inspection tasks, you may want to disable the built-in browser:

  1. Open VS Code Settings

  2. Search for "browser preview" or "simple browser"

  3. Disable relevant browser-related extensions if needed

Web Inspector MCP provides more powerful inspection capabilities than the embedded browser.

Configuration File Location

  • MacOS/Linux: ~/.cursor/mcp.json or check Cursor's settings directory

  • Windows: %APPDATA%\Cursor\mcp.json

Add to Configuration

{
  "mcpServers": {
    "web-inspector": {
      "command": "npx",
      "args": ["-y", "mcp-web-inspector"]
    }
  }
}

Steps

  1. Open Cursor Settings (Cmd/Ctrl + ,)

  2. Search for "MCP" settings

  3. Edit the MCP configuration file

  4. Add the web-inspector server configuration

  5. Restart Cursor

  6. Verify the server is available in the MCP panel

Configuration

Windsurf uses the same configuration format as Claude Desktop. You can literally copy your Claude Desktop config!

Configuration File: Check Windsurf's settings for the exact path (typically in app data directory)

{
  "mcpServers": {
    "web-inspector": {
      "command": "npx",
      "args": ["-y", "mcp-web-inspector"]
    }
  }
}

Steps

  1. Open Windsurf settings

  2. Navigate to MCP configuration

  3. Add the web-inspector server

  4. Restart Windsurf

  5. Verify server availability in the tools panel

Windsurf handles MCP tools very well - configuration is straightforward!

Prerequisites

  • VS Code with Cline extension installed

  • Node.js installed on your system

Configuration

  1. Open Cline's settings in VS Code

  2. Locate the MCP configuration section

  3. Add the server configuration:

{
  "mcpServers": {
    "web-inspector": {
      "command": "npx",
      "args": ["-y", "mcp-web-inspector"]
    }
  }
}
  1. Restart VS Code or reload the Cline extension

  2. The Web Inspector MCP tools will be available in Cline's tool panel

Most MCP-compatible tools use a similar configuration format. Look for:

  1. MCP settings or configuration file

  2. Server/Tools configuration section

  3. Add the standard configuration:

{
  "mcpServers": {
    "web-inspector": {
      "command": "npx",
      "args": ["-y", "mcp-web-inspector"]
    }
  }
}

CLI-first assistants such as GitHub Copilot CLI, Copylot CLI, Continue CLI, and other emerging AI coders follow the same patternβ€”either run their mcp add command with npx -y mcp-web-inspector or drop the snippet above into their MCP config file.

If your tool supports MCP but isn't listed here, consult its documentation for the exact configuration file location.


Command Line Options

Customize server behavior with command line flags:

  • --no-save-session - Disable automatic session persistence (start with fresh browser state each time)

  • --user-data-dir <path> - Custom directory for session data (default: ./.mcp-web-inspector)

  • --headless - Run browser in headless mode by default (no visible window)

  • --expose-sensitive-network-data - Loosen redaction for sensitive network headers (e.g., show truncated auth/cookie values). Disabled by default for safety.

Example usage:

{
  "mcpServers": {
    "web-inspector": {
      "command": "npx",
      "args": ["-y", "mcp-web-inspector", "--user-data-dir", "./my-sessions"]
    }
  }
}

Run in headless mode for automation/CI:

{
  "mcpServers": {
    "web-inspector": {
      "command": "npx",
      "args": ["-y", "mcp-web-inspector", "--headless"]
    }
  }
}

Combine multiple flags:

{
  "mcpServers": {
    "web-inspector": {
      "command": "npx",
      "args": ["-y", "mcp-web-inspector", "--headless", "--no-save-session", "--user-data-dir", "./.mcp-web-inspector"]
    }
  }
}

Session Persistence & Data Storage

By default, browser session data and screenshots are automatically saved and organized in ./.mcp-web-inspector/:

.mcp-web-inspector/
  β”œβ”€β”€ user-data/       # Browser sessions (cookies, localStorage, sessionStorage)
  └── screenshots/     # Screenshot files

How It Works

  • Session data persists across browser restarts

  • Screenshots are saved to the screenshots directory

  • Browser maintains logged-in state between sessions

  • Works out of the box - just navigate and your data is saved

Benefits

  • βœ… Test authenticated features without re-logging in each time

  • βœ… Maintain shopping cart state across sessions

  • βœ… Preserve user preferences and settings

  • βœ… Debug logged-in user workflows efficiently

Disabling Session Persistence

If you prefer the browser to start fresh each time (no persistent state), use the --no-save-session flag:

Claude Code CLI:

claude mcp add web-inspector --scope user -- npx -y mcp-web-inspector --no-save-session

Claude Desktop / Windsurf / Cline:

{
  "mcpServers": {
    "web-inspector": {
      "command": "npx",
      "args": ["-y", "mcp-web-inspector", "--no-save-session"]
    }
  }
}

Cursor:

{
  "mcpServers": {
    "web-inspector": {
      "command": "npx",
      "args": ["-y", "mcp-web-inspector", "--no-save-session"],
      "env": {}
    }
  }
}

Clearing Data

To clear all saved data (sessions and screenshots):

rm -rf ./.mcp-web-inspector

To clear only sessions or screenshots:

rm -rf ./.mcp-web-inspector/user-data      # Clear sessions only
rm -rf ./.mcp-web-inspector/screenshots    # Clear screenshots only

Security Best Practices

⚠️ IMPORTANT: Add .mcp-web-inspector/ to your .gitignore file to prevent committing:

  • Browser session data (cookies, localStorage, sessionStorage)

  • Saved screenshots (may contain sensitive information)

  • Authentication tokens and credentials

Add to your .gitignore:

# MCP Web Inspector data
.mcp-web-inspector/

Why this matters:

  • Session data contains cookies and authentication tokens

  • Screenshots may capture sensitive user data

  • Committing this data could leak credentials to your repository

  • Session files can be large and bloat your git history

Best practices:

  • Default is visible browser (headless: false) for interactive debugging

  • Use headless: true explicitly for automation and CI/CD environments

  • Clear session data after testing sensitive applications

  • Use --no-save-session flag when testing on shared/public sites


Core Tools

Inspection

inspect_dom

πŸ” PRIMARY INSPECTION TOOL - START HERE FOR LAYOUT DEBUGGING: Progressive DOM inspection that shows parent-child relationships, centering issues, spacing gaps, and scrollable containers. Skips wrapper divs and shows only semantic elements (header, nav, main, form, button, elements with test IDs, ARIA roles, etc.).

WORKFLOW: Call without selector for page overview, then drill down by calling with child's selector.

DETECTS: Scrollable containers (shows "scrollable ↕️ 36px" when scrollHeight > clientHeight), parent-relative positioning, vertical/horizontal centering, sibling spacing gaps, layout patterns.

OUTPUT FORMAT:

[0] <button data-testid="menu">
    @ (16,8) 40Γ—40px                         ← Absolute viewport position (x,y) and size
    from edges: ←16px β†’1144px ↑8px ↓8px      ← Distance from parent edges (↑8px = ↓8px means vertically centered)
    "Menu"
    βœ“ visible, ⚑ interactive

[1] <div data-testid="title">
    @ (260,2) 131Γ—28px
    from edges: ←244px β†’244px ↑2px ↓42px     ← Equal left/right (244px) = horizontally centered, unequal top/bottom = NOT vertically centered
    gap from [0]: β†’16px                      ← Spacing between siblings
    "Title"
    βœ“ visible, 2 children

SYMBOLS: βœ“=visible, βœ—=hidden, ⚑=interactive, ←→=horizontal edges, ↑↓=vertical edges, ↕️=vertical scroll, ↔️=horizontal scroll CENTERING: Equal left/right distances = horizontally centered, equal top/bottom = vertically centered SCROLL DETECTION: Automatically detects scrollable containers and shows overflow amount (e.g., "scrollable ↕️ 397px" means 397px of hidden content). No need to use evaluate() to compare scrollHeight/clientHeight.

RELATED TOOLS: For comparing TWO elements' alignment (not parent-child), use compare_element_alignment(). For box model (padding/margin), use measure_element().

⚠️ More efficient than get_html() or evaluate() for structural analysis. Use BEFORE visual tools (screenshot) or evaluate(). Supports testid shortcuts.

NOTE: Dropdowns, listboxes, dialogs, and popovers (especially in react-aria/headless UI/Radix) are commonly portaled to document.body β€” when a combobox or menu is open, query at the root level (e.g. [role="listbox"], [role="dialog"]) rather than inside the trigger's subtree.

  • Parameters:

    • selector (string, optional): CSS selector, text selector, or testid shorthand to inspect. Omit for page overview (defaults to body). Use 'testid:login-form', '#main', etc.

    • includeHidden (boolean, optional): Include hidden elements in results (default: false)

    • maxChildren (number, optional): Maximum number of children to show (default: 20)

    • maxDepth (number, optional): Maximum depth to drill through non-semantic wrapper elements when looking for semantic children (default: 5). Increase for extremely deeply nested components, decrease to 1 to see only immediate children without drilling.

  • Output Format:

    • Optional selection header when multiple matches (with chosen index).

    • For each listed element:

      • Indexed tag with best identifier (testid/ID/classes).

      • Position line: @ (x,y) widthΓ—height px.

      • from edges: left/right/top/bottom distances; centering hints.

      • gap from [prev]: spacing between siblings when applicable.

      • Text snippet in quotes (trimmed).

      • Status: βœ“ visible / βœ— hidden, ⚑ interactive, N children.

      • Scrollable markers ↕️/↔️ with overflow amount when detected.

  • Examples:

  • inspect_dom({})

  • inspect_dom({ selector: 'testid:menu' })

  • inspect_dom({ selector: '#content', maxChildren: 10 })

  • Example Output (inspect_dom({})):

[0] <header data-testid="site-header">
    @ (0,0) 1280Γ—64px
    from edges: ←0px β†’0px ↑0px ↓1216px
    "My App"
    βœ“ visible, 3 children

[1] <main id="content">
    @ (0,64) 1280Γ—640px
    from edges: ←0px β†’0px ↑64px ↓512px
    "Welcome back"
    βœ“ visible, 5 children, scrollable ↕️ 320px
  • Example Output (inspect_dom({ selector: 'testid:menu' })):

[0] <button data-testid="menu">
    @ (16,8) 40Γ—40px
    from edges: ←16px β†’1224px ↑8px ↓16px
    "Menu"
    βœ“ visible, ⚑ interactive

inspect_ancestors

DEBUG LAYOUT CONSTRAINTS: Walk up the DOM tree to find where width constraints, margins, borders, and overflow clipping come from. Shows for each ancestor: position/size, width constraints (w, max-w, min-w), margins with directional arrows (↑↓←→ format), padding, display type, borders (directional if non-uniform), overflow (πŸ”’=hidden, ↕️=scroll), flexbox context (flex direction justify items gap), grid context (cols rows gap), position/z-index/transform when set. Automatically detects horizontal centering via auto margins and flags clipping points (🎯). Essential for debugging unexpected centering, constrained width, or clipped content. Default: 10 ancestors (reaches in most React apps), max: 15. Use after inspect_dom() to understand parent layout constraints.

  • Parameters:

    • selector (string, required): CSS selector or testid shorthand for the element to start from (e.g., 'testid:header', '#main')

    • limit (number, optional): Maximum number of ancestors to traverse (default: 10, max: 15). Increase for deeply nested component frameworks.

  • Output Format:

    • Header showing selected element index when selector matched multiple.

    • For each ancestor (starting from target):

      • [i] | testid:... or classes

      • @ (x,y) widthΓ—height px

      • Inline summary: w, display (if not block), m/p, max-w, min-w

      • Flexbox/Grid context when present (direction, gap, grid templates)

      • Margin breakdown with arrows (↑↓←→) and centering diagnostics

      • Border details when set (directional if non-uniform)

      • Overflow state: πŸ”’ hidden, ↕️/↔️ scroll + overflow amount

      • Extra: position/z-index/transform when non-default

      • Diagnostics: 🎯 CLIPPING POINT / SCROLLABLE CONTAINER / WIDTH CONSTRAINT

  • Examples:

  • inspect_ancestors({ selector: 'testid:submit-button' })

  • inspect_ancestors({ selector: '#content', limit: 15 })

  • Example Output (inspect_ancestors({ selector: 'testid:submit-button' })):

Selected: testid:submit-button (1 of 2 matches)

Ancestor Chain:

[0] <button> | testid:submit-button
    @ (860,540) 120x40px | w:120px display:inline-block
    margin: ↑0px β†’0px ↓0px ←0px
    border: 1px solid rgb(0, 122, 255)
    ⚠ none

[1] <div> | form-actions
    @ (800,520) 240x80px | w:240px display:flex m:0px p:16px gap:8px
    flex: row, justify:center, align:center, gap:8px
    margin: β†’auto ←auto ← Horizontally centered (likely margin:0 auto)
    border: none
    overflow: πŸ”’ hidden
    🎯 CLIPPING POINT - May clip overflowing children

[2] <form> | #login-form
    @ (640,200) 560x480px | w:560px max-w:600px
    position:relative
    🎯 WIDTH CONSTRAINT

compare_element_alignment

COMPARE TWO ELEMENTS: Get comprehensive alignment and dimension comparison in one call. Shows edge alignment (top, left, right, bottom), center alignment (horizontal, vertical), and dimensions (width, height). Perfect for debugging 'are these headers aligned?' or 'do these panels match?'. Returns all alignment info with βœ“/βœ— symbols and pixel differences. For parent-child centering, use inspect_dom() instead (automatically shows if children are centered in parent). More efficient than evaluate() with manual getBoundingClientRect() calculations.

  • Parameters:

    • selector1 (string, required): CSS selector, text selector, or testid shorthand for the first element (e.g., 'testid:main-header', '#header')

    • selector2 (string, required): CSS selector, text selector, or testid shorthand for the second element (e.g., 'testid:chat-header', '#secondary-header')

  • Output Format:

    • Optional warnings when a selector matched multiple elements (uses first visible; suggests adding unique data-testid).

    • Header: Alignment: vs

    • Two lines with each element's position and size: @ (x,y) wΓ—h px

    • Edges block: Top/Left/Right/Bottom with βœ“/βœ— and diffs

    • Centers block: Horizontal/Vertical center alignment with βœ“/βœ— and diffs

    • Dimensions block: Width/Height same or different with βœ“/βœ— and diffs

    • Optional hint to run inspect_ancestors(...) when large misalignment detected

  • Examples:

  • compare_element_alignment({ selector1: 'testid:header-title', selector2: 'testid:subtitle' })

  • compare_element_alignment({ selector1: '#left-panel', selector2: '#right-panel' })

  • Example Output (compare_element_alignment({ selector1: '#left-panel', selector2: '#right-panel' })):

Alignment: <div #left-panel> vs <div #right-panel>
  #left-panel: @ (80,120) 320Γ—600px
  #right-panel: @ (440,120) 320Γ—600px

Edges:
  Top:    βœ“ aligned (both @ 120px)
  Left:   βœ— not aligned (80px vs 440px, diff: 360px)
  Right:  βœ— not aligned (400px vs 760px, diff: 360px)
  Bottom: βœ“ aligned (both @ 720px)

Centers:
  Horizontal: βœ— not aligned (240px vs 600px, diff: 360px)
  Vertical:   βœ“ aligned (both @ 420px)

Dimensions:
  Width:  βœ“ same (320px)
  Height: βœ“ same (600px)

get_computed_styles

INSPECT CSS PROPERTIES: Get computed CSS values for specific properties (display, position, width, etc.). Use when you need raw CSS values or specific properties not shown by measure_element(). Returns styles grouped by category (Layout, Visibility, Spacing, Typography). For box model visualization (padding/margin), use measure_element() instead.

  • Parameters:

    • selector (string, required): CSS selector, text selector, or testid shorthand (e.g., 'testid:submit-button', '#main')

    • properties (string, optional): Comma-separated list of CSS properties to retrieve (e.g., 'display,width,color'). If not specified, returns common layout properties: display, position, width, height, opacity, visibility, z-index, overflow, margin, padding, font-size, font-weight, color, background-color

  • Output Format:

    • Optional selection header when multiple elements matched.

    • Header: 'Computed Styles: <tag id/class/testid>'

    • One or more sections: Layout, Visibility, Spacing, Typography, Other

    • Each section lists 'property: value' lines for requested properties

  • Examples:

  • get_computed_styles({ selector: 'testid:login-form' })

  • get_computed_styles({ selector: '#hero', properties: 'display,width,color' })

  • Example Output (get_computed_styles({ selector: 'testid:login-form' })):

⚠ Found 2 elements matching "testid:login-form", using element 1 (first visible)
πŸ’‘ Tip: Consider adding a unique data-testid attribute for more reliable selection.
   Primary fix: add data-testid and target it (e.g., testid:submit).
   Workaround: use '>> nth=<index>' only when you can't add test IDs.

Computed Styles: <form data-testid="login-form">

Layout:
  display: block
  position: static
  width: 560px
  height: 480px

Visibility:
  opacity: 1
  visibility: visible
  z-index: auto
  overflow: visible

Spacing:
  margin: 0px
  padding: 24px

Typography:
  font-size: 16px
  font-weight: 400
  color: rgb(33, 37, 41)

check_visibility

Check if an element is visible to the user. CRITICAL for debugging click/interaction failures. Returns detailed visibility information including viewport intersection, clipping by overflow:hidden, and whether element needs scrolling. Supports testid shortcuts (e.g., 'testid:submit-button').

  • Parameters:

    • selector (string, required): CSS selector, text selector, or testid shorthand (e.g., 'testid:login-button', '#submit', 'text=Click here')

  • Output Format:

    • Header: Visibility: <tag id/class/testid>

    • Status line: βœ“ visible/βœ— hidden, βœ“/βœ— in viewport with % visible

    • CSS: opacity, display, visibility

    • Optional interactability issues: disabled, readonly, aria-disabled, pointer-events:none

    • Optional Issues block: clipped by parent overflow, covered by element (with descriptor and ~coverage%), needs scroll

    • Optional Suggestions: scroll_to_element, modal/overlay hint, interaction state note

    • Optional tip to run inspect_ancestors when clipping is detected

  • Examples:

  • check_visibility({ selector: 'testid:submit' })

  • check_visibility({ selector: '#login button' })

  • Example Output (check_visibility({ selector: 'testid:submit' })):

Visibility: <button data-testid="submit">

βœ“ visible, βœ“ in viewport
opacity: 1, display: inline-block, visibility: visible
  • Example Output (check_visibility({ selector: '#hero-cta' })):

Visibility: <a #hero-cta>

βœ— hidden, βœ— not in viewport (45% visible)
opacity: 1, display: block, visibility: visible

Issues:
  βœ— covered by another element (~60% covered)
    Covering: <div .modal-backdrop> (z-index: 9999)
  ⚠ needs scroll to bring into view

β†’ Call scroll_to_element before clicking
β†’ Element may be behind modal, overlay, or fixed header

query_selector

Test a selector and return detailed information about all matched elements. Essential for selector debugging and finding the right element to interact with. Returns compact text format with element tag, position, text content, visibility status, and interaction capability. Shows why elements are hidden (display:none, opacity:0, zero size). Supports testid shortcuts (e.g., 'testid:submit-button'). Use limit parameter to control how many matches to show (default: 10). NEW: Use onlyVisible parameter to filter results (true=visible only, false=hidden only, undefined=all).

  • Parameters:

    • selector (string, required): CSS selector, text selector, or testid shorthand to test (e.g., 'button.submit', 'testid:login-form', 'text=Sign In', 'dialog::button' to scope the lookup to the topmost open dialog/sheet)

    • limit (number, optional): Maximum number of elements to return detailed info for (default: 10, recommended max: 50)

    • onlyVisible (boolean, optional): Filter results by visibility: true = show only visible elements, false = show only hidden elements, undefined/not specified = show all elements (default: undefined)

    • showAttributes (string, optional): Comma-separated list of HTML attributes to display for each element (e.g., 'id,name,aria-label,href,type'). If not specified, attributes are not shown.

  • Output Format:

    • Header showing total matches (and filtered visible/hidden counts if requested).

    • For each match (up to limit):

      • Index with element tag and identifier (testid/id/class).

      • Position line: @ (x,y) widthxheight px.

      • Optional trimmed text content in quotes.

      • Optional listed attributes if requested.

      • Status line: βœ“ visible or βœ— hidden with reason (display:none, opacity:0, zero size); ⚑ interactive when applicable.

    • Footer with how many are shown vs omitted and a tip to increase limit.

  • Examples:

  • query_selector({ selector: 'a', limit: 3 })

  • query_selector({ selector: 'testid:submit', onlyVisible: true, showAttributes: 'href,aria-label' })

  • Example Output (query_selector({ selector: 'a', limit: 2 })):

Found 5 elements matching "a":

[0] <a #home-link>
    @ (16,12) 80x20px
    "Home"
    href: "/"
    βœ“ visible, ⚑ interactive

[1] <a class="nav-item">
    @ (104,12) 120x20px
    "Products"
    βœ“ visible, ⚑ interactive

Showing 2 of 5 matches (3 omitted)
Use limit parameter to show more: { selector: "a", limit: 5 }

get_test_ids

Discover all test identifiers on the page (data-testid, data-test, data-cy, etc.). Returns a compact text list grouped by attribute type. Essential for test-driven workflows and understanding what elements can be reliably selected. Use the returned test IDs with selector shortcuts like 'testid:submit-button'.

  • Parameters:

    • attributes (string, optional): Comma-separated list of test ID attributes to search for (default: 'data-testid,data-test,data-cy')

    • showAll (boolean, optional): If true, display all test IDs without truncation. If false (default), shows first 8 test IDs per attribute with a summary for longer lists.

  • Output Format:

    • 'Found N test IDs' header or 'Found 0 test IDs' with tips

    • For each attribute group: attribute name with count and a compact comma-separated list (or truncated with '... and X more')

    • Optional duplicate warnings: attribute:value appears N times

    • Suggestion block with best practices and usage tip for selector shortcuts

  • Examples:

  • get_test_ids({})

  • get_test_ids({ showAll: true })

  • get_test_ids({ attributes: 'data-testid,data-cy' })

  • Example Output (get_test_ids({})):

Found 5 test IDs:

data-testid (3):
  submit, email-input, password-input

data-cy (2):
  navbar, footer

πŸ’‘ Tip: Use these test IDs with selector shortcuts:
   testid:submit β†’ [data-testid="submit"]
  • Example Output (get_test_ids({ showAll: false })):

Found 14 test IDs:

data-testid (12):
  submit, email-input, password-input, remember-me, login-form, link-register, link-forgot, header-title,
  ... and 4 more
  πŸ’‘ Use showAll: true to see all 12 test IDs

data-cy (2):
  navbar, footer

measure_element

πŸ“ 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.

  • Parameters:

    • selector (string, required): CSS selector or testid shorthand (e.g., 'testid:submit', '#login-button')

  • Output Format:

    • Header: Element: <tag id/class/testid>

    • Position/size line: @ (x,y) widthxheight px

    • Box Model section: Content size, Padding (with directional arrows), Border (with arrows or shorthand), Margin (with arrows)

    • Total Space line: totalWidthxtotalHeight px (with margin)

    • Optional suggestion to run inspect_ancestors when unusual spacing detected

  • Examples:

  • measure_element({ selector: 'testid:card' })

  • measure_element({ selector: '#hero' })

  • Example Output (measure_element({ selector: 'testid:card' })):

Element: <div data-testid="card">
@ (240,320) 360x240px

Box Model:
  Content: 328x208px
  Padding: ↑16px ↓16px ←8px β†’8px
  Border:  none
  Margin:  ↑0px ↓24px ←0px β†’0px

Total Space: 360x264px (with margin)

find_by_text

Find elements by their text content. Essential for finding elements without good selectors, especially in poorly structured DOM. Returns elements with position, visibility, and interaction state. Supports exact match, case-sensitive search, and NEW: regex pattern matching for advanced text searching (e.g., '/\d+ items?/' to find elements with numbers).

  • Parameters:

    • text (string, required): Text to search for in elements. If regex=true, this can be a regex pattern in /pattern/flags format (e.g., '/\d+/i' for case-insensitive numbers) or a raw pattern string.

    • exact (boolean, optional): Whether to match text exactly (default: false, allows partial matches). Ignored if regex=true.

    • caseSensitive (boolean, optional): Whether search should be case-sensitive (default: false). Ignored if regex=true (use regex flags instead).

    • regex (boolean, optional): Whether to treat 'text' as a regex pattern (default: false). If true, supports /pattern/flags format or raw pattern. Examples: '/sign.*/i' (case-insensitive), '/\d+ items?/' (numbers + optional 's').

    • limit (number, optional): Maximum number of elements to return (default: 10)

  • Output Format:

    • Header showing 'No elements found ...' or 'Found N elements ...'

    • Up to limit results, each with:

      • <tag id/class/testid ...> line with key attributes

      • Position line: @ (x,y) widthxheight px

      • Trimmed text content (if any)

      • Visibility and interactability status

    • Footer shows how many are displayed vs omitted and how to increase limit

  • Examples:

  • find_by_text({ text: 'Sign in' })

  • find_by_text({ text: '/^Next \d+$/', regex: true })

  • find_by_text({ text: 'Delete', exact: true, caseSensitive: true })

  • Example Output (find_by_text({ text: 'Sign in' })):

Found 3 elements containing "Sign in":

[0] <button data-testid="primary-cta">
    @ (640,420) 120x40px
    "Sign in"
    βœ“ visible

[1] <a class="link" href="/signin">
    @ (600,480) 68x20px
    "Sign in"
    βœ“ visible, ⚑ interactive

[2] <div class="menu-item">
    @ (40,360) 200x24px
    "Sign in"
    βœ— hidden

Showing all 3 matches

element_exists

Quick check if an element exists on the page. Ultra-lightweight alternative to query_selector_all when you only need existence confirmation. Returns simple exists/not found status. Most common check before attempting interaction. Supports testid shortcuts.

  • Parameters:

    • selector (string, required): CSS selector, text selector, or testid shorthand (e.g., 'testid:submit-button', '#main')

  • Output Format:

    • Returns one line:

      • βœ“ exists: <tag id/class> (N matches) when found (N optional)

      • βœ— not found: when none

  • Examples:

  • element_exists({ selector: 'testid:submit' })

  • element_exists({ selector: '#does-not-exist' })

  • Example Output (element_exists({ selector: 'testid:submit' })):

βœ“ exists: <button data-testid="submit">
  • Example Output (element_exists({ selector: '.card' })):

βœ“ exists: <div .card> (3 matches)
  • Example Output (element_exists({ selector: '#does-not-exist' })):

βœ— not found: #does-not-exist

Navigation

go_history

Navigate browser history (back/forward). Returns: 'Navigated in browser history', a quick network-idle note if available, 'URL: ', and 'Title: ' when set. If console errors occur after the navigation, returns an error like 'Console error after history navigation: ' including Title when available.

  • Parameters:

    • direction (string, required): History direction to navigate

navigate

Navigate to a URL. Browser sessions (cookies, localStorage, sessionStorage) are automatically saved in ./.mcp-web-inspector/user-data directory and persist across restarts. To clear saved sessions, delete the directory.

  • Parameters:

    • url (string, required): URL to navigate to the website specified

    • browserType (string, optional): Browser type to use (chromium, firefox, webkit). Defaults to chromium

    • device (string, optional): Device preset to emulate. Uses device configurations for viewport, user agent, and device scale factor. When specified, overrides width/height parameters. Mobile: iphone-se, iphone-14, iphone-14-pro, pixel-5, ipad, samsung-s21. Desktop: desktop-1080p (1920x1080), desktop-2k (2560x1440), laptop-hd (1366x768).

    • width (number, optional): Viewport width in pixels. If not specified, automatically matches screen width. Ignored if device is specified.

    • height (number, optional): Viewport height in pixels. If not specified, automatically matches screen height. Ignored if device is specified.

    • timeout (number, optional): Navigation timeout in milliseconds

    • waitUntil (string, optional): Navigation wait condition

    • headless (boolean, optional): Run browser in headless mode (no visible window). Defaults to visible on desktop, headless on Linux without a display or when --headless is passed.

scroll_by

Scroll a container (or page) by a specific number of pixels. Auto-detects scroll direction when only one is available. Essential for: testing sticky headers/footers, triggering infinite scroll, carousel navigation, precise scroll position testing. Use 'html' or 'body' for page scrolling. Positive pixels = down/right, negative = up/left. Outputs: βœ“ success summary with axis position and percent of max scroll; ⚠️ boundary notice when movement is limited; ⚠️ ambiguous-direction guidance when both axes scroll; ⚠️ not-scrollable report with ancestor suggestions; πŸ’‘ follow-up tips matching the detected scenario.

  • Parameters:

    • selector (string, required): CSS selector of scrollable container (use 'html' or 'body' for page scroll, e.g., 'testid:chat-container', '.scrollable-list', 'html')

    • pixels (number, required): Number of pixels to scroll. Positive = down/right, negative = up/left. Example: 500, -200

    • direction (string, optional): Scroll direction: 'vertical' (default), 'horizontal', or 'auto' (detects available direction). Use 'auto' for smart detection.

scroll_to_element

Scroll an element into view. Automatically handles scrolling within the nearest scrollable ancestor (page or scrollable container). Essential for: making elements visible before interaction, triggering lazy-loaded content, testing scroll behavior. Position: start (top of viewport), center (middle), end (bottom). Default: start.

  • Parameters:

    • selector (string, required): CSS selector, text selector, or test ID (e.g., 'testid:submit-btn', '#login-button', 'text=Load More')

    • position (string, optional): Where to align element in viewport: 'start' (top), 'center' (middle), 'end' (bottom). Default: 'start'

Interaction

click

Click an element on the page

  • Parameters:

    • selector (string, required): CSS selector for the element to click. Supports 'testid:NAME' and 'dialog::SELECTOR' (scopes the lookup to the topmost open dialog/sheet, e.g. 'dialog::testid:confirm').

drag

Drag an element to a target location

  • Parameters:

    • sourceSelector (string, required): CSS selector for the element to drag

    • targetSelector (string, required): CSS selector for the target location

fill

fill an input/textarea/contenteditable; if the selector matches a wrapper, descends up to 4 levels to a unique fillable descendant (errors if zero or multiple)

  • Parameters:

    • selector (string, required): CSS selector for input field or its wrapper. Supports 'testid:NAME' and 'dialog::SELECTOR' (scopes to the topmost open dialog/sheet).

    • value (string, required): Value to fill

hover

Hover an element on the page

  • Parameters:

    • selector (string, required): CSS selector for element to hover

press_key

Press a keyboard key

  • Parameters:

    • key (string, required): Key to press (e.g. 'Enter', 'ArrowDown', 'a')

    • selector (string, optional): Optional CSS selector to focus before pressing key

select

Select an element on the page with Select tag

  • Parameters:

    • selector (string, required): CSS selector for element to select

    • value (string, required): Value to select

upload_file

Upload a file to an input[type='file'] element on the page

  • Parameters:

    • selector (string, required): CSS selector for the file input element

    • filePath (string, required): Absolute path to the file to upload

Content

get_html

[may return preview+token] ⚠️ RARELY NEEDED: Get raw HTML markup from the page (no rendering, just source code). Most tasks need structured inspection instead. ONLY use get_html for: (1) checking specific HTML attributes or element nesting, (2) analyzing markup structure, (3) debugging SSR/HTML issues. For structured tasks, use: inspect_dom() to understand page structure with positions, query_selector() to find and inspect elements, get_computed_styles() for CSS values. Auto-returns HTML if <2000 chars (small elements); if larger, returns a preview and a one-time token to fetch the full output. Scripts removed by default for security/size. Supports testid shortcuts.

  • Parameters:

    • selector (string, optional): CSS selector, text selector, or testid shorthand to limit HTML extraction to a specific container. Omit to get entire page HTML. Example: 'testid:main-content' or '#app'

    • clean (boolean, optional): Remove noise from HTML: false (default) = remove scripts only, true = remove scripts + styles + comments + meta tags for minimal markup

    • maxLength (number, optional): Maximum number of characters to return (default: 20000)

get_text

[may return preview+token] ⚠️ RARELY NEEDED: Get ALL visible text content from the entire page (no structure, just raw text). Most tasks need structured inspection instead. ONLY use get_text for: (1) extracting text for content analysis (word count, language detection), (2) searching for text when location is completely unknown, (3) text-only snapshots for comparison. For structured tasks, use: inspect_dom() to understand page structure, find_by_text() to locate specific text with context, query_selector() to find elements. Auto-returns text if <2000 chars (small elements); if larger, returns a preview and a one-time token to fetch the full output via confirm_output. Supports testid shortcuts and the dialog::SELECTOR scope to read inside the topmost open dialog/sheet.

  • Parameters:

    • selector (string, optional): CSS selector, text selector, or testid shorthand to limit text extraction to a specific container. Omit to get text from entire page. Examples: 'testid:article-body', '#main-content', 'dialog::section' (scopes lookup to the topmost open dialog/sheet β€” useful when a sheet covers ambiguous page chrome). Use bare 'dialog::' for the whole topmost dialog.

    • maxLength (number, optional): Maximum number of characters to return (default: 20000)

visual_screenshot_for_humans

[may return preview+token] πŸ“Έ VISUAL OUTPUT TOOL - Captures page/element appearance and saves to file. Essential for: visual regression testing, sharing with humans, confirming UI appearance (colors/fonts/images).

❌ WRONG: "Take screenshot to debug button alignment" βœ… RIGHT: "Use compare_element_alignment() - alignment in <100 tokens"

❌ WRONG: "Screenshot to check element visibility" βœ… RIGHT: "Use check_visibility() - instant visibility + diagnostics"

❌ WRONG: "Screenshot to inspect layout structure" βœ… RIGHT: "Use inspect_dom() - hierarchy with positions and visibility"

βœ… VALID: "Share with designer for feedback" βœ… VALID: "Visual regression check" βœ… VALID: "Confirm gradient/shadow rendering"

⚠️ Token cost: ~1,500 tokens to read. Structural tools: <100 tokens.

Screenshots saved to ./.mcp-web-inspector/screenshots. Example: { name: "login-page", fullPage: true } or { name: "submit-btn", selector: "testid:submit" }

  • Parameters:

    • name (string, required): Name for the screenshot file (without extension). Example: 'login-page' or 'error-state'

    • selector (string, optional): CSS selector or testid shorthand for element to screenshot. Example: '#submit-button' or 'testid:login-form'. Omit to capture full viewport.

    • fullPage (boolean, optional): Capture entire scrollable page instead of just viewport (default: false)

    • downloadsDir (string, optional): Custom directory for saving screenshot (default: ./.mcp-web-inspector/screenshots). Example: './my-screenshots'

Console

clear_console_logs

Clears captured console logs and returns the number of entries cleared.

get_console_logs

[may return preview+token] Retrieve console logs with filtering and token‑efficient output. Defaults: since='last-interaction', limit=20, format='grouped'. Grouped output deduplicates identical lines and shows counts. Use format='raw' for chronological, ungrouped lines. Large outputs return a preview and a one-time token to fetch the full payload.

  • Parameters:

    • type (string, optional): Type filter (all, error, warning, log, info, debug, exception). Note: 'error' also includes 'exception' entries for convenience.

    • search (string, optional): Text to search for in logs (handles text with square brackets)

    • limit (number, optional): Maximum entries to return (groups when grouped, lines when raw). Default: 20

    • since (string, optional): Filter logs since a specific event: 'last-call' (since last get_console_logs call), 'last-navigation' (since last page navigation), or 'last-interaction' (since last user interaction like click, fill, etc.). Default: 'last-interaction'

    • format (string, optional): Output format: 'grouped' (default, deduped with counts) or 'raw' (chronological, ungrouped)

Evaluation

evaluate

[may return preview+token] βš™οΈ CUSTOM JAVASCRIPT EXECUTION - Execute arbitrary JavaScript in the browser console and return a compact, token-efficient summary of the result. Single expressions return their value automatically; multi-statement scripts must use return. Includes a large-output preview guard with a one-time token. ⚠️ NOT for: scroll detection (inspect_dom shows 'scrollable ↕️'), element dimensions (use measure_element), DOM inspection (use inspect_dom), CSS properties (use get_computed_styles), position comparison (use compare_element_alignment). Use ONLY when specialized tools cannot accomplish the task. Automatically detects common patterns and suggests better alternatives.

  • Parameters:

    • script (string, required): JavaScript code to execute

  • Output Format:

    • Header: 'βœ“ JavaScript execution result:'

    • Default result: compact summary string (arrays/objects/dom nodes summarized)

    • Array summary: 'Array(n) [first, second, third…]' (shows first 3 items)

    • Object summary (large): 'Object(n keys): key1, key2, key3…' (top-level keys only)

    • DOM node summary: ' @ (x,y) WxH' (rounded ints)

    • NodeList/HTMLCollection summary: 'NodeList(n) [<div…>, <span…>, <a…>…]'

    • Preview guard when result is large (β‰₯ ~2000 chars):

      • 'Preview (first 500 chars):' followed by excerpt

      • Counts: 'totalLength: N, shownLength: M, truncated: true'

      • One-time token string to fetch full output

    • Suggestions block (conditional): compact tips for specialized tools based on script patterns

Network

get_request_details

[may return preview+token] Get detailed information about a specific network request by index (from list_network_requests). Returns request/response headers, body (truncated at 500 chars), timing, and size. Request bodies with passwords are automatically masked. If a request or response body exceeds 500 chars, includes a preview and a one-time confirm_output token that, when called, saves the full body to disk under ./.mcp-web-inspector/network-bodies/ and returns the file path(s). Essential for debugging API responses and investigating failed requests.

  • Parameters:

    • index (number, required): Index of the request from list_network_requests output (e.g., [0], [1], etc.)

list_network_requests

List recent network requests captured by the browser. Returns compact text format with method, URL, status, resource type, timing, and size. Essential for debugging API calls and performance issues. Use get_request_details() to inspect full headers and body for specific requests.

  • Parameters:

    • type (string, optional): Filter by resource type: 'xhr', 'fetch', 'script', 'stylesheet', 'image', 'font', 'document', etc. Omit to show all types.

    • limit (number, optional): Maximum number of requests to return, most recent first (default: 50)

Waiting

wait_for_element

Wait for an element to reach a specific state (visible, hidden, attached, detached). Better than sleep() for waiting on dynamic content. Returns duration and current element status. Supports testid shortcuts (e.g., 'testid:submit-button').

  • Parameters:

    • selector (string, required): CSS selector, text selector, or testid shorthand (e.g., 'testid:submit-button', '#loading-spinner')

    • state (string, optional): State to wait for: 'visible' (default), 'hidden', 'attached', 'detached'

    • timeout (number, optional): Maximum time to wait in milliseconds (default: 10000)

wait_for_network_idle

Wait for network activity to settle. Waits until there are no network connections for at least 500ms. Better than fixed delays when waiting for AJAX calls or dynamic content loading. Returns actual wait duration and confirmation of idle state.

  • Parameters:

    • timeout (number, optional): Maximum time to wait in milliseconds (default: 10000)

Lifecycle

close

Close the browser and release all resources

set_color_scheme

Set the browser color scheme that controls CSS prefers-color-scheme. Defaults to system appearance. Use before inspecting colors or taking screenshots. Options: system (clear override to follow OS/browser setting), dark, light, no-preference (simulate agents with no declared preference). Returns confirmation of the active scheme.

  • Parameters:

    • scheme (string, required): Color scheme to emulate: 'system', 'dark', 'light', or 'no-preference'. Example: { scheme: 'dark' }

Other

confirm_output

Return full output for a previously previewed large result using a one-time token. Use when a tool responded with a preview + token. Safer than resending original parameters.

  • Parameters:

    • token (string, required): One-time token obtained from a tool's preview response

    • reason (string, required): Explain why the full output is needed and how it will be used. This helps the user understand whether the action is reasonable and necessary.

  • Output Format:

    • Full original payload if token is valid (one-time)

    • Error: 'Invalid or expired token'

Selector Shortcuts ⭐ Time-Saver

All browser tools support convenient test ID shortcuts that save typing and improve readability:

Shorthand

Expands to

Saved Characters

testid:submit-button

[data-testid="submit-button"]

17 chars

data-test:login-form

[data-test="login-form"]

11 chars

data-cy:username

[data-cy="username"]

9 chars

Before (verbose):

click({ selector: '[data-testid="submit-button"]' })
fill({ selector: '[data-testid="email-input"]', value: 'user@example.com' })
check_visibility({ selector: '[data-testid="loading-spinner"]' })

After (with shortcuts):

click({ selector: 'testid:submit-button' })
fill({ selector: 'testid:email-input', value: 'user@example.com' })
check_visibility({ selector: 'testid:loading-spinner' })

Why this matters:

  • βœ… Cleaner, more readable tool calls - No need to escape quotes or remember bracket syntax

  • βœ… Works across all browser tools - Consistent syntax for click, fill, inspect_dom, etc.

  • βœ… Mix with other selectors - Regular CSS selectors still work: #login, .button, nav > a

All supported shortcuts:

  • testid:* β†’ [data-testid="*"]

  • data-test:* β†’ [data-test="*"]

  • data-cy:* β†’ [data-cy="*"] (Cypress convention)

Regular CSS selectors, text selectors (text=Login), and Playwright selectors work unchanged.

Example Use Cases

Debugging a Failing Test

1. navigate({ url: "https://example.com" })
2. query_selector({ selector: ".submit-button", limit: 5 })
   β†’ Found 3 matches, 2 are hidden (display:none)
3. check_visibility({ selector: ".submit-button:nth-child(1)" })
   β†’ Element is clipped by parent overflow:hidden
4. measure_element({ selector: ".submit-button:nth-child(1)" })
   β†’ @ (1500,300) 100x40px (outside viewport)

Understanding Page Structure

1. navigate({ url: "https://app.example.com" })
2. inspect_dom({})
   β†’ Shows: header, nav, main, aside, footer
3. inspect_dom({ selector: "main" })
   β†’ Shows: form[role=search], section.results, section.filters
4. get_test_ids({})
   β†’ Discovers: search-input, filter-dropdown, result-card

Validating Layout Consistency

1. navigate({ url: "https://dashboard.example.com" })
2. compare_positions({
     selector1: "testid:main-header",
     selector2: "testid:chat-header",
     checkAlignment: "top"
   })
   β†’ βœ“ Aligned (difference: 0px)
3. compare_positions({
     selector1: ".card:nth-child(1)",
     selector2: ".card:nth-child(2)",
     checkAlignment: "width"
   })
   β†’ βœ— Not aligned (difference: 15px)

Finding Elements Without Test IDs

1. find_by_text({ text: "Add to Cart", exact: false })
   β†’ Found 1 element: button.primary-action
2. get_computed_styles({
     selector: "button.primary-action",
     properties: "background-color,padding,font-size"
   })
   β†’ Shows: background-color: rgb(0,123,255), padding: 12px 24px

Cookbook: Common Workflows

These step-by-step recipes show how to chain tools together for common testing and debugging scenarios.

Recipe 1: Testing a Login Flow

1. navigate({ url: "https://app.example.com/login" })
2. fill({ selector: "testid:email-input", value: "user@example.com" })
3. fill({ selector: "testid:password-input", value: "password123" })
4. click({ selector: "testid:login-button" })
5. wait_for_network_idle()
6. get_console_logs({ type: "error" })
   β†’ Verify no JavaScript errors occurred
7. get_text()
   β†’ Verify success message or dashboard content

Why this works: Session persistence means you stay logged in for subsequent tests.

Recipe 2: Debugging Layout Issues

1. navigate({ url: "https://dashboard.example.com" })
2. inspect_dom({ selector: "testid:sidebar" })
   β†’ Understand the structure of the problematic area
3. measure_element({ selector: "testid:logo" })
   β†’ @ (20,10) 150x40px
4. measure_element({ selector: "testid:menu" })
   β†’ @ (20,60) 200x300px
5. compare_positions({
     selector1: "testid:logo",
     selector2: "testid:menu",
     checkAlignment: "left"
   })
   β†’ βœ“ aligned (both at x=20)
6. get_computed_styles({
     selector: "testid:sidebar",
     properties: "margin,padding,display,flex-direction"
   })
   β†’ Shows: display: flex, flex-direction: column, padding: 20px
  1. navigate({ url: "https://dashboard.example.com" })

  2. inspect_dom({ selector: "testid:sidebar" }) β†’ Understand the structure of the problematic area

  3. measure_element({ selector: "testid:logo" }) β†’ @ (20,10) 150x40px

  4. measure_element({ selector: "testid:menu" }) β†’ @ (20,60) 200x300px

  5. compare_positions({ selector1: "testid:logo", selector2: "testid:menu", checkAlignment: "left" }) β†’ βœ“ aligned (both at x=20)

  6. get_computed_styles({ selector: "testid:sidebar", properties: "margin,padding,display,flex-direction" }) β†’ Shows: display: flex, flex-direction: column, padding: 20px

Why this works: Progressive inspection + precise measurements reveal layout problems.

Recipe 2a: Finding Where Unexpected Margins Come From

1. navigate({ url: "https://app.example.com" })
2. inspect_dom({ selector: "main" })
   β†’ Shows header element with test ID
3. measure_element({ selector: "testid:event-mode-header" })
   β†’ @ (160,0) 896x56px
   β†’ Margin: ←160px β†’160px (unexpected!)
   πŸ’‘ Unexpected spacing detected. Check parent constraints
4. inspect_ancestors({ selector: "testid:event-mode-header" })
   β†’ [0] <header testid:event-mode-header>
       @ (160,0) 896x56px | w:896px max-w:896px m:0 160px
       border-bottom: 1px solid #e5e7eb
       ⚠ Auto margins centering (160px each side)
   β†’ [1] <div>
       @ (0,0) 1216x56px | w:1216px
   β†’ [2] <div> flex max-w-[1600px]
       @ (352,60) 1216x900px
       max-width: 1600px
       🎯 WIDTH CONSTRAINT
5. Solution: Remove mx-auto from header (centering already handled by parent)

Why this works: inspect_ancestors traces the layout constraint chain to find the root cause of unexpected spacing in deeply nested React components.

Recipe 3: API Response Testing

1. navigate({ url: "https://app.example.com/dashboard" })
2. click({ selector: "testid:refresh-button" })
3. wait_for_network_idle()
4. list_network_requests({ type: "fetch", limit: 10 })
   β†’ [5] GET /api/users 200 OK | 45ms
5. get_request_details({ index: 5 })
   β†’ Check headers, status, response body
6. get_console_logs({ type: "error" })
   β†’ Verify no network errors

Why this works: Network tools capture all requests for inspection after interactions.

Recipe 4: Finding Elements on Pages Without Test IDs

1. navigate({ url: "https://legacy-app.example.com" })
2. inspect_dom()
   β†’ Get overall page structure
3. get_test_ids()
   β†’ Check if any test IDs exist (spoiler: none)
4. find_by_text({ text: "submit", caseSensitive: false })
   β†’ Found 2 buttons containing "submit"
5. query_selector({ selector: "button", onlyVisible: true, limit: 10 })
   β†’ Shows all visible buttons with positions and text
6. element_exists({ selector: "button:has-text('Submit Form')" })
   β†’ βœ“ exists
7. click({ selector: "button:has-text('Submit Form')" })

Why this works: Multiple discovery tools (text search, query selector) help locate elements.

Recipe 5: Debugging "Element Not Visible" Errors

1. navigate({ url: "https://app.example.com" })
2. element_exists({ selector: "testid:submit" })
   β†’ βœ“ exists
3. check_visibility({ selector: "testid:submit" })
   β†’ βœ— not visible: clipped by parent overflow:hidden
4. inspect_dom({ selector: "form" })
   β†’ See parent container structure
5. get_computed_styles({
     selector: "form",
     properties: "overflow,height,max-height"
   })
   β†’ overflow: hidden, height: 300px, max-height: 300px
6. evaluate({ script: "document.querySelector('[data-testid=submit]').scrollIntoView()" })
   β†’ Scroll element into view
7. check_visibility({ selector: "testid:submit" })
   β†’ βœ“ visible
8. click({ selector: "testid:submit" })

Why this works: Visibility diagnostics reveal the exact reason, enabling targeted fixes.

Recipe 6: Visual Regression Testing

1. navigate({ url: "https://dashboard.example.com" })
2. compare_positions({
     selector1: "testid:header",
     selector2: "testid:footer",
     checkAlignment: "width"
   })
   β†’ βœ“ aligned (both 1280px)
3. compare_positions({
     selector1: ".card:nth-child(1)",
     selector2: ".card:nth-child(2)",
     checkAlignment: "height"
   })
   β†’ βœ— not aligned (difference: 20px)
4. measure_element({ selector: ".card:nth-child(1)" })
   β†’ @ (20,100) 400x300px
5. measure_element({ selector: ".card:nth-child(2)" })
   β†’ @ (440,100) 400x320px  ← 20px taller!

Why this works: Position comparison tools validate consistent spacing across components.

Recipe 7: Form Validation Testing

1. navigate({ url: "https://app.example.com/signup" })
2. fill({ selector: "testid:email", value: "invalid-email" })
3. fill({ selector: "testid:password", value: "short" })
4. click({ selector: "testid:submit" })
5. wait_for_element({ selector: ".error-message", state: "visible", timeout: 5000 })
6. find_by_text({ text: "invalid", caseSensitive: false })
   β†’ Found 2 elements: .error-message spans
7. get_text({ selector: ".error-message" })
   β†’ "Please enter a valid email address"
8. get_text({ selector: ".error-message" })
   β†’ Capture validation text for assertions

Why this works: Wait for element ensures validation messages appear before checking.

Recipe 8: Mobile Responsive Testing

1. navigate({
     url: "https://app.example.com",
     width: 375,
     height: 667
   })
   β†’ iPhone SE viewport
2. inspect_dom({ selector: "nav" })
   β†’ Check if mobile menu is used
4. element_exists({ selector: "testid:hamburger-menu" })
   β†’ βœ“ exists (mobile menu visible)
5. element_exists({ selector: "testid:desktop-menu" })
   β†’ βœ— not found (desktop menu hidden on mobile)
6. click({ selector: "testid:hamburger-menu" })
7. wait_for_element({ selector: "testid:mobile-nav", state: "visible" })
8. get_text({ selector: "testid:mobile-nav" })
   β†’ Snapshot of opened mobile menu content

Why this works: Viewport configuration in navigate enables mobile testing.

Recipe 9: Debugging Hover States

1. navigate({ url: "https://app.example.com" })
2. hover({ selector: "testid:tooltip-trigger" })
3. wait_for_element({ selector: "testid:tooltip", state: "visible", timeout: 2000 })
4. check_visibility({ selector: "testid:tooltip" })
   β†’ βœ“ visible
5. measure_element({ selector: "testid:tooltip" })
   β†’ @ (300,150) 200x50px
6. get_computed_styles({
     selector: "testid:tooltip",
     properties: "display,opacity,visibility,z-index"
   })
   β†’ display: block, opacity: 1, visibility: visible, z-index: 1000
7. check_visibility({ selector: "testid:tooltip" })
   β†’ Double-check that tooltip remains visible

Why this works: Hover tool + visibility checks validate tooltip behavior.

Recipe 10: Accessibility Audit

1. navigate({ url: "https://app.example.com" })
2. inspect_dom()
   β†’ Check for semantic HTML (header, nav, main, footer)
3. query_selector({
     selector: "[role]",
     showAttributes: "role,aria-label,aria-labelledby"
   })
   β†’ Shows all ARIA roles on page
4. find_by_text({ text: "button", regex: true })
   β†’ Find buttons by text (should have accessible labels)
5. query_selector({
     selector: "button",
     showAttributes: "aria-label,title"
   })
   β†’ Check if buttons have accessible labels
6. get_test_ids()
   β†’ Verify no duplicate test IDs (accessibility issue)

Why this works: DOM inspection + attribute queries reveal accessibility issues.

Troubleshooting

Browser Installation Issues

Symptom: Error message about Playwright browsers not being installed, or browser fails to launch.

How it works: Browsers are automatically installed on first use when you run any navigation tool. The installation happens once (~1GB download) and browsers are stored in your home directory, shared across all projects.

What you'll see on first use:

🎭 Playwright browsers not found. Installing automatically...
⏳ This will download ~1GB of browser binaries. Please wait...
[Installation progress...]
βœ… Browsers installed successfully! Starting browser...

If automatic installation fails (firewall, permissions, etc.):

# Manual installation - run this command:
npx playwright install chromium firefox webkit

# With system dependencies (requires admin/sudo):
npx playwright install --with-deps chromium firefox webkit

For GitHub Copilot / VS Code users:

  • First tool use will auto-install browsers (1-2 minute wait)

  • Subsequent uses are instant

  • Installation happens in the background with progress messages

  • If manual installation is needed, restart your IDE after running the command

Server Not Loading

Symptom: Tools from web-inspector are not available in your AI assistant.

Solutions:

  1. Verify the configuration file is correct (see AI Tool Setup section above)

  2. Restart your AI tool completely (not just reload window)

  3. Check server logs (location depends on your AI tool)

  4. Try removing and re-adding the server configuration

Permission Issues

Symptom: Permission denied errors when installing browsers.

Solutions:

# If using global installation, you may need sudo (Linux/macOS)
sudo npm install -g mcp-web-inspector

# Or use npx without global installation (recommended)
# Just configure with "npx -y mcp-web-inspector" as shown in setup

Browser Crashes or Disconnects

Symptom: Browser becomes unresponsive or disconnects during use.

The MCP server automatically handles this:

  • Detects disconnected browsers

  • Resets state and provides clear error messages

  • Instructs you to retry the navigation/action

  • No manual intervention needed - just retry your command

Development

Testing

npm test              # Run tests
npm run test:coverage # Run with coverage

Building

npm run build  # Compile TypeScript
npm run watch  # Watch mode for development

Technical Details

  • Protocol: Model Context Protocol (MCP)

  • Browser Engine: Playwright (Chromium, Firefox, WebKit)

  • Language: TypeScript

  • Node Version: 20+

Contributing

Contributions welcome! When adding new tools:

  1. Keep tool names short (some clients limit server_name:tool_name to 60 chars)

  2. Follow the atomic operation principle (one tool, one purpose)

  3. Use flat parameter structures with primitive types

  4. Add tests in src/__tests__/

License

MIT

Credits

This project is a focused fork of executeautomation/mcp-playwright, specializing in web inspection and debugging capabilities. We're grateful to the ExecuteAutomation team for creating the excellent foundation that made this project possible.

Key Differences:

  • Web Inspector MCP: Focused on inspection, debugging, and layout validation with clean tool names

  • Original mcp-playwright: Full-featured browser automation including code generation, API testing, and comprehensive interaction tools

If you need full Playwright automation capabilities (code generation, advanced interactions, API testing), check out the original mcp-playwright server.


Made for AI-assisted web development and testing πŸ€–

Available Tools

34 tools
check_visibilityA
Read-only

Check if an element is visible to the user. CRITICAL for debugging click/interaction failures. Returns detailed visibility information including viewport intersection, clipping by overflow:hidden, and whether element needs scrolling. Supports testid shortcuts (e.g., 'testid:submit-button').

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector, text selector, or testid shorthand (e.g., 'testid:login-button', '#submit', 'text=Click here')

TDQS

A4.5/5.0
Behavior5/5

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

The description goes beyond annotations (readOnlyHint) by detailing what the tool returns: viewport intersection, clipping details, and scrolling needs. This adds valuable behavioral context without contradicting annotations.

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?

The description is concise with three short sentences. It front-loads the purpose, then adds importance and return details, and finally parameter syntax. No unnecessary information.

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?

Given the simple tool (one parameter, read-only, no output schema), the description provides complete context: purpose, typical use case, return details, and supported selector formats. No gaps.

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?

Schema coverage is 100% and the description reinforces the parameter by giving an example ('testid:submit-button') and mentioning testid shortcuts. This adds marginal value beyond the schema.

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 checks element visibility with a specific verb ('Check') and resource ('an element is visible'). It distinguishes from siblings like element_exists (existence vs visibility) and click (action) by framing it as critical for debugging click/interaction failures.

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?

The description explicitly advises using this tool for debugging click/interaction failures, providing clear context. It does not explicitly state when not to use it or name alternatives, though siblings like element_exists are implied.

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

clear_console_logsA
Idempotent

Clears captured console logs and returns the number of entries cleared.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.2/5.0
Behavior4/5

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

Description discloses the mutation of state (clearing logs) and return value. IdempotentHint=true is consistent; the tool is idempotent. Adds value beyond annotations by specifying the return type.

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?

Single sentence that efficiently conveys the action and result. No wasted words.

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?

For a simple parameterless tool, the description covers purpose and return. Could mention that cleared logs are permanently lost, but annotations imply safe idempotent operation. Satisfactory given context.

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?

No parameters exist, so the description does not need to add meaning. Baseline of 4 is appropriate.

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 clears captured console logs and returns the count, using a specific verb and resource. It distinguishes itself from sibling 'get_console_logs' which likely reads without clearing.

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

Usage Guidelines3/5

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

No explicit guidance on when to use this tool versus alternatives like 'get_console_logs'. The description implies usage for clearing logs, but lacks context on prerequisites or consequences.

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

clickA

Click an element on the page

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector for the element to click. Supports 'testid:NAME' and 'dialog::SELECTOR' (scopes the lookup to the topmost open dialog/sheet, e.g. 'dialog::testid:confirm').

TDQS

A3.9/5.0
Behavior3/5

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

Annotations indicate non-readOnly and non-idempotent. Description does not elaborate on behavioral traits beyond the action (e.g., whether it triggers navigation, waits for element, etc.). Adequate but minimal.

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?

Single sentence, no unnecessary words. Efficiently communicates purpose.

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?

Given the tool's simplicity (1 required parameter, no output schema, no nested objects), the description is complete enough. No missing critical information.

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?

Schema description covers the selector parameter well with examples of special syntax. Since schema_description_coverage is 100%, baseline is 3; description adds no extra semantic value beyond schema.

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?

Description clearly states verb+resource: 'Click an element on the page'. Distinguishes from sibling tools like fill, hover, select, etc.

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

Usage Guidelines3/5

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

No explicit when-to-use or when-not-to-use guidance. Usage is implied by the name and description, but no alternatives or exclusions are mentioned.

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

closeA
Idempotent

Close the browser and release all resources

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.1/5.0
Behavior3/5

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

Annotations provide idempotentHint and readOnlyHint, but description adds little behavioral context beyond 'release all resources.' No contradictions.

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?

Single concise sentence front-loading the action and outcome; no unnecessary words.

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?

For a parameterless tool with clear annotations, the description fully covers the operation without needing details about return values (no output schema).

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?

No parameters, so schema coverage is 100%. Description adds no param meaning beyond schema, which is sufficient for zero-param tools.

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 closes the browser and releases resources, distinguishing it from siblings like navigate or click.

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

Usage Guidelines3/5

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

No explicit guidance on when to use this tool versus alternatives, but the purpose is clear and usage is implied as the final cleanup step.

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

compare_element_alignmentA
Read-only

COMPARE TWO ELEMENTS: Get comprehensive alignment and dimension comparison in one call. Shows edge alignment (top, left, right, bottom), center alignment (horizontal, vertical), and dimensions (width, height). Perfect for debugging 'are these headers aligned?' or 'do these panels match?'. Returns all alignment info with βœ“/βœ— symbols and pixel differences. For parent-child centering, use inspect_dom() instead (automatically shows if children are centered in parent). More efficient than evaluate() with manual getBoundingClientRect() calculations.

ParametersJSON Schema
NameRequiredDescriptionDefault
selector1YesCSS selector, text selector, or testid shorthand for the first element (e.g., 'testid:main-header', '#header')
selector2YesCSS selector, text selector, or testid shorthand for the second element (e.g., 'testid:chat-header', '#secondary-header')

TDQS

A4.5/5.0
Behavior4/5

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

Annotations indicate read-only. Description adds transparency by detailing output format (βœ“/βœ— symbols and pixel differences), beyond what annotations provide.

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?

Description is concise (three sentences), front-loaded with purpose in bold, and efficiently includes usage guidance and output details.

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?

No output schema, but description explains output content (symbols, pixel differences) and use cases. For a simple tool with two parameters, it is complete.

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?

Schema has 100% coverage with parameter descriptions. The description does not add significant extra semantics beyond the schema, but it provides context for the parameters' role in alignment comparison.

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 function: comparing two elements for alignment and dimensions. It lists specific attributes (edge alignment, center alignment, dimensions) and distinguishes from siblings like inspect_dom and evaluate.

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?

Explicitly provides when to use (debugging alignment) and when not to (parent-child centering, refer to inspect_dom). Also notes efficiency over evaluate().

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

confirm_outputA
Read-only

Return full output for a previously previewed large result using a one-time token. Use when a tool responded with a preview + token. Safer than resending original parameters.

ParametersJSON Schema
NameRequiredDescriptionDefault
tokenYesOne-time token obtained from a tool's preview response
reasonYesExplain why the full output is needed and how it will be used. This helps the user understand whether the action is reasonable and necessary.

TDQS

A4.3/5.0
Behavior4/5

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

Annotations declare readOnlyHint=true, indicating no side effects. Description aligns by stating it returns output and uses a one-time token. However, it could mention what happens if the token is invalid or expires, which would add further transparency.

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, no redundant information. Every sentence serves a purpose: stating the action and providing usage guidance. Front-loaded with the main verb.

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

Completeness3/5

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

The description lacks details about the return format or content of the 'full output'. Since there is no output schema, the description should specify what the output looks like or at least give a hint. This gap reduces completeness.

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?

Schema coverage is 100% and descriptions for both parameters are already clear. The description does not add additional meaning beyond what the schema provides, so baseline of 3 is appropriate.

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?

Description clearly states the action: returning full output using a one-time token from a preview. It specifies the trigger condition and distinguishes from siblings by mentioning preview/token context, which none of the sibling tools address.

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?

Explicitly instructs when to use: when a tool responded with a preview + token. Also provides a rationale ('Safer than resending original parameters'), helping the agent decide between alternatives.

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

dragC

Drag an element to a target location

ParametersJSON Schema
NameRequiredDescriptionDefault
sourceSelectorYesCSS selector for the element to drag
targetSelectorYesCSS selector for the target location

TDQS

C2.9/5.0
Behavior2/5

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

Annotations already indicate mutation (readOnlyHint=false) and non-idempotency (idempotentHint=false). The description adds minimal behavioral context, not disclosing side effects or error handling.

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 a single, front-loaded sentence with no wasted words. However, it lacks additional structural elements that could improve clarity.

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

Completeness3/5

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

For a simple tool with two string parameters and no output schema, the description is functional but incomplete. It could mention success/error behavior or return value expectations.

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?

Schema description coverage is 100% with clear parameter descriptions (CSS selectors). The tool description does not add any further semantics beyond the schema, so baseline score applies.

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

Purpose4/5

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

The description clearly states the action ('Drag an element to a target location') and the resource (CSS selectors). It is distinct from sibling tools like click or hover, but could be more specific about the drag-and-drop nature.

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

Usage Guidelines2/5

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

No guidance is provided on when to use this tool versus alternatives, nor are prerequisites or limitations mentioned (e.g., element visibility, potential failure conditions).

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

element_existsA
Read-only

Quick check if an element exists on the page. Ultra-lightweight alternative to query_selector_all when you only need existence confirmation. Returns simple exists/not found status. Most common check before attempting interaction. Supports testid shortcuts.

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector, text selector, or testid shorthand (e.g., 'testid:submit-button', '#main')

TDQS

A4.5/5.0
Behavior4/5

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

Annotations already declare readOnlyHint=true. Description adds context: 'ultra-lightweight', 'returns simple exists/not found status', and 'supports testid shortcuts', which are beyond the annotations. No contradictions.

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?

Four concise sentences, all earning their place. Front-loaded with core purpose. No fluff.

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?

For a simple tool with one parameter and no output schema, description covers purpose, alternatives, return format, and common use case. Highly complete.

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?

Schema coverage is 100% with detailed description. Description repeats the same info but adds examples like 'testid:submit-button'. Baseline 3 is appropriate as description adds marginal value.

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?

Clearly states verb 'check' and resource 'element existence'. Distinguishes from sibling 'query_selector_all' by labeling itself 'ultra-lightweight'. Mentions testid shortcuts, adding specificity.

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?

Explicitly says it's an alternative to query_selector_all when only existence confirmation is needed, and that it's a common check before interaction. Provides clear when-to-use guidance.

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

evaluateA

[may return preview+token] βš™οΈ CUSTOM JAVASCRIPT EXECUTION - Execute arbitrary JavaScript in the browser console and return a compact, token-efficient summary of the result. Single expressions return their value automatically; multi-statement scripts must use return. Includes a large-output preview guard with a one-time token. ⚠️ NOT for: scroll detection (inspect_dom shows 'scrollable ↕️'), element dimensions (use measure_element), DOM inspection (use inspect_dom), CSS properties (use get_computed_styles), position comparison (use compare_element_alignment). Use ONLY when specialized tools cannot accomplish the task. Automatically detects common patterns and suggests better alternatives.

ParametersJSON Schema
NameRequiredDescriptionDefault
scriptYesJavaScript code to execute

TDQS

A4.5/5.0
Behavior4/5

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

Annotations provide readOnlyHint=false and openWorldHint=true; description adds details like return value preview guard, token efficiency, and auto-detection of alternative tools, going beyond annotations to clarify behavior.

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?

Description is front-loaded with core purpose and uses clear bullet-point structure, though it could be slightly more concise without losing essential details.

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?

Given the complexity of arbitrary JS execution, description covers usage guidelines, alternatives, and behavioral traits adequately. Lacks explicit error handling details but sufficient for agent selection.

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 covers the 'script' parameter 100%, but description adds critical usage notes (single vs multi-statement, return requirement) that enhance understanding beyond schema.

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?

Description clearly states 'Execute arbitrary JavaScript in the browser console' and lists exclusions for sibling tools (scroll detection, element dimensions, etc.), making the purpose highly specific and distinguishable.

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?

Explicitly states when NOT to use the tool by listing sibling tools for common tasks and concludes 'Use ONLY when specialized tools cannot accomplish the task,' providing strong decision support.

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

fillA

fill an input/textarea/contenteditable; if the selector matches a wrapper, descends up to 4 levels to a unique fillable descendant (errors if zero or multiple)

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector for input field or its wrapper. Supports 'testid:NAME' and 'dialog::SELECTOR' (scopes to the topmost open dialog/sheet).
valueYesValue to fill

TDQS

A4.5/5.0
Behavior5/5

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

The description discloses critical behaviors beyond annotations: it describes the wrapper descent logic (up to 4 levels), error conditions for zero or multiple fillable descendants, and the supported element types. No contradiction with annotations (readOnlyHint=false, idempotentHint=false).

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?

The description is a single, well-structured sentence that front-loads the core purpose ('fill an input/textarea/contenteditable') and appends essential behavioral details. Every phrase earns its place, with zero wasted words.

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?

Given the low complexity (2 parameters, no output schema, no nested objects), the description is fully adequate. It covers the core action, target elements, wrapper handling, and error conditions. No missing details are needed for correct agent usage.

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?

Schema coverage is 100%, so baseline is 3. The description adds behavioral context for the 'selector' parameter (wrapper descent) but does not add meaning beyond the schema for the 'value' parameter. While helpful, it doesn't significantly elevate parameter understanding beyond what the schema already provides.

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 'fill an input/textarea/contenteditable', specifying the verb and resource types. It distinguishes from siblings like 'click', 'select', and 'press_key' by focusing on filling form fields. The additional detail about wrappers and descent behavior further clarifies its purpose.

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?

The description implies usage for filling text inputs and handles wrapper selectors with a descent strategy. While it doesn't explicitly list alternatives, the concise phrasing and context make it clear when to use this tool versus siblings (e.g., use 'fill' for text, 'click' for buttons). A small deduction for missing explicit when-not-to-use guidance.

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

find_by_textA
Read-only

Find elements by their text content. Essential for finding elements without good selectors, especially in poorly structured DOM. Returns elements with position, visibility, and interaction state. Supports exact match, case-sensitive search, and NEW: regex pattern matching for advanced text searching (e.g., '/\d+ items?/' to find elements with numbers).

ParametersJSON Schema
NameRequiredDescriptionDefault
textYesText to search for in elements. If regex=true, this can be a regex pattern in /pattern/flags format (e.g., '/\d+/i' for case-insensitive numbers) or a raw pattern string.
exactNoWhether to match text exactly (default: false, allows partial matches). Ignored if regex=true.
caseSensitiveNoWhether search should be case-sensitive (default: false). Ignored if regex=true (use regex flags instead).
regexNoWhether to treat 'text' as a regex pattern (default: false). If true, supports /pattern/flags format or raw pattern. Examples: '/sign.*/i' (case-insensitive), '/\d+ items?/' (numbers + optional 's').
limitNoMaximum number of elements to return (default: 10)

TDQS

A4.4/5.0
Behavior4/5

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

The description discloses the tool's return information (position, visibility, interaction state) and mentions support for exact match, case-sensitive search, and regex. This adds behavioral context beyond the readOnlyHint annotation, which already indicates safety. No contradictions. Slight gap: no mention of error handling or behavior with no matches.

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?

The description is concise (4 sentences), each sentence adds value. It front-loads the core purpose, then provides usage guidance, return behavior, and supported features. No unnecessary words. Excellent structure.

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?

The description adequately covers the tool's purpose, return data, and matching options. Given the complexity of 5 parameters and no output schema, it is reasonably complete. However, it could mention edge cases like no matches or performance implications, which would make it more robust.

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?

With 100% schema description coverage, the bar for parameter value is higher. The description adds extra context with examples and the 'NEW' regex capability, which enriches the schema's descriptions. It explains the interplay between exact, caseSensitive, and regex, going beyond what the schema states.

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 finds elements by text content, which is a specific verb and resource. It distinguishes itself from selector-based tools by noting its utility for poorly structured DOM, and mentions returns of position, visibility, and interaction state. This differentiates it from siblings like get_text or element_exists.

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?

The description explicitly advises using this tool when 'without good selectors' and in 'poorly structured DOM,' which provides clear usage context. However, it does not explicitly list when not to use it or name alternative tools, so it falls short of a perfect score.

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

get_computed_stylesA
Read-only

INSPECT CSS PROPERTIES: Get computed CSS values for specific properties (display, position, width, etc.). Use when you need raw CSS values or specific properties not shown by measure_element(). Returns styles grouped by category (Layout, Visibility, Spacing, Typography). For box model visualization (padding/margin), use measure_element() instead.

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector, text selector, or testid shorthand (e.g., 'testid:submit-button', '#main')
propertiesNoComma-separated list of CSS properties to retrieve (e.g., 'display,width,color'). If not specified, returns common layout properties: display, position, width, height, opacity, visibility, z-index, overflow, margin, padding, font-size, font-weight, color, background-color

TDQS

A4.9/5.0
Behavior5/5

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

Annotations confirm readOnlyHint=true. Description adds context that results are grouped by category (Layout, Visibility, Spacing, Typography), which informs the agent about output structure. No contradictions.

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?

Four sentences, all essential. First sentence is an imperative summary, followed by usage guidance and alternative. No wasted words.

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?

Two required parameters fully described in schema. No output schema, but description mentions grouping categories. All relevant context for selection and invocation is present.

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 100% with parameter descriptions. Tool description adds the default properties list (e.g., 'display,width,height,...') beyond the schema's shorter description, providing extra clarity.

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?

Description starts with a strong, specific 'INSPECT CSS PROPERTIES' and clearly defines the action: 'Get computed CSS values for specific properties'. It identifies the resource (CSS properties of an element) and distinguishes from sibling 'measure_element()'.

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?

Explicitly states when to use ('when you need raw CSS values or specific properties not shown by measure_element()') and when not to ('For box model visualization... use measure_element() instead'), providing clear guidance.

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

get_console_logsA
Read-only

[may return preview+token] Retrieve console logs with filtering and token‑efficient output. Defaults: since='last-interaction', limit=20, format='grouped'. Grouped output deduplicates identical lines and shows counts. Use format='raw' for chronological, ungrouped lines. Large outputs return a preview and a one-time token to fetch the full payload.

ParametersJSON Schema
NameRequiredDescriptionDefault
typeNoType filter (all, error, warning, log, info, debug, exception). Note: 'error' also includes 'exception' entries for convenience.
searchNoText to search for in logs (handles text with square brackets)
limitNoMaximum entries to return (groups when grouped, lines when raw). Default: 20
sinceNoFilter logs since a specific event: 'last-call' (since last get_console_logs call), 'last-navigation' (since last page navigation), or 'last-interaction' (since last user interaction like click, fill, etc.). Default: 'last-interaction'
formatNoOutput format: 'grouped' (default, deduped with counts) or 'raw' (chronological, ungrouped)

TDQS

A4.7/5.0
Behavior5/5

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

Discloses key behaviors: token mechanism for large outputs, deduplication in grouped mode, and default parameter values. Consistent with 'readOnlyHint: true' annotation, and adds behavioral context beyond annotations.

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?

Four concise sentences, front-loaded with key information (preview+token). Each sentence adds essential detail without redundancy. No fluff or unnecessary words.

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?

Despite lacking an output schema, the description fully explains return behavior (preview+token, grouped vs raw), defaults, and parameter effects. An agent can effectively use this tool with the provided information.

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 covers all 5 parameters with descriptions (100% coverage). The description adds value by stating defaults for 'limit', 'since', and 'format', and clarifying the meaning of 'since' values (e.g., 'last-interaction'). This goes beyond the schema's parameter descriptions.

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 'Retrieve console logs with filtering and token-efficient output', specifying the verb 'Retrieve', the resource 'console logs', and key features. It distinguishes from siblings like 'clear_console_logs' and other DOM/network tools.

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?

Provides clear usage context: explains the two formats ('grouped' vs 'raw'), the 'since' options, and defaults. Does not explicitly mention when not to use this tool or compare to alternatives, but covers enough guidance for appropriate use.

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

get_htmlA
Read-only

[may return preview+token] ⚠️ RARELY NEEDED: Get raw HTML markup from the page (no rendering, just source code). Most tasks need structured inspection instead. ONLY use get_html for: (1) checking specific HTML attributes or element nesting, (2) analyzing markup structure, (3) debugging SSR/HTML issues. For structured tasks, use: inspect_dom() to understand page structure with positions, query_selector() to find and inspect elements, get_computed_styles() for CSS values. Auto-returns HTML if <2000 chars (small elements); if larger, returns a preview and a one-time token to fetch the full output. Scripts removed by default for security/size. Supports testid shortcuts.

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorNoCSS selector, text selector, or testid shorthand to limit HTML extraction to a specific container. Omit to get entire page HTML. Example: 'testid:main-content' or '#app'
cleanNoRemove noise from HTML: false (default) = remove scripts only, true = remove scripts + styles + comments + meta tags for minimal markup
maxLengthNoMaximum number of characters to return (default: 20000)

TDQS

A4.6/5.0
Behavior4/5

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

Annotations already declare readOnlyHint and openWorldHint. Description adds key behaviors: 'may return preview+token' for large output, 'Scripts removed by default for security/size', and auto-return condition for small HTML. No contradictions.

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?

Front-loaded with warning and purpose. Structure is logical: usage guidelines, return behavior, security note. Slightly verbose but each sentence adds value; could be tightened slightly.

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?

Given no output schema, the description fully covers return value behavior (auto-return vs. preview+token). Explains script removal and testid shortcuts. Sufficient for all 3 optional parameters and edge cases.

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 covers 100% of parameters. Description adds value with examples (e.g., 'testid:main-content') and clarifies the default behavior of the clean parameter ('default = remove scripts only'). Does not merely restate schema.

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 'Get raw HTML markup from the page (no rendering, just source code).' It specifies the resource (HTML) and action (get) with precise scope, distinguishing it from siblings like inspect_dom and query_selector.

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?

Explicit usage guidance: 'RARELY NEEDED' and lists three specific use cases. Clearly states when NOT to use it and provides alternative tools (inspect_dom, query_selector, get_computed_styles) for structured tasks.

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

get_request_detailsA
Read-only

[may return preview+token] Get detailed information about a specific network request by index (from list_network_requests). Returns request/response headers, body (truncated at 500 chars), timing, and size. Request bodies with passwords are automatically masked. If a request or response body exceeds 500 chars, includes a preview and a one-time confirm_output token that, when called, saves the full body to disk under ./.mcp-web-inspector/network-bodies/ and returns the file path(s). Essential for debugging API responses and investigating failed requests.

ParametersJSON Schema
NameRequiredDescriptionDefault
indexYesIndex of the request from list_network_requests output (e.g., [0], [1], etc.)

TDQS

A4.8/5.0
Behavior5/5

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

The description discloses several behavioral details not covered by annotations: truncation at 500 chars, password masking, preview+token mechanism for saving full bodies, and the role of the confirm_output tool. Annotations only indicate readOnlyHint=true and openWorldHint=false, so the description adds substantial value.

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?

The description is well-structured and concise, with each sentence adding value. It opens with an important hint about the preview+token, then covers main functionality, truncation, masking, token usage, and the use case. No redundant or unnecessary information.

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?

Given the tool's simplicity (1 parameter, no output schema, annotations present), the description is complete. It explains return values (headers, body, timing, size), special behaviors (masking, truncation, preview+token), and the use case for debugging. It adequately covers what an agent needs to know to use the tool correctly.

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

Parameters5/5

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

The input schema covers the single parameter 'index' with 100% description coverage. The description adds context by explaining how to obtain the index from list_network_requests output and provides an example format, enhancing usability beyond the schema.

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: 'Get detailed information about a specific network request by index (from list_network_requests).' It specifies the verb ('Get detailed information'), the resource ('network request'), and the source of the index, effectively distinguishing it from sibling tools like list_network_requests.

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?

The description provides clear usage context: 'Essential for debugging API responses and investigating failed requests.' It implicitly links to list_network_requests as a prerequisite. While it does not explicitly state when not to use the tool or list alternatives, the context is well-defined and the tool's specificity makes misuse unlikely.

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

get_test_idsA
Read-only

Discover all test identifiers on the page (data-testid, data-test, data-cy, etc.). Returns a compact text list grouped by attribute type. Essential for test-driven workflows and understanding what elements can be reliably selected. Use the returned test IDs with selector shortcuts like 'testid:submit-button'.

ParametersJSON Schema
NameRequiredDescriptionDefault
attributesNoComma-separated list of test ID attributes to search for (default: 'data-testid,data-test,data-cy')
showAllNoIf true, display all test IDs without truncation. If false (default), shows first 8 test IDs per attribute with a summary for longer lists.

TDQS

A4.7/5.0
Behavior5/5

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

The description discloses behavioral traits beyond annotations: it returns a compact text list grouped by attribute type, and explains the truncation behavior controlled by the showAll parameter. This aligns with the readOnlyHint=true annotation, and there is no contradiction.

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?

The description consists of three concise sentences: the first states the action, the second describes the output format, and the third provides usage context. Every sentence adds value without redundancy.

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?

Given the tool's simplicity, no output schema, and the presence of annotation reading hints, the description fully covers the return format, parameter effects, and use case. No gaps remain for an AI agent to invoke the tool correctly.

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?

The input schema has 100% coverage with descriptions for both parameters. The description adds value by explaining the default attributes and the effect of showAll (truncation vs. full list), going beyond the schema.

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: discovering all test identifiers (specific attribute types) on the page. It uses a specific verb and resource, and it distinguishes itself from sibling tools by focusing on test IDs, which no other sibling explicitly does.

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?

The description indicates the tool is essential for test-driven workflows and selecting reliable elements, providing clear context for when to use. It also mentions using the returned IDs with selector shortcuts. However, it does not explicitly state when not to use or mention alternative tools.

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

get_textA
Read-only

[may return preview+token] ⚠️ RARELY NEEDED: Get ALL visible text content from the entire page (no structure, just raw text). Most tasks need structured inspection instead. ONLY use get_text for: (1) extracting text for content analysis (word count, language detection), (2) searching for text when location is completely unknown, (3) text-only snapshots for comparison. For structured tasks, use: inspect_dom() to understand page structure, find_by_text() to locate specific text with context, query_selector() to find elements. Auto-returns text if <2000 chars (small elements); if larger, returns a preview and a one-time token to fetch the full output via confirm_output. Supports testid shortcuts and the dialog::SELECTOR scope to read inside the topmost open dialog/sheet.

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorNoCSS selector, text selector, or testid shorthand to limit text extraction to a specific container. Omit to get text from entire page. Examples: 'testid:article-body', '#main-content', 'dialog::section' (scopes lookup to the topmost open dialog/sheet β€” useful when a sheet covers ambiguous page chrome). Use bare 'dialog::' for the whole topmost dialog.
maxLengthNoMaximum number of characters to return (default: 20000)

TDQS

A4.9/5.0
Behavior5/5

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

Beyond annotations (readOnlyHint=true, openWorldHint=false), the description reveals critical behaviors: auto-return for small text (<2000 chars), preview+token mechanism for larger text, support for testid shortcuts, and the dialog::SELECTOR scope. No contradiction with annotations.

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?

The description is front-loaded with a warning and purpose, then organized into bullet-like use cases and alternatives. Each sentence serves a distinct purpose: warning, purpose, use cases, alternatives, algorithmic behavior, and supported scopes. It's dense but not verbose.

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?

Despite no output schema, the description fully explains the tool's behavior: how text is returned (preview+token for large), default thresholds, and scoping options. It addresses edge cases (small vs large elements) and provides enough context for an agent to use it correctly alongside siblings.

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 100% with both parameters documented. The description adds practical context (e.g., 'Examples: testid:article-body', 'Use bare dialog:: for the whole topmost dialog') and mentions default maxLength (20000). While schema already covers parameter roles, the examples enhance usability.

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 extracts all visible text from the entire page without structure. It explicitly calls out the tool's purpose and distinguishes it from sibling tools like inspect_dom, find_by_text, and query_selector by naming specific use cases where get_text is appropriate.

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 provides explicit guidance on when to use this tool (three enumerated use cases) and when not to use it (structured tasks), with direct references to alternative sibling tools. The warning '⚠️ RARELY NEEDED' sets clear expectations.

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

go_historyB
Idempotent

Navigate browser history (back/forward). Returns: 'Navigated in browser history', a quick network-idle note if available, 'URL: ', and 'Title: ' when set. If console errors occur after the navigation, returns an error like 'Console error after history navigation: ' including Title when available.

ParametersJSON Schema
NameRequiredDescriptionDefault
directionYesHistory direction to navigate

TDQS

B3.4/5.0
Behavior4/5

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

Explicitly describes return values including a network-idle note and console error handling, which adds context beyond annotations. However, it does not mention behavior when history stack is empty or after multiple idempotent calls (consistent with annotations but still a gap).

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?

Concise, front-loaded with purpose, and includes essential return details. Every sentence adds value, though the listing of return fields could be more compact.

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

Completeness3/5

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

Adequate for a simple 1-parameter tool with no output schema. Missing edge cases like empty history or unsupported direction (though schema validation covers it). Sompleteness is acceptable but not exhaustive.

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?

Schema coverage is 100% and includes an enum, so the schema already fully defines the direction. Description adds no extra meaning beyond repeating 'back/forward'. Baseline score of 3 is appropriate.

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

Purpose4/5

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

Clearly states it navigates browser history with 'back' or 'forward', and the name is self-explanatory. However, it does not differentiate from sibling tools like 'navigate' or 'scroll_by', leaving ambiguity about when to use this specific tool.

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

Usage Guidelines2/5

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

No guidance on when to use this tool instead of 'navigate' (which goes to URLs) or 'scroll_by'. Does not specify conditions like when history is empty or edge cases.

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

hoverA

Hover an element on the page

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector for element to hover

TDQS

A3.6/5.0
Behavior3/5

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

Annotations already indicate non-read-only behavior, but the description does not add details about side effects (e.g., triggering hover CSS states). Adequate but minimal extra value.

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?

Extremely concise and to the point, no unnecessary words.

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?

For a simple one-parameter tool with annotations, the description is adequate though it could optionally mention that hovering triggers CSS pseudo-classes.

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?

Schema coverage is 100% and the parameter description is sufficient; the tool description does not add additional meaning beyond the schema.

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 action ('Hover') and the resource ('an element on the page'), distinguishing it from sibling tools like click or drag.

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

Usage Guidelines2/5

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

No guidance on when to use hover versus alternatives such as click, nor any exclusions or prerequisites.

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

inspect_ancestorsA
Read-only

DEBUG LAYOUT CONSTRAINTS: Walk up the DOM tree to find where width constraints, margins, borders, and overflow clipping come from. Shows for each ancestor: position/size, width constraints (w, max-w, min-w), margins with directional arrows (↑↓←→ format), padding, display type, borders (directional if non-uniform), overflow (πŸ”’=hidden, ↕️=scroll), flexbox context (flex direction justify items gap), grid context (cols rows gap), position/z-index/transform when set. Automatically detects horizontal centering via auto margins and flags clipping points (🎯). Essential for debugging unexpected centering, constrained width, or clipped content. Default: 10 ancestors (reaches in most React apps), max: 15. Use after inspect_dom() to understand parent layout constraints.

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector or testid shorthand for the element to start from (e.g., 'testid:header', '#main')
limitNoMaximum number of ancestors to traverse (default: 10, max: 15). Increase for deeply nested component frameworks.

TDQS

A4.8/5.0
Behavior5/5

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

Despite readOnlyHint=true, the description adds rich behavioral details: position/size, constraints, margins with arrows, padding, display, borders, overflow, flexbox/grid context, auto centering detection, clipping flags, default/max limits. Exceeds annotation information.

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?

Description is relatively long but efficiently packs many details. Front-loaded with core purpose. Every sentence adds value, though slightly verbose for a debug tool, it remains clear and structured.

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?

Without output schema, description fully specifies what the tool returns: a list of ancestors with various properties. Covers all vital aspects for a layout debugging tool, leaving no ambiguity.

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 100%, so baseline is 3. Description adds context for limit parameter (increase for deeply nested frameworks) and clarifies selector usage, providing extra value beyond schema descriptions.

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 walks up the DOM tree to find layout constraints, with specific details on what it shows. It distinguishes itself from siblings like inspect_dom by focusing on ancestors and layout debugging.

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?

Explicitly states it's essential for debugging unexpected centering, constrained width, or clipped content, and recommends using it after inspect_dom. Provides clear when-to-use guidance.

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

inspect_domA
Read-only

πŸ” PRIMARY INSPECTION TOOL - START HERE FOR LAYOUT DEBUGGING: Progressive DOM inspection that shows parent-child relationships, centering issues, spacing gaps, and scrollable containers. Skips wrapper divs and shows only semantic elements (header, nav, main, form, button, elements with test IDs, ARIA roles, etc.).

WORKFLOW: Call without selector for page overview, then drill down by calling with child's selector.

DETECTS: Scrollable containers (shows "scrollable ↕️ 36px" when scrollHeight > clientHeight), parent-relative positioning, vertical/horizontal centering, sibling spacing gaps, layout patterns.

OUTPUT FORMAT:

[0] <button data-testid="menu">
    @ (16,8) 40Γ—40px                         ← Absolute viewport position (x,y) and size
    from edges: ←16px β†’1144px ↑8px ↓8px      ← Distance from parent edges (↑8px = ↓8px means vertically centered)
    "Menu"
    βœ“ visible, ⚑ interactive

[1] <div data-testid="title">
    @ (260,2) 131Γ—28px
    from edges: ←244px β†’244px ↑2px ↓42px     ← Equal left/right (244px) = horizontally centered, unequal top/bottom = NOT vertically centered
    gap from [0]: β†’16px                      ← Spacing between siblings
    "Title"
    βœ“ visible, 2 children

SYMBOLS: βœ“=visible, βœ—=hidden, ⚑=interactive, ←→=horizontal edges, ↑↓=vertical edges, ↕️=vertical scroll, ↔️=horizontal scroll CENTERING: Equal left/right distances = horizontally centered, equal top/bottom = vertically centered SCROLL DETECTION: Automatically detects scrollable containers and shows overflow amount (e.g., "scrollable ↕️ 397px" means 397px of hidden content). No need to use evaluate() to compare scrollHeight/clientHeight.

RELATED TOOLS: For comparing TWO elements' alignment (not parent-child), use compare_element_alignment(). For box model (padding/margin), use measure_element().

⚠️ More efficient than get_html() or evaluate() for structural analysis. Use BEFORE visual tools (screenshot) or evaluate(). Supports testid shortcuts.

NOTE: Dropdowns, listboxes, dialogs, and popovers (especially in react-aria/headless UI/Radix) are commonly portaled to document.body β€” when a combobox or menu is open, query at the root level (e.g. [role="listbox"], [role="dialog"]) rather than inside the trigger's subtree.

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorNoCSS selector, text selector, or testid shorthand to inspect. Omit for page overview (defaults to body). Use 'testid:login-form', '#main', etc.
includeHiddenNoInclude hidden elements in results (default: false)
maxChildrenNoMaximum number of children to show (default: 20)
maxDepthNoMaximum depth to drill through non-semantic wrapper elements when looking for semantic children (default: 5). Increase for extremely deeply nested components, decrease to 1 to see only immediate children without drilling.

TDQS

A4.8/5.0
Behavior5/5

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

Annotations already declare readOnlyHint=true, matching the read-only inspection nature. Description adds rich behavioral details: skips wrapper divs, detects scrollable containers, identifies centering, explains portal behavior for dropdowns. No contradiction with annotations.

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?

Description is well-structured with clear sections (WORKFLOW, DETECTS, OUTPUT FORMAT, etc.) and front-loaded with the primary purpose. However, it is somewhat verbose; some details (symbols, full output format) could be shortened or moved to docs. Still, it earns its content.

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?

Given the complexity of the tool (progressive inspection, centering, scroll detection, portals) and no output schema, the description thoroughly explains behavior, output format, symbols, and special cases. Combined with good annotations and schema, it provides complete context for an AI agent.

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?

Input schema has 100% description coverage. Description adds workflow context (default behavior without selector, testid shortcuts) and clarifies maxDepth usage. While schema already explains parameters, description adds value beyond schema for some parameters (e.g., maxDepth explanation), justifying a 4.

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?

Description clearly states it is the primary inspection tool for layout debugging, with specific verb 'inspect DOM' and resource 'DOM elements'. It distinguishes itself from siblings like compare_element_alignment and measure_element by describing its scope (parent-child relationships, centering, spacing gaps).

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?

Explicitly instructs to call without selector for overview and drill down with child's selector. Names alternative tools for alignment comparison and box model. Recommends using this before visual tools or evaluate(). Provides clear when-to-use and when-not-to-use guidance.

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

list_network_requestsA
Read-only

List recent network requests captured by the browser. Returns compact text format with method, URL, status, resource type, timing, and size. Essential for debugging API calls and performance issues. Use get_request_details() to inspect full headers and body for specific requests.

ParametersJSON Schema
NameRequiredDescriptionDefault
typeNoFilter by resource type: 'xhr', 'fetch', 'script', 'stylesheet', 'image', 'font', 'document', etc. Omit to show all types.
limitNoMaximum number of requests to return, most recent first (default: 50)

TDQS

A4.7/5.0
Behavior5/5

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

Annotations indicate read-only and no open-world effects. Description accurately describes the return format and filtering capabilities. No contradictions or missing behavioral traits.

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 conveying purpose, output format, use case, and alternative tool. No redundant words. Front-loaded with action and resource.

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?

Given the simple schema (2 optional params, no enums, no output schema), the description covers the return format, use context, and relationship to sibling tool. Complete enough for the agent to decide and invoke.

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?

Schema coverage is 100%, so baseline is 3. Description does not add extra meaning beyond what the schema provides for the two parameters. It mentions filtering by type but that's already in the schema.

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?

Clearly states the tool lists recent network requests with specific output details (method, URL, status, resource type, timing, size). Distinguishes from sibling tool get_request_details by mentioning it returns compact text format.

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?

Explicitly says it is essential for debugging API calls and performance issues, and directs to use get_request_details for full headers and body. Provides clear when-to-use and alternative guidance.

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

measure_elementA
Read-only

πŸ“ 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.

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

TDQS

A4.6/5.0
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.

press_keyB

Press a keyboard key

ParametersJSON Schema
NameRequiredDescriptionDefault
keyYesKey to press (e.g. 'Enter', 'ArrowDown', 'a')
selectorNoOptional CSS selector to focus before pressing key

TDQS

B3.1/5.0
Behavior2/5

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

Annotations indicate possible side effects (readOnlyHint=false, idempotentHint=false), but the description does not disclose behavioral traits such as triggering events, potential page navigation, or state changes beyond key press. Terse description leaves agent uninformed about consequences.

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?

Single sentence, no unnecessary words. Every word is relevant and earns its place. Excellent conciseness for a simple tool.

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

Completeness3/5

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

For a simple action tool with no output schema, the description omits what the tool returns (e.g., success, nothing) and any side effects. While parameters are covered, the overall completeness is adequate but leaves gaps for an agent to infer behavior.

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?

Input schema covers both parameters with descriptions and examples for 'key'. Description adds no additional meaning beyond the schema. Baseline of 3 is appropriate given high schema_description_coverage.

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

Purpose4/5

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

The description 'Press a keyboard key' clearly states the action and resource, but lacks context that it is for browser/UI keyboard interactions, which is inferred from sibling tools. It is specific enough to distinguish from click or fill, but could be more explicit.

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

Usage Guidelines2/5

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

No guidance on when to use this tool versus alternatives like click or fill. The optional selector suggests focusing, but there is no explicit directive on prerequisites or scenarios.

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

query_selectorA
Read-only

Test a selector and return detailed information about all matched elements. Essential for selector debugging and finding the right element to interact with. Returns compact text format with element tag, position, text content, visibility status, and interaction capability. Shows why elements are hidden (display:none, opacity:0, zero size). Supports testid shortcuts (e.g., 'testid:submit-button'). Use limit parameter to control how many matches to show (default: 10). NEW: Use onlyVisible parameter to filter results (true=visible only, false=hidden only, undefined=all).

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector, text selector, or testid shorthand to test (e.g., 'button.submit', 'testid:login-form', 'text=Sign In', 'dialog::button' to scope the lookup to the topmost open dialog/sheet)
limitNoMaximum number of elements to return detailed info for (default: 10, recommended max: 50)
onlyVisibleNoFilter results by visibility: true = show only visible elements, false = show only hidden elements, undefined/not specified = show all elements (default: undefined)
showAttributesNoComma-separated list of HTML attributes to display for each element (e.g., 'id,name,aria-label,href,type'). If not specified, attributes are not shown.

TDQS

A4.8/5.0
Behavior5/5

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

Annotations already indicate readOnlyHint=true. Description adds valuable behavioral context: return format, why elements are hidden, testid shortcuts, and visibility filtering. No contradiction.

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?

Concise yet information-dense. First sentence captures purpose, followed by clear structure covering return format, features, and parameter details. No redundant sentences.

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?

Despite no output schema, description explains return format thoroughly. With 4 parameters and detailed behavioral notes, it is fully complete for an agent to understand and invoke the tool correctly.

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

Parameters5/5

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

Schema coverage is 100% but description adds significant extra meaning: examples for selector (text, testid shorthand), default value and recommendation for limit, three-state explanation for onlyVisible, and clarification for showAttributes.

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?

Description clearly states 'Test a selector and return detailed information about all matched elements.' Uses specific verb+resource and distinguishes from siblings like element_exists or get_text by emphasizing debugging and detailed output.

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?

Provides good context for when to use (selector debugging, finding right element) and gives parameter usage tips (limit, onlyVisible). However, does not explicitly state when not to use or mention alternative tools like element_exists or inspect_dom.

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

scroll_byA

Scroll a container (or page) by a specific number of pixels. Auto-detects scroll direction when only one is available. Essential for: testing sticky headers/footers, triggering infinite scroll, carousel navigation, precise scroll position testing. Use 'html' or 'body' for page scrolling. Positive pixels = down/right, negative = up/left. Outputs: βœ“ success summary with axis position and percent of max scroll; ⚠️ boundary notice when movement is limited; ⚠️ ambiguous-direction guidance when both axes scroll; ⚠️ not-scrollable report with ancestor suggestions; πŸ’‘ follow-up tips matching the detected scenario.

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector of scrollable container (use 'html' or 'body' for page scroll, e.g., 'testid:chat-container', '.scrollable-list', 'html')
pixelsYesNumber of pixels to scroll. Positive = down/right, negative = up/left. Example: 500, -200
directionNoScroll direction: 'vertical' (default), 'horizontal', or 'auto' (detects available direction). Use 'auto' for smart detection.

TDQS

A4.5/5.0
Behavior4/5

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

Annotations indicate a mutating action (readOnlyHint=false, idempotentHint=false). The description adds valuable behavioral context: output scenarios (success, boundary, ambiguous-direction, not-scrollable), direction semantics, and auto-detection. It goes beyond annotations to explain what the agent can expect.

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?

Every sentence adds value with no redundancy. The description uses bullet points for outputs and essential uses, making it scannable. It is slightly longer but efficiently packed with information.

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?

Despite no output schema, the description thoroughly covers return behavior (success, boundary, ambiguous-direction, not-scrollable reports) and usage guidance. All three parameters are addressed, and edge cases like scroll limits are hinted at via boundary notices.

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 100%, but the description adds meaning beyond the schema: contextual details on direction auto-detection, positive/negative pixel meaning, and 'html'/'body' usage. This enriches parameter understanding beyond what the schema provides.

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 scrolls a container by pixels, specifies auto-detection of direction, and distinguishes use cases like 'precise scroll position testing' from likely sibling 'scroll_to_element'. The verb+resource is specific and the scope is well-defined.

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?

The description explicitly lists essential use cases (testing sticky headers, infinite scroll, carousel navigation) and provides guidance for page scrolling with 'html'/'body'. However, it does not explicitly name sibling tools or state 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.

scroll_to_elementA

Scroll an element into view. Automatically handles scrolling within the nearest scrollable ancestor (page or scrollable container). Essential for: making elements visible before interaction, triggering lazy-loaded content, testing scroll behavior. Position: start (top of viewport), center (middle), end (bottom). Default: start.

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector, text selector, or test ID (e.g., 'testid:submit-btn', '#login-button', 'text=Load More')
positionNoWhere to align element in viewport: 'start' (top), 'center' (middle), 'end' (bottom). Default: 'start'

TDQS

A4.2/5.0
Behavior4/5

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

The description explains that scrolling automatically handles the nearest scrollable ancestor, adding behavioral context beyond annotations. It also details the position parameter behavior with examples.

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?

Four concise sentences, front-loaded with the core action, and every sentence adds value without redundancy.

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?

Given the simple tool with two parameters and no output schema, the description covers purpose, usage, and parameter details adequately, though error handling is not mentioned.

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?

Schema coverage is 100% with parameter descriptions; the tool description adds minimal extra meaning beyond repeating the enum explanation and default value.

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 uses a specific verb 'scroll' and resource 'element', clearly stating the action. It also distinguishes from sibling tools like 'scroll_by' by focusing on scrolling to an element.

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?

The description lists use cases: 'making elements visible before interaction, triggering lazy-loaded content, testing scroll behavior.' It provides clear context but does not explicitly exclude alternatives.

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

selectC

Select an element on the page with Select tag

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector for element to select
valueYesValue to select

TDQS

C2.5/5.0
Behavior2/5

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

Annotations indicate readOnlyHint=false and idempotentHint=false, implying the tool modifies state and is not idempotent. However, the description does not add any behavioral details beyond these annotations, such as side effects or error conditions.

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

Conciseness3/5

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

The description is concise (one sentence) but lacks structure. It is not front-loaded with key information; the single sentence is vague and does not earn its place by adding clarity.

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

Completeness2/5

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

Given the simplicity of selecting an option from a <select> element, the description is incomplete. It fails to mention return values, error handling, or that the element must be a <select> tag. Sibling tools like 'click' or 'fill' are not distinguished.

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 has 100% coverage with descriptions for both 'selector' and 'value'. The description adds no further meaning, so it provides adequate but baseline support.

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

Purpose3/5

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

The description 'Select an element on the page with Select tag' indicates the tool operates on <select> elements, but it is vague. It repeats the tool name ('select') and does not clearly specify that it selects an option from a dropdown, leading to potential confusion with the 'click' or 'fill' tools among siblings.

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

Usage Guidelines2/5

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

No guidance is provided on when to use this tool versus alternatives like 'click', 'fill', or 'evaluate'. The description lacks any context about prerequisites (e.g., element must be a <select> tag) or when not to use it.

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

set_color_schemeA
Idempotent

Set the browser color scheme that controls CSS prefers-color-scheme. Defaults to system appearance. Use before inspecting colors or taking screenshots. Options: system (clear override to follow OS/browser setting), dark, light, no-preference (simulate agents with no declared preference). Returns confirmation of the active scheme.

ParametersJSON Schema
NameRequiredDescriptionDefault
schemeYesColor scheme to emulate: 'system', 'dark', 'light', or 'no-preference'. Example: { scheme: 'dark' }

TDQS

A4.5/5.0
Behavior4/5

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

Annotations indicate idempotentHint=true, and description adds that it defaults to system appearance and returns confirmation of the active scheme. No contradictions; provides useful context beyond annotations.

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?

Three sentences with no redundant information. Front-loaded with purpose and usage, then details options and return value.

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?

Complete for this simple tool: purpose, when to use, parameter options explained, and return value stated. No output schema needed.

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 has 100% coverage with a description, but the tool description explains each option's effect (e.g., 'system (clear override to follow OS/browser setting)'), adding value beyond the schema.

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 sets the browser color scheme for CSS prefers-color-scheme, lists all options, and distinguishes it from sibling tools which cover other browser automation tasks.

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?

Explicitly states 'Use before inspecting colors or taking screenshots', providing clear context. Does not mention when not to use or alternatives, but this is sufficient given the tool's specificity.

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

upload_fileA

Upload a file to an input[type='file'] element on the page

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector for the file input element
filePathYesAbsolute path to the file to upload

TDQS

A3.7/5.0
Behavior3/5

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

Annotations already indicate this is mutative and non-idempotent. The description adds minimal behavioral context beyond the action itself, such as side effects like file selection state or potential need for subsequent actions.

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?

A single, concise sentence of 12 words that covers the essential purpose without any unnecessary elaboration or repetition.

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

Completeness3/5

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

The description is functional but lacks important context such as prerequisites (element must be visible/interactable), behavior after upload (file is selected but not automatically submitted), and error conditions. Given the tool's simplicity, it is adequate but has clear gaps.

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?

Schema coverage is 100%, so the schema already describes the parameters. The description does not add extra meaning or usage details beyond the schema definitions.

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 action (upload), the target (file input element), and distinguishes it from other interaction tools like click or fill. It is specific and unambiguous.

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

Usage Guidelines3/5

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

The description implies usage for file input elements but lacks explicit guidance on when to use this tool versus alternatives, such as when a submit action is needed after upload. No exclusions or context for when not to use it.

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

visual_screenshot_for_humansA
Read-only

[may return preview+token] πŸ“Έ VISUAL OUTPUT TOOL - Captures page/element appearance and saves to file. Essential for: visual regression testing, sharing with humans, confirming UI appearance (colors/fonts/images).

❌ WRONG: "Take screenshot to debug button alignment" βœ… RIGHT: "Use compare_element_alignment() - alignment in <100 tokens"

❌ WRONG: "Screenshot to check element visibility" βœ… RIGHT: "Use check_visibility() - instant visibility + diagnostics"

❌ WRONG: "Screenshot to inspect layout structure" βœ… RIGHT: "Use inspect_dom() - hierarchy with positions and visibility"

βœ… VALID: "Share with designer for feedback" βœ… VALID: "Visual regression check" βœ… VALID: "Confirm gradient/shadow rendering"

⚠️ Token cost: ~1,500 tokens to read. Structural tools: <100 tokens.

Screenshots saved to ./.mcp-web-inspector/screenshots. Example: { name: "login-page", fullPage: true } or { name: "submit-btn", selector: "testid:submit" }

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesName for the screenshot file (without extension). Example: 'login-page' or 'error-state'
selectorNoCSS selector or testid shorthand for element to screenshot. Example: '#submit-button' or 'testid:login-form'. Omit to capture full viewport.
fullPageNoCapture entire scrollable page instead of just viewport (default: false)
downloadsDirNoCustom directory for saving screenshot (default: ./.mcp-web-inspector/screenshots). Example: './my-screenshots'

TDQS

A4.4/5.0
Behavior4/5

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

Annotations indicate readOnlyHint=true, consistent with screenshot capture. The description adds token cost (~1,500 tokens) and save location, which are useful behavioral details beyond annotations. However, the note about 'may return preview+token' is vague and could be clearer.

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 well-structured with sections for wrong/right usage, valid uses, and token cost. It is front-loaded with a clear emoji and purpose. However, the repeated formatting of '❌ WRONG: ...' makes it slightly verbose.

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

Completeness3/5

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

While the description covers many aspects, it does not clearly specify what the tool returns (e.g., file path, success message) beyond 'may return preview+token'. Given no output schema, this is a notable gap for completeness.

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?

Input schema coverage is 100%, and the description adds practical examples like { name: 'login-page', fullPage: true }, helping agents understand parameter usage beyond the schema. This slightly exceeds the baseline of 3.

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: 'Captures page/element appearance and saves to file.' It also distinguishes from siblings by listing incorrect use cases (alignment, visibility, layout) and directing to appropriate tools, and gives valid use cases.

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 provides explicit wrong usage examples with correct alternatives, and lists valid use cases such as sharing with designers or visual regression testing. This gives clear guidance on when to use this tool versus alternatives.

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

wait_for_elementA
Read-only

Wait for an element to reach a specific state (visible, hidden, attached, detached). Better than sleep() for waiting on dynamic content. Returns duration and current element status. Supports testid shortcuts (e.g., 'testid:submit-button').

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector, text selector, or testid shorthand (e.g., 'testid:submit-button', '#loading-spinner')
stateNoState to wait for: 'visible' (default), 'hidden', 'attached', 'detached'
timeoutNoMaximum time to wait in milliseconds (default: 10000)

TDQS

A4.4/5.0
Behavior4/5

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

Annotations (readOnlyHint=true) indicate no destructive side effects. Description adds that it returns duration and status, and supports testid shortcuts. No contradictions. Lacks detail on timeout behavior, but acceptable.

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?

Three sentences, front-loaded with main purpose, then differentiator, then additional features. No redundancy. Efficient.

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?

With 3 params, no output schema, description covers purpose, parameters, return info, and usage suggestion. Could mention timeout behavior or error handling, but not essential. Adequate for most use cases.

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 covers all 3 parameters with 100% description coverage. Description adds value by explaining testid shorthand for selector and clarifying default state. Minor extra beyond schema.

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?

Clearly states it waits for an element to reach a specific state (visible, hidden, attached, detached). Distinguishes from sleep() and mentions return value (duration, status) and testid shortcuts. No ambiguity.

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?

Explicitly recommends using this instead of sleep() for dynamic content. Does not mention when not to use, but context from sibling tools suggests alternative waiting tools (e.g., wait_for_network_idle) for other cases. Adequate guidance.

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

wait_for_network_idleA
Read-only

Wait for network activity to settle. Waits until there are no network connections for at least 500ms. Better than fixed delays when waiting for AJAX calls or dynamic content loading. Returns actual wait duration and confirmation of idle state.

ParametersJSON Schema
NameRequiredDescriptionDefault
timeoutNoMaximum time to wait in milliseconds (default: 10000)

TDQS

A4.3/5.0
Behavior4/5

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

Annotations already indicate readOnlyHint=true, and the description adds behavioral details: waits for 500ms idle, returns actual wait duration and idle state. No side effects disclosed, but it's consistent with annotations.

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?

Three sentences, front-loaded with purpose, no wasted words. All information is relevant and necessary.

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?

For a simple tool with one parameter and no output schema, the description comprehensively covers its operation, return values, and use case. No gaps.

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?

Schema description coverage is 100% with a clear description for the timeout parameter. The tool description does not add additional parameter details beyond what the schema provides.

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 waits for network activity to settle with a specific condition (no connections for 500ms). It distinguishes itself from sibling tools like wait_for_element and fixed delays.

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 says 'Better than fixed delays when waiting for AJAX calls or dynamic content loading,' which provides clear guidance on when to use it. However, it does not mention when not to use or compare with other waiting strategies.

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

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 34 tool updatesv0.13.0
    • First observedcheck_visibility
    • First observedclear_console_logs
    • First observedclick
    • First observedclose
    • First observedcompare_element_alignment
    • First observedconfirm_output
    • First observeddrag
    • First observedelement_exists
    • First observedevaluate
    • First observedfill
    • First observedfind_by_text
    • First observedget_computed_styles
    • First observedget_console_logs
    • First observedget_html
    • First observedget_request_details
    • First observedget_test_ids
    • First observedget_text
    • First observedgo_history
    • First observedhover
    • First observedinspect_ancestors
    • First observedinspect_dom
    • First observedlist_network_requests
    • First observedmeasure_element
    • First observednavigate
    • First observedpress_key
    • First observedquery_selector
    • First observedscroll_by
    • First observedscroll_to_element
    • First observedselect
    • First observedset_color_scheme
    • First observedupload_file
    • First observedvisual_screenshot_for_humans
    • First observedwait_for_element
    • First observedwait_for_network_idle

TDQS

A3.8/5.0
Disambiguation5/5

Each tool has a clearly distinct purpose with detailed descriptions that explain when to use it. Potential overlaps like check_visibility and query_selector with onlyVisible are resolved by context-specific guidance.

Naming Consistency5/5

All tools follow a consistent verb_noun pattern in snake_case, making the naming predictable and easy to understand. Minor variations like go_history still fit the pattern.

Tool Count3/5

With 34 tools, the server is slightly over the recommended range, but the tools cover many specialized debugging tasks (visibility, alignment, scrolling, network, etc.) and are well-organized, so the count is still reasonable for a comprehensive web inspector.

Completeness4/5

The tool set covers essential web debugging operations (DOM inspection, CSS, console, network, interactions, visual). Minor gaps like direct cookie/localStorage manipulation can be addressed via evaluate.

Maintenance

ActivityNo data
ResponsivenessUnresponsive

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

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