Safari DevTools MCP Server

MCP server for Safari DevTools — browser debugging and automation for AI coding agents

Local serverstdioGo

What is the Safari DevTools MCP MCP server?

MCP server for Safari DevTools — browser debugging and automation for AI coding agents. The safari devtools mcp mcp server wraps that behind the Model Context Protocol, so an assistant can use it through 4 defined tools rather than through you.

What it actually does

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.

  • 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

Adding it to your client

safari-devtools-mcp on npm is all you need. Most clients run it directly, so configuration is a few lines and a restart.

Its toolset

Everything the assistant can do here goes through one of these:

  • Element — level screenshots** — capture individual elements, not just the full viewport
  • Debugging — The Debugging tool exposed by this server
  • Navigation — The Navigation tool exposed by this server
  • Scroll — The Scroll tool exposed by this server

Configuration

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

Caveats

  • It runs with your machine's permissions. That is convenient and also the reason to think about what you point it at before you approve a tool call.
  • MCP clients confirm each tool call by default. Leave that on until you have watched what the safari devtools mcp mcp server does with a few real requests.

When to reach for it

This sits in the browser automation group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Safari DevTools MCP's toolset — Element, Debugging, Navigation and 1 more — is a fair guide to whether it matches your workflow. It is maintained by HayoDev; worth a glance at recent repository activity before you build anything load-bearing on it.

We check each listing at SyncDev against the project's documentation before it goes live — if something here drifts out of date, it is a bug worth reporting.

Available tools

ToolWhat it does
Elementlevel screenshots** — capture individual elements, not just the full viewport
DebuggingThe Debugging tool exposed by this server.
NavigationThe Navigation tool exposed by this server.
ScrollThe Scroll tool exposed by this server.

How to install the Safari DevTools MCP MCP server

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

Add to claude_desktop_config.json, then restart Claude Desktop.

Configuration

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

Example prompts to try

  • Use Safari DevTools MCP to Element.
  • Use Safari DevTools MCP to Debugging.
  • Use Safari DevTools MCP to Navigation.

Frequently asked questions

It connects Safari DevTools MCP to MCP-compatible AI assistants such as Claude and Cursor, exposing 4 tools (Element, Debugging, Navigation, and more) that the assistant can call on your behalf. Instead of copying data back and forth by hand, the assistant works with Safari DevTools MCP directly.