Built for macOS developers who need AI agents to debug Safari the way Chrome developers use chrome-devtools-mcp. Exposes Safari DevTools via WebDriver to capture network request bodies, inspect the accessibility tree with stable element UIDs, read computed CSS, manage cookies and storage, and grab element-level screenshots. Includes network and console monitoring with full stack traces, JavaScript evaluation, and AppleScript-powered tab management across windows. Ships with guided debugging prompts for accessibility audits, WebKit-specific quirks, and performance analysis. Auto-recovers dead SafariDriver sessions and offers a slim mode to reduce token usage in long conversations.
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.
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.
This project uses WebDriver for capabilities that scripting alone cannot provide:
sudo safaridriver --enable
Standard MCP config:
{
"mcpServers": {
"safari-devtools": {
"command": "npx",
"args": ["-y", "safari-devtools-mcp@latest"]
}
}
}
claude mcp add safari-devtools -- npx -y safari-devtools-mcp@latest
Or 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@latest
gemini mcp add safari-devtools -- npx -y safari-devtools-mcp@latest
Or 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:
npx-y safari-devtools-mcp@latestOr 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 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"
]
}
}
}
Navigate to https://example.com, take a snapshot, and list any console errors.
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"]
}
}
}
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 |
|---|---|
safari-devtools | Getting started — tool overview, recommended workflow, and Safari-specific notes |
a11y-debugging | Accessibility audit — a11y tree inspection, axe-core injection, WCAG checks |
safari-specific-debugging | Debug WebKit quirks — CSS prefixes, JS feature gaps, ITP/CORS issues |
performance-debugging | Performance analysis — Navigation Timing, Core Web Vitals, resource waterfall |
| Tool | Description |
|---|---|
list_console_messages | List console messages with filtering by level (log, warn, error) |
get_console_message | Get a detailed message including stack trace and arguments |
clear_console | Clear all captured console messages |
list_network_requests | Monitor network requests — Fetch, XHR, and resource loads |
get_network_request | Get full request/response details with headers and body |
clear_network | Clear all captured network requests |
evaluate_script | Execute JavaScript in the browser context and return results |
take_screenshot | Capture a PNG screenshot of the page or a specific element |
take_snapshot | Accessibility-tree snapshot of the DOM with stable UIDs for element targeting |
| Tool | Description |
|---|---|
get_page_content | Get the page title, URL, and visible text content |
get_html_source | Get the full HTML source of the page |
extract_links | Extract all links with their text, href, and rel attributes |
extract_meta | Extract meta tags (og:, twitter:, description, etc.) |
| Tool | Description |
|---|---|
list_pages | List all open Safari tabs across windows |
select_page | Switch to a specific tab |
new_page | Open a new tab and navigate to a URL |
close_page | Close a tab |
navigate_page | Navigate to a URL, go back, forward, or reload |
wait_for | Wait for specific text to appear on the page |
resize_page | Resize the browser window |
handle_dialog | Accept or dismiss browser dialogs (alert, confirm, prompt) |
| Tool | Description |
|---|---|
scroll | Scroll the page in any direction by a given amount |
scroll_to_element | Scroll an element into view by its UID |
| Tool | Description |
|---|---|
get_computed_style | Get computed CSS styles for any element by UID |
| Tool | Description |
|---|---|
get_cookies | Get browser cookies, optionally filtered by name or domain |
set_cookie | Set a cookie with name, value, and optional attributes |
delete_cookie | Delete a cookie by name, or delete all cookies |
get_storage | Read from localStorage or sessionStorage |
set_storage | Write a key-value pair to localStorage or sessionStorage |
delete_storage | Delete a key or clear all entries from localStorage/sessionStorage |
| Tool | Description |
|---|---|
click | Click an element by UID from a snapshot |
click_at | Click at specific x/y coordinates |
right_click | Right-click (context menu) on an element |
select_option | Select an option from a dropdown by value or label |
hover | Hover over an element |
fill | Type into an input field or select from a dropdown |
fill_form | Fill multiple form fields at once |
type_text | Type text into the currently focused element |
drag | Drag and drop between elements or coordinates |
press_key | Press a key or combination (e.g., Meta+A, Enter) |
upload_file | Upload a file through a file input |
| Tool | Description |
|---|---|
inspect_viewport_meta | Parse the viewport meta tag and validate against iOS best practices (width, zoom, viewport-fit) |
get_safe_area_insets | Read CSS safe-area-inset values and check whether the page handles notched devices correctly |
check_ios_web_app_readiness | Audit the page for Add to Home Screen / PWA readiness (apple-touch-icon, manifest, splash screens, status bar) |
check_webkit_compatibility | Check page CSS against the live Safari session via CSS.supports() |
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
osascript.therealtimex/browser-use
jae-jae/fetcher-mcp
merajmehrabi/puppeteer-mcp-server
com.thenextgennexus/playwright-mcp-server
saik0s/mcp-browser-use