browser-inspection

name	browser-inspection
description	Use when needing to inspect, debug, or interact with a browser - helps choose between Browser MCP (existing sessions) and DevTools MCP (debugging tools) based on the task requirements
allowed-tools	Read, mcp__chrome-devtools__take_snapshot, mcp__chrome-devtools__take_screenshot, mcp__chrome-devtools__list_pages, mcp__chrome-devtools__select_page, mcp__chrome-devtools__list_console_messages, mcp__chrome-devtools__get_console_message, mcp__chrome-devtools__list_network_requests, mcp__chrome-devtools__get_network_request, mcp__chrome-devtools__hover, mcp__chrome-devtools__wait_for

Browser Inspection

Overview

Two browser MCP servers are available with different strengths. This skill helps choose the right one based on your needs.

Critical Rule

Authentication trumps debugging features.

DevTools opens a FRESH browser session - it has NO access to the user's existing tabs, cookies, or login state. If the page requires authentication:

• DevTools will show a login page, not the user's logged-in view
• You MUST use Browser MCP first, even if you want debugging features
• Browser MCP has basic console logs - use those when login is required

When to Use

Use this skill when:

• User says "check the browser", "look at the browser", "inspect the page"
• You need to debug frontend/UI issues
• You need to see what's displayed in the browser
• You need to interact with a web page

Decision Flowchart

digraph browser_decision {
    rankdir=TB;

    start [label="Need browser access" shape=ellipse];
    q1 [label="Need logged-in\nsession/cookies?" shape=diamond];
    q2 [label="Need debugging?\n(network/console/perf)" shape=diamond];
    q3 [label="Quick visual\ncheck only?" shape=diamond];

    browser [label="Browser MCP\n(existing sessions)" shape=box style=filled fillcolor=lightblue];
    devtools [label="DevTools MCP\n(debugging tools)" shape=box style=filled fillcolor=lightyellow];

    start -> q1;
    q1 -> browser [label="Yes"];
    q1 -> q2 [label="No"];
    q2 -> devtools [label="Yes"];
    q2 -> q3 [label="No"];
    q3 -> browser [label="Yes"];
    q3 -> devtools [label="No\n(clean state)"];
}

Quick Decision Matrix

Scenario	Use	Why
See logged-in state	Browser MCP	Connects to existing sessions
Debug console errors	DevTools	Better console message tools with filtering
Inspect network requests	DevTools	Has network request inspection
Performance profiling	DevTools	Has performance trace tools
Quick visual check	Browser MCP	Simpler, faster setup
Test in clean state	DevTools	Fresh session, no cookies/login
Interact with user's open tab	Browser MCP	Sees existing tabs
Evaluate JavaScript in page	DevTools	Has evaluate_script tool
Emulate mobile/slow network	DevTools	Has emulation capabilities

MCP Guidelines

For detailed usage of each MCP, see:

• Browser MCP Guidelines - For existing sessions and quick checks
• DevTools MCP Guidelines - For debugging and performance analysis

Default Recommendation

Start with Browser MCP if:

• You need to see something the user is looking at
• The page requires authentication
• You just need a quick snapshot

Start with DevTools MCP if:

• You're debugging an error on a PUBLIC page (no login required)
• You need to inspect network requests or console logs
• You need to test in a clean environment

Common Mistakes

❌ "Debug console errors on logged-in app" → picks DevTools ✅ Use Browser MCP - DevTools can't access the logged-in session

❌ Thinking DevTools can "connect to" the user's session ✅ DevTools always opens a fresh session - no cookies, no login

❌ Prioritizing "better debugging tools" over session access ✅ Authentication requirement is the first decision point - it overrides everything