Safari DevTools MCP

Safari DevTools MCP

safari-devtools-mcp lets your coding agent (such as Claude, Cursor, Copilot or Gemini) control and inspect a live Safari browser on macOS. It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to Safari DevTools for debugging, automation, and testing.

Chrome developers get powerful AI debugging through chrome-devtools-mcp by Google. Safari developers should have something equivalent — this project brings that same experience to Safari, with matching tool names and parameter schemas so you can swap between browsers with minimal friction.

Changelog | Contributing

Note: This server exposes browser content (page data, console logs, network traffic) to MCP clients. Avoid browsing sensitive websites or entering credentials while a session is active.

Why safari-devtools-mcp?

This project uses WebDriver for capabilities that scripting alone cannot provide:

• Network request/response body capture — intercepts fetch and XHR calls with full headers, payloads, and timing
• DOM snapshots via accessibility tree — stable element UIDs that survive page re-renders, not brittle CSS selectors
• CSS computed style inspection — read any computed property from any element
• Cookie and storage management — read, write, and delete cookies, localStorage, and sessionStorage
• Element-level screenshots — capture individual elements, not just the full viewport
• Session auto-recovery — detects dead SafariDriver sessions and reconnects transparently

Key features

• Browser debugging: Capture console logs, inspect network requests, and evaluate JavaScript — with stack traces and full request/response details.
• Reliable automation: Click, type, fill forms, drag and drop, and press keyboard shortcuts using accessibility-tree snapshots with stable UIDs.
• Native macOS integration: Tab management via AppleScript for listing, switching, and controlling Safari tabs across windows

Requirements

• macOS (Safari and SafariDriver are Apple-exclusive)
• Node.js 18+ (22+ recommended)
• Safari with remote automation enabled

Safari setup

1. Open Safari > Settings > Advanced > check "Show features for web developers"
2. Develop menu > check "Allow Remote Automation"
3. Authorize SafariDriver:

   sudo safaridriver --enable

Getting started

Standard MCP config:

{

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

Claude Code

claude mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

Or add to your project's .mcp.json using the standard config above.

Claude Desktop

Add the standard config to ~/Library/Application Support/Claude/claude_desktop_config.json.

Cursor

Add the standard config to your Cursor MCP settings.

VS Code

Add the standard config to .vscode/mcp.json.

Copilot CLI

copilot mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

Gemini CLI

gemini mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

Or add the standard config to your ~/.gemini/settings.json.

Gemini Code Assist

Add the standard config to your .gemini/settings.json in the project root.

JetBrains AI Assistant & Junie

Add the standard config to your .junie/mcp.json in the project root.

Raycast

Open "Install MCP Server" in Raycast and fill in:

• Command: npx
• Arguments: -y safari-devtools-mcp@latest

Or copy the standard config JSON above before opening the command — Raycast will auto-fill the form.

Visual Studio

Add the standard config to your .vs/mcp.json in the solution root.

Warp

Add the standard config to your Warp MCP settings file at ~/.warp/mcp.json.

From source

git clone https://github.com/HayoDev/safari-devtools-mcp.git

cd safari-devtools-mcp npm install && npm run build

Then point your MCP client to the built entry point:

{

"mcpServers": { "safari-devtools": { "command": "node", "args": [ "/path/to/safari-devtools-mcp/build/src/bin/safari-devtools-mcp.js" ] } } }

Your first prompt

Navigate to https://example.com, take a snapshot, and list any console errors.

Slim mode

Use --slim to reduce token usage with shorter tool descriptions. Useful when working with context-limited models or long conversations:

{

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

Prompts (skills)

The server exposes guided debugging workflows as MCP prompts. Clients that support prompts (e.g. Claude Desktop, Claude Code) can invoke them by name:

Tools (45)

Debugging

Page content

Navigation

Scroll

CSS inspection

Cookies & storage

Input automation

iOS Safari validation

| get_safe_area_insets | Read CSS safe-area-inset values and check whether t