safari-devtools-mcp
Controls and inspects a live Safari browser on macOS for debugging, automation, and testing, including console log capture, network request interception, DOM inspection, and more.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@safari-devtools-mcpShow me the console logs and network requests on the current Safari page."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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.
Related MCP server: MCP Safari Server
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
Open Safari > Settings > Advanced > check "Show features for web developers"
Develop menu > check "Allow Remote Automation"
Authorize SafariDriver:
sudo safaridriver --enable
Getting started
Standard MCP config:
{
"mcpServers": {
"safari-devtools": {
"command": "npx",
"args": ["-y", "safari-devtools-mcp@latest"]
}
}
}claude mcp add safari-devtools -- npx -y safari-devtools-mcp@latestOr add to your project's .mcp.json using the standard config above.
Add the standard config to ~/Library/Application Support/Claude/claude_desktop_config.json.
Add the standard config to your Cursor MCP settings.
Add the standard config to .vscode/mcp.json.
copilot mcp add safari-devtools -- npx -y safari-devtools-mcp@latestgemini mcp add safari-devtools -- npx -y safari-devtools-mcp@latestOr add the standard config to your ~/.gemini/settings.json.
Add the standard config to your .gemini/settings.json in the project root.
Add the standard config to your .junie/mcp.json in the project root.
Open "Install MCP Server" in Raycast and fill in:
Command:
npxArguments:
-y safari-devtools-mcp@latest
Or copy the standard config JSON above before opening the command — Raycast will auto-fill the form.
Add the standard config to your .vs/mcp.json in the solution root.
Add the standard config to your Warp MCP settings file at ~/.warp/mcp.json.
git clone https://github.com/HayoDev/safari-devtools-mcp.git
cd safari-devtools-mcp
npm install && npm run buildThen 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:
Prompt | Description |
| Getting started — tool overview, recommended workflow, and Safari-specific notes |
| Accessibility audit — a11y tree inspection, axe-core injection, WCAG checks |
| Debug WebKit quirks — CSS prefixes, JS feature gaps, ITP/CORS issues |
| Performance analysis — Navigation Timing, Core Web Vitals, resource waterfall |
Tools (45)
Debugging
Tool | Description |
| List console messages with filtering by level (log, warn, error) |
| Get a detailed message including stack trace and arguments |
| Clear all captured console messages |
| Monitor network requests — Fetch, XHR, and resource loads |
| Get full request/response details with headers and body |
| Clear all captured network requests |
| Execute JavaScript in the browser context and return results |
| Capture a PNG screenshot of the page or a specific element |
| Accessibility-tree snapshot of the DOM with stable UIDs for element targeting |
Page content
Tool | Description |
| Get the page title, URL, and visible text content |
| Get the full HTML source of the page |
| Extract all links with their text, href, and rel attributes |
| Extract meta tags (og:, twitter:, description, etc.) |
Navigation
Tool | Description |
| List all open Safari tabs across windows |
| Switch to a specific tab |
| Open a new tab and navigate to a URL |
| Close a tab |
| Navigate to a URL, go back, forward, or reload |
| Wait for specific text to appear on the page |
| Resize the browser window |
| Accept or dismiss browser dialogs (alert, confirm, prompt) |
Scroll
Tool | Description |
| Scroll the page in any direction by a given amount |
| Scroll an element into view by its UID |
CSS inspection
Tool | Description |
| Get computed CSS styles for any element by UID |
Cookies & storage
Tool | Description |
| Get browser cookies, optionally filtered by name or domain |
| Set a cookie with name, value, and optional attributes |
| Delete a cookie by name, or delete all cookies |
| Read from localStorage or sessionStorage |
| Write a key-value pair to localStorage or sessionStorage |
| Delete a key or clear all entries from localStorage/sessionStorage |
Input automation
Tool | Description |
| Click an element by UID from a snapshot |
| Click at specific x/y coordinates |
| Right-click (context menu) on an element |
| Select an option from a dropdown by value or label |
| Hover over an element |
| Type into an input field or select from a dropdown |
| Fill multiple form fields at once |
| Type text into the currently focused element |
| Drag and drop between elements or coordinates |
| Press a key or combination (e.g., |
| Upload a file through a file input |
iOS Safari validation
Tool | Description |
| Parse the viewport meta tag and validate against iOS best practices (width, zoom, viewport-fit) |
| Read CSS safe-area-inset values and check whether the page handles notched devices correctly |
| Audit the page for Add to Home Screen / PWA readiness (apple-touch-icon, manifest, splash screens, status bar) |
| Check page CSS against the live Safari session via CSS.supports() |
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 BrowserKnown 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
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/HayoDev/safari-devtools-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server