Sponsored by Deepsite.site

Safari Devtools Mcp

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

Safari DevTools MCP

npm version npm downloads license node

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.

Tools (41)

Debugging

ToolDescription
list_console_messagesList console messages with filtering by level (log, warn, error)
get_console_messageGet a detailed message including stack trace and arguments
clear_consoleClear all captured console messages
list_network_requestsMonitor network requests — Fetch, XHR, and resource loads
get_network_requestGet full request/response details with headers and body
clear_networkClear all captured network requests
evaluate_scriptExecute JavaScript in the browser context and return results
take_screenshotCapture a PNG screenshot of the page or a specific element
take_snapshotAccessibility-tree snapshot of the DOM with stable UIDs for element targeting

Page content

ToolDescription
get_page_contentGet the page title, URL, and visible text content
get_html_sourceGet the full HTML source of the page
extract_linksExtract all links with their text, href, and rel attributes
extract_metaExtract meta tags (og:, twitter:, description, etc.)
ToolDescription
list_pagesList all open Safari tabs across windows
select_pageSwitch to a specific tab
new_pageOpen a new tab and navigate to a URL
close_pageClose a tab
navigate_pageNavigate to a URL, go back, forward, or reload
wait_forWait for specific text to appear on the page
resize_pageResize the browser window
handle_dialogAccept or dismiss browser dialogs (alert, confirm, prompt)

Scroll

ToolDescription
scrollScroll the page in any direction by a given amount
scroll_to_elementScroll an element into view by its UID

CSS inspection

ToolDescription
get_computed_styleGet computed CSS styles for any element by UID

Cookies & storage

ToolDescription
get_cookiesGet browser cookies, optionally filtered by name or domain
set_cookieSet a cookie with name, value, and optional attributes
delete_cookieDelete a cookie by name, or delete all cookies
get_storageRead from localStorage or sessionStorage
set_storageWrite a key-value pair to localStorage or sessionStorage
delete_storageDelete a key or clear all entries from localStorage/sessionStorage

Input automation

ToolDescription
clickClick an element by UID from a snapshot
click_atClick at specific x/y coordinates
right_clickRight-click (context menu) on an element
select_optionSelect an option from a dropdown by value or label
hoverHover over an element
fillType into an input field or select from a dropdown
fill_formFill multiple form fields at once
type_textType text into the currently focused element
dragDrag and drop between elements or coordinates
press_keyPress a key or combination (e.g., Meta+A, Enter)
upload_fileUpload a file through a file input

Architecture

MCP Client (Claude, Cursor, etc.)
    | stdio (MCP protocol)
    v
Safari DevTools MCP Server
    |
    v
+-------------------------------+
|  SafariDriver                 |
|  +-- Selenium WebDriver       | <-- Browser automation
|  +-- JS Injection             | <-- Console/Network capture
|  +-- AppleScript (osascript)  | <-- Native tab management
+-------------------------------+
    |
    v
Safari Browser

Known limitations

  • Single session: Safari only allows one WebDriver session at a time. Running multiple instances is not supported.
  • macOS only: Safari and SafariDriver are Apple-exclusive — this server does not work on Linux or Windows.
  • No headless mode: Safari does not support headless operation. A visible browser window is required.
  • Console pre-injection gap: Console messages logged before the capture script is injected are not captured.
  • Network pre-injection gap: Network requests made before injection are backfilled via the Performance API with limited detail (timing and size, but no headers or status codes).
  • PNG only: Safari WebDriver only supports PNG screenshots — no JPEG or WebP. Full-page capture is not available.
  • AppleScript permissions: Tab management features require macOS Accessibility permissions for osascript.

Credits

  • chrome-devtools-mcp by Google/ChromeDevTools — the inspiration and interface standard this project mirrors. Tool names and schemas are intentionally compatible so you can switch between Chrome and Safari seamlessly.
  • safari-mcp-server — prior art for Safari MCP integration that we studied during development.

License

MIT

Server Config

{
  "mcpServers": {
    "safari-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "safari-devtools-mcp@latest"
      ]
    }
  }
}
Recommend Servers
TraeBuild with Free GPT-4.1 & Claude 3.7. Fully MCP-Ready.
MiniMax MCPOfficial MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.
WindsurfThe new purpose-built IDE to harness magic
Howtocook Mcp基于Anduin2017 / HowToCook (程序员在家做饭指南)的mcp server,帮你推荐菜谱、规划膳食,解决“今天吃什么“的世纪难题; Based on Anduin2017/HowToCook (Programmer's Guide to Cooking at Home), MCP Server helps you recommend recipes, plan meals, and solve the century old problem of "what to eat today"
BlenderBlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.
RedisA Model Context Protocol server that provides access to Redis databases. This server enables LLMs to interact with Redis key-value stores through a set of standardized tools.
MCP AdvisorMCP Advisor & Installation - Use the right MCP server for your needs
Zhipu Web SearchZhipu Web Search MCP Server is a search engine specifically designed for large models. It integrates four search engines, allowing users to flexibly compare and switch between them. Building upon the web crawling and ranking capabilities of traditional search engines, it enhances intent recognition capabilities, returning results more suitable for large model processing (such as webpage titles, URLs, summaries, site names, site icons, etc.). This helps AI applications achieve "dynamic knowledge acquisition" and "precise scenario adaptation" capabilities.
Tavily Mcp
Y GuiA web-based graphical interface for AI chat interactions with support for multiple AI models and MCP (Model Context Protocol) servers.
Jina AI MCP ToolsA Model Context Protocol (MCP) server that integrates with Jina AI Search Foundation APIs.
AiimagemultistyleA Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.
EdgeOne Pages MCPAn MCP service designed for deploying HTML content to EdgeOne Pages and obtaining an accessible public URL.
Visual Studio Code - Open Source ("Code - OSS")Visual Studio Code
Serper MCP ServerA Serper MCP Server
CursorThe AI Code Editor
Playwright McpPlaywright MCP server
ChatWiseThe second fastest AI chatbot™
DeepChatYour AI Partner on Desktop
Baidu Map百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。
Amap Maps高德地图官方 MCP Server