@_brcode/mcp-browser-inspector/README.md

MCP server for browser inspection with Puppeteer - network monitoring and console error tracking

# Browser Inspector MCP Server

[![npm version](https://img.shields.io/npm/v/@_brcode/mcp-browser-inspector.svg)](https://www.npmjs.com/package/@_brcode/mcp-browser-inspector)
[![npm downloads](https://img.shields.io/npm/dm/@_brcode/mcp-browser-inspector.svg)](https://www.npmjs.com/package/@_brcode/mcp-browser-inspector)
[![GitHub](https://img.shields.io/github/license/Umid-ismayilov/mcp-browser-inspector.svg)](https://github.com/Umid-ismayilov/mcp-browser-inspector)

Puppeteer-based MCP server for browser inspection, network monitoring, and console error tracking.

---

## 📦 Installation (2 simple steps)

### Step 1: Install the package globally

Open your terminal and run:

```bash
npm install -g @_brcode/mcp-browser-inspector
```

This installs the package globally on your system. You only need to do this once.

### Step 2: Add to Claude Code MCP

After installation, add the MCP server to Claude Code:

```bash
claude mcp add --scope user --transport stdio browser-inspector npx @_brcode/mcp-browser-inspector
```

**That's it!** ✅ The MCP server is now ready to use in Claude Code.

### Verify installation

Check if the server is connected:

```bash
claude mcp list
```

You should see:
```
browser-inspector: npx @_brcode/mcp-browser-inspector - ✓ Connected
```

---

## 💡 What you need

- **Node.js** (version 18 or higher)
- **Claude Code** CLI installed

Don't have Claude Code CLI? Install it from [here](https://docs.anthropic.com/en/docs/claude-code).

---

## 🎯 Quick Usage

Once installed, you can use these commands in Claude Code:

```
# Inspect a website
inspect_url https://example.com

# View all API requests
get_api_requests

# View network traffic
get_network_data

# Check console errors
get_console_errors

# Close browser
close_browser
```

---

## 🖥️ Using with Claude Desktop

If you're using Claude Desktop instead of Claude Code CLI, follow these steps:

### Step 1: Install the package globally

```bash
npm install -g @_brcode/mcp-browser-inspector
```

### Step 2: Configure Claude Desktop

Edit your Claude Desktop configuration file:

**macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`

**Windows**: `%APPDATA%\Claude\claude_desktop_config.json`

**Linux**: `~/.config/Claude/claude_desktop_config.json`

Add this configuration:

```json
{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["@_brcode/mcp-browser-inspector"]
    }
  }
}
```

If you already have other MCP servers configured, just add the `browser-inspector` entry to your existing `mcpServers` object.

### Step 3: Restart Claude Desktop

Close and reopen Claude Desktop for the changes to take effect.

### Verify installation

After restart, you should see the browser-inspector tools available in Claude Desktop. Try asking Claude to:
- "Inspect https://example.com"
- "Show me the API requests"
- "Check for console errors"

---