Safari Devtools Mcp

Name: Safari Devtools Mcp
Author: HayoDev

@HayoDev

Safari Devtools Mcp について

Safari DevTools MCP — real browser debugging with network interception, DOM inspection, cookie/storage management, and CSS analysis for AI agents on macOS

#mcp-server #safari #safari-devtools #devtools #debugging #browser-automation #model-context-protocol #ai-agents #ai-coding #macos #webkit #webdriver #network-interception #dom-inspection #claude #cursor #copilot

基本情報

カテゴリ

その他

トランスポート

stdio

公開者

HayoDev

投稿者

sweden-snow

設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

{
  "mcpServers": {
    "safari-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "safari-devtools-mcp@latest"
      ]
    }
  }
}

ツール

ツールは検出されませんでした

ツールは README から自動的に抽出されます。メンテナーは ## Tools という見出しの下に記載することで、このタブに反映できます。

概要

What is Safari Devtools MCP?

Safari Devtools MCP is an MCP server that lets coding agents (such as Claude, Cursor, Copilot, or Gemini) control and inspect a live Safari browser on macOS. It provides AI coding assistants with access to Safari DevTools for debugging, automation, and testing, and mirrors the tool names and schemas of Chrome DevTools MCP.

How to use Safari Devtools MCP?

Add the standard MCP configuration to your client’s settings file (e.g., ~/Library/Application Support/Claude/claude_desktop_config.json) using npx -y safari-devtools-mcp@latest. Run any client with the required setup: macOS with Safari’s “Allow Remote Automation” enabled and SafariDriver authorized (sudo safaridriver --enable). Then prompt your agent with actions like navigating a URL, taking a snapshot, or listing console errors.

Key features of Safari Devtools MCP

Browser debugging: capture console logs, network requests, and evaluate JavaScript
Reliable automation using accessibility-tree snapshots with stable UIDs
Native macOS tab management via AppleScript
CSS computed style inspection and element-level screenshots
Cookie and storage read/write/delete operations
Session auto-recovery that detects dead SafariDriver sessions

Use cases of Safari Devtools MCP

Debugging web applications by inspecting console messages, network traffic, and JavaScript execution
Automating browser interactions like clicking, typing, form filling, and drag-and-drop
Testing Safari-specific behavior with live browser control from AI assistants
Extracting page content, meta tags, links, and computed styles for analysis
Managing cookies and local/session storage across test sessions

FAQ from Safari Devtools MCP

What are the runtime requirements?

macOS (Safari and SafariDriver are Apple-exclusive), Node.js 18+ (22+ recommended), and Safari with “Allow Remote Automation” enabled. SafariDriver must be authorized with sudo safaridriver --enable.

How is this different from chrome-devtools-mcp?

Safari Devtools MCP intentionally mirrors the tool names and parameter schemas of chrome-devtools-mcp, so you can switch between Chrome and Safari with minimal friction. It provides Safari-specific features like AppleScript-based tab management.

What data does the server expose to MCP clients?

The server exposes browser content: page HTML, DOM snapshots, console logs, network request/response bodies, cookies, storage, computed styles, and screenshots. The README warns against browsing sensitive sites or entering credentials while a session is active.

Are there any known limitations?

Yes: only one WebDriver session at a time; macOS-only; no headless mode; console and network messages logged before injection are not fully captured; only PNG screenshots; full-page capture not available; tab management requires macOS Accessibility permissions for osascript.

How is the server started?

Via an MCP client configuration: use the command npx -y safari-devtools-mcp@latest. It can also be built from source (git clone, npm install && npm run build) and pointed to the built entry point.