MCP server for Safari DevTools — browser debugging and automation for AI coding agents
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.
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.
safari-devtools-mcp on npm is all you need. Most clients run it directly, so configuration is a few lines and a restart.
Everything the assistant can do here goes through one of these:
Element — level screenshots** — capture individual elements, not just the full viewportDebugging — The Debugging tool exposed by this serverNavigation — The Navigation tool exposed by this serverScroll — The Scroll tool exposed by this serverThis 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.
| Tool | What it does |
|---|---|
| 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. |
{
"mcpServers": {
"safari-devtools": {
"command": "npx",
"args": ["-y", "safari-devtools-mcp"]
}
}
}Add to claude_desktop_config.json, then restart Claude Desktop.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
Industrial-strength web extraction — render, scrape, crawl and search entire sites into clean markdown.
The original Chromium automation reference server — simple, screenshot-driven browser control.
Give your coding agent the full DevTools toolbox: traces, network, console, heap snapshots and Lighthouse.
Puppeteer-powered browser control that drives pages from the accessibility tree instead of pixels.
Cloud browsers for AI agents — automation sessions that run in Browserbase's fleet, not on your machine.