{
  "markdown": "# Safari DevTools MCP\n\n[![npm version](https://img.shields.io/npm/v/safari-devtools-mcp.svg)](https://npmjs.org/package/safari-devtools-mcp)\n[![npm downloads](https://img.shields.io/npm/dm/safari-devtools-mcp.svg)](https://npmjs.org/package/safari-devtools-mcp)\n[![license](https://img.shields.io/npm/l/safari-devtools-mcp.svg)](https://github.com/HayoDev/safari-devtools-mcp/blob/main/LICENSE)\n[![node](https://img.shields.io/node/v/safari-devtools-mcp.svg)](https://npmjs.org/package/safari-devtools-mcp)\n\n`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.\n\nChrome developers get powerful AI debugging through [chrome-devtools-mcp](https://github.com/ChromeDevTools/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.\n\n## [Changelog](./CHANGELOG.md) | [Contributing](./CONTRIBUTING.md)\n\n> **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.\n\n## Why safari-devtools-mcp?\n\nThis project uses **WebDriver** for capabilities that scripting alone cannot provide:\n\n- **Network request/response body capture** — intercepts fetch and XHR calls with full headers, payloads, and timing\n- **DOM snapshots via accessibility tree** — stable element UIDs that survive page re-renders, not brittle CSS selectors\n- **CSS computed style inspection** — read any computed property from any element\n- **Cookie and storage management** — read, write, and delete cookies, localStorage, and sessionStorage\n- **Element-level screenshots** — capture individual elements, not just the full viewport\n- **Session auto-recovery** — detects dead SafariDriver sessions and reconnects transparently\n\n## Key features\n\n- **Browser debugging**: Capture console logs, inspect network requests, and evaluate JavaScript — with stack traces and full request/response details.\n- **Reliable automation**: Click, type, fill forms, drag and drop, and press keyboard shortcuts using accessibility-tree snapshots with stable UIDs.\n- **Native macOS integration**: Tab management via AppleScript for listing, switching, and controlling Safari tabs across windows\n\n## Requirements\n\n- **macOS** (Safari and SafariDriver are Apple-exclusive)\n- **Node.js 18+** (22+ recommended)\n- **Safari** with remote automation enabled\n\n### Safari setup\n\n1. Open Safari > Settings > Advanced > check **\"Show features for web developers\"**\n2. Develop menu > check **\"Allow Remote Automation\"**\n3. Authorize SafariDriver:\n   ```bash\n   sudo safaridriver --enable\n   ```\n\n## Getting started\n\nStandard MCP config:\n\n```json\n{\n  \"mcpServers\": {\n    \"safari-devtools\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"safari-devtools-mcp@latest\"]\n    }\n  }\n}\n```\n\n<details>\n<summary>Claude Code</summary>\n\n```bash\nclaude mcp add safari-devtools -- npx -y safari-devtools-mcp@latest\n```\n\nOr add to your project's `.mcp.json` using the standard config above.\n\n</details>\n\n<details>\n<summary>Claude Desktop</summary>\n\nAdd the standard config to `~/Library/Application Support/Claude/claude_desktop_config.json`.\n\n</details>\n\n<details>\n<summary>Cursor</summary>\n\nAdd the standard config to your Cursor MCP settings.\n\n</details>\n\n<details>\n<summary>VS Code</summary>\n\nAdd the standard config to `.vscode/mcp.json`.\n\n</details>\n\n<details>\n<summary>Copilot CLI</summary>\n\n```bash\ncopilot mcp add safari-devtools -- npx -y safari-devtools-mcp@latest\n```\n\n</details>\n\n<details>\n<summary>Gemini CLI</summary>\n\n```bash\ngemini mcp add safari-devtools -- npx -y safari-devtools-mcp@latest\n```\n\nOr add the standard config to your `~/.gemini/settings.json`.\n\n</details>\n\n<details>\n<summary>Gemini Code Assist</summary>\n\nAdd the standard config to your `.gemini/settings.json` in the project root.\n\n</details>\n\n<details>\n<summary>JetBrains AI Assistant & Junie</summary>\n\nAdd the standard config to your `.junie/mcp.json` in the project root.\n\n</details>\n\n<details>\n<summary>Raycast</summary>\n\nOpen \"Install MCP Server\" in Raycast and fill in:\n\n- **Command**: `npx`\n- **Arguments**: `-y safari-devtools-mcp@latest`\n\nOr copy the standard config JSON above before opening the command — Raycast will auto-fill the form.\n\n</details>\n\n<details>\n<summary>Visual Studio</summary>\n\nAdd the standard config to your `.vs/mcp.json` in the solution root.\n\n</details>\n\n<details>\n<summary>Warp</summary>\n\nAdd the standard config to your Warp MCP settings file at `~/.warp/mcp.json`.\n\n</details>\n\n<details>\n<summary>From source</summary>\n\n```bash\ngit clone https://github.com/HayoDev/safari-devtools-mcp.git\ncd safari-devtools-mcp\nnpm install && npm run build\n```\n\nThen point your MCP client to the built entry point:\n\n```json\n{\n  \"mcpServers\": {\n    \"safari-devtools\": {\n      \"command\": \"node\",\n      \"args\": [\n        \"/path/to/safari-devtools-mcp/build/src/bin/safari-devtools-mcp.js\"\n      ]\n    }\n  }\n}\n```\n\n</details>\n\n### Your first prompt\n\n> Navigate to https://example.com, take a snapshot, and list any console errors.\n\n### Slim mode\n\nUse `--slim` to reduce token usage with shorter tool descriptions. Useful when working with context-limited models or long conversations:\n\n```json\n{\n  \"mcpServers\": {\n    \"safari-devtools\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"safari-devtools-mcp@latest\", \"--slim\"]\n    }\n  }\n}\n```\n\n## Prompts (skills)\n\nThe server exposes guided debugging workflows as MCP prompts. Clients that support prompts (e.g. Claude Desktop, Claude Code) can invoke them by name:\n\n| Prompt                      | Description                                                                      |\n| --------------------------- | -------------------------------------------------------------------------------- |\n| `safari-devtools`           | Getting started — tool overview, recommended workflow, and Safari-specific notes |\n| `a11y-debugging`            | Accessibility audit — a11y tree inspection, axe-core injection, WCAG checks      |\n| `safari-specific-debugging` | Debug WebKit quirks — CSS prefixes, JS feature gaps, ITP/CORS issues             |\n| `performance-debugging`     | Performance analysis — Navigation Timing, Core Web Vitals, resource waterfall    |\n\n## Tools (45)\n\n### Debugging\n\n| Tool                    | Description                                                                   |\n| ----------------------- | ----------------------------------------------------------------------------- |\n| `list_console_messages` | List console messages with filtering by level (log, warn, error)              |\n| `get_console_message`   | Get a detailed message including stack trace and arguments                    |\n| `clear_console`         | Clear all captured console messages                                           |\n| `list_network_requests` | Monitor network requests — Fetch, XHR, and resource loads                     |\n| `get_network_request`   | Get full request/response details with headers and body                       |\n| `clear_network`         | Clear all captured network requests                                           |\n| `evaluate_script`       | Execute JavaScript in the browser context and return results                  |\n| `take_screenshot`       | Capture a PNG screenshot of the page or a specific element                    |\n| `take_snapshot`         | Accessibility-tree snapshot of the DOM with stable UIDs for element targeting |\n\n### Page content\n\n| Tool               | Description                                                 |\n| ------------------ | ----------------------------------------------------------- |\n| `get_page_content` | Get the page title, URL, and visible text content           |\n| `get_html_source`  | Get the full HTML source of the page                        |\n| `extract_links`    | Extract all links with their text, href, and rel attributes |\n| `extract_meta`     | Extract meta tags (og:, twitter:, description, etc.)        |\n\n### Navigation\n\n| Tool            | Description                                                |\n| --------------- | ---------------------------------------------------------- |\n| `list_pages`    | List all open Safari tabs across windows                   |\n| `select_page`   | Switch to a specific tab                                   |\n| `new_page`      | Open a new tab and navigate to a URL                       |\n| `close_page`    | Close a tab                                                |\n| `navigate_page` | Navigate to a URL, go back, forward, or reload             |\n| `wait_for`      | Wait for specific text to appear on the page               |\n| `resize_page`   | Resize the browser window                                  |\n| `handle_dialog` | Accept or dismiss browser dialogs (alert, confirm, prompt) |\n\n### Scroll\n\n| Tool                | Description                                        |\n| ------------------- | -------------------------------------------------- |\n| `scroll`            | Scroll the page in any direction by a given amount |\n| `scroll_to_element` | Scroll an element into view by its UID             |\n\n### CSS inspection\n\n| Tool                 | Description                                    |\n| -------------------- | ---------------------------------------------- |\n| `get_computed_style` | Get computed CSS styles for any element by UID |\n\n### Cookies & storage\n\n| Tool             | Description                                                        |\n| ---------------- | ------------------------------------------------------------------ |\n| `get_cookies`    | Get browser cookies, optionally filtered by name or domain         |\n| `set_cookie`     | Set a cookie with name, value, and optional attributes             |\n| `delete_cookie`  | Delete a cookie by name, or delete all cookies                     |\n| `get_storage`    | Read from localStorage or sessionStorage                           |\n| `set_storage`    | Write a key-value pair to localStorage or sessionStorage           |\n| `delete_storage` | Delete a key or clear all entries from localStorage/sessionStorage |\n\n### Input automation\n\n| Tool            | Description                                          |\n| --------------- | ---------------------------------------------------- |\n| `click`         | Click an element by UID from a snapshot              |\n| `click_at`      | Click at specific x/y coordinates                    |\n| `right_click`   | Right-click (context menu) on an element             |\n| `select_option` | Select an option from a dropdown by value or label   |\n| `hover`         | Hover over an element                                |\n| `fill`          | Type into an input field or select from a dropdown   |\n| `fill_form`     | Fill multiple form fields at once                    |\n| `type_text`     | Type text into the currently focused element         |\n| `drag`          | Drag and drop between elements or coordinates        |\n| `press_key`     | Press a key or combination (e.g., `Meta+A`, `Enter`) |\n| `upload_file`   | Upload a file through a file input                   |\n\n### iOS Safari validation\n\n| Tool                          | Description                                                                                                    |\n| ----------------------------- | -------------------------------------------------------------------------------------------------------------- |\n| `inspect_viewport_meta`       | Parse the viewport meta tag and validate against iOS best practices (width, zoom, viewport-fit)                |\n| `get_safe_area_insets`        | Read CSS safe-area-inset values and check whether the page handles notched devices correctly                   |\n| `check_ios_web_app_readiness` | Audit the page for Add to Home Screen / PWA readiness (apple-touch-icon, manifest, splash screens, status bar) |\n| `check_webkit_compatibility`  | Check page CSS against the live Safari session via CSS.supports()                                              |\n\n## Architecture\n\n```\nMCP Client (Claude, Cursor, etc.)\n    | stdio (MCP protocol)\n    v\nSafari DevTools MCP Server\n    |\n    v\n+-------------------------------+\n|  SafariDriver                 |\n|  +-- Selenium WebDriver       | <-- Browser automation\n|  +-- JS Injection             | <-- Console/Network capture\n|  +-- AppleScript (osascript)  | <-- Native tab management\n+-------------------------------+\n    |\n    v\nSafari Browser\n```\n\n## Known limitations\n\n- **Single session**: Safari only allows one WebDriver session at a time. Running multiple instances is not supported.\n- **macOS only**: Safari and SafariDriver are Apple-exclusive — this server does not work on Linux or Windows.\n- **No headless mode**: Safari does not support headless operation. A visible browser window is required.\n- **Console pre-injection gap**: Console messages logged before the capture script is injected are not captured.\n- **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).\n- **PNG only**: Safari WebDriver only supports PNG screenshots — no JPEG or WebP. Full-page capture is not available.\n- **AppleScript permissions**: Tab management features require macOS Accessibility permissions for `osascript`.\n\n## Credits\n\n- [chrome-devtools-mcp](https://github.com/ChromeDevTools/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.\n- [safari-mcp-server](https://github.com/lxman/safari-mcp-server) — prior art for Safari MCP integration that we studied during development.\n\n## License\n\n[MIT](LICENSE)\n",
  "bytes": 14137,
  "sha": "60a4b55cbbe0932bf9dcb57821abc551a56c8711086d4387420fe0d6607d760c",
  "repo_slug": "hayodev/safari-devtools-mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_hayodev_safari_devtools_mcp_4265459f/readme"
}