Safari DevTools MCP

io.github.HayoDev由 GitHub 帳號 HayoDev 發布v1.8.1更新於 Oct 24, 2026

MCP server for Safari DevTools — browser debugging and automation for AI coding agents

已驗證STDIO僅桌面瀏覽器自動化開發者工具

概覽

AI 產生的概覽

讓編碼代理在 macOS 上控制並檢查執行中的 Safari 瀏覽器,用於除錯、自動化與測試。

可以做什麼
透過 SafariDriver 與 AppleScript 提供約 45 個工具來驅動 Safari。它能擷取主控台記錄與網路請求、執行 JavaScript、產生無障礙樹快照與元素截圖,並檢查計算後的 CSS。它也支援點擊、輸入、表單填寫、拖放、鍵盤快速鍵、分頁管理以及 Cookie 與 localStorage 操作,並提供 iOS Safari 與 WebKit 相容性檢查。
適用情境
適合在 Safari 中除錯或測試網頁的開發者,尤其是已熟悉 Chrome DevTools 工具鏈、希望取得對等 Safari 工作流程的人。也適用於無障礙稽核、效能分析以及 iOS Safari 或 PWA 就緒檢查。
執行需求
macOS,需安裝 Safari 與 SafariDriver;Node.js 18 或更新版本(建議 22+),透過 npx 執行。Safari 需啟用開發者功能與「允許遠端自動化」,並以 sudo safaridriver --enable 授權 SafariDriver。需要可見的瀏覽器視窗,不支援無頭模式。
安裝前請注意
此伺服器可讀取、寫入與刪除 Cookie、localStorage 與 sessionStorage,並能在頁面情境中執行任意 JavaScript。它能點擊、輸入、送出表單、上傳檔案、導覽或關閉分頁,因此可能變更線上資料或帳號。分頁管理需要為 osascript 授予 macOS 輔助使用權限。同一時間僅支援一個 WebDriver 工作階段。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Safari DevTools MCP,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only,透過 STDIO。 STDIO 服務會啟動本機處理程序,因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

README

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:
    bash
    sudo safaridriver --enable

Getting started

Standard MCP config:

json
{  "mcpServers": {    "safari-devtools": {      "command": "npx",      "args": ["-y", "safari-devtools-mcp@latest"]    }  }}
Claude Code
bash
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
bash
copilot mcp add safari-devtools -- npx -y safari-devtools-mcp@latest
Gemini CLI
bash
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
bash
git clone https://github.com/HayoDev/safari-devtools-mcp.gitcd safari-devtools-mcpnpm install && npm run build

Then point your MCP client to the built entry point:

json
{  "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:

json
{  "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:

PromptDescription
safari-devtoolsGetting started — tool overview, recommended workflow, and Safari-specific notes
a11y-debuggingAccessibility audit — a11y tree inspection, axe-core injection, WCAG checks
safari-specific-debuggingDebug WebKit quirks — CSS prefixes, JS feature gaps, ITP/CORS issues
performance-debuggingPerformance analysis — Navigation Timing, Core Web Vitals, resource waterfall

Tools (45)

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.)

Navigation

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

iOS Safari validation

ToolDescription
inspect_viewport_metaParse the viewport meta tag and validate against iOS best practices (width, zoom, viewport-fit)
get_safe_area_insetsRead CSS safe-area-inset values and check whether the page handles notched devices correctly
check_ios_web_app_readinessAudit the page for Add to Home Screen / PWA readiness (apple-touch-icon, manifest, splash screens, status bar)
check_webkit_compatibilityCheck page CSS against the live Safari session via CSS.supports()

Architecture

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

來源:README.md,提交 9bc2afb

工具

0
SourceWeft 尚未在沙箱中啟動過該軟體包,因此其工具未知。

版本歷史

1
  1. v1.8.1最新Sep 16, 2026

評分

已滿足適用檢查項的 50%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通25 分

    請保持端點能夠回應 MCP 握手;SourceWeft 每 30 天探測一次。

  • 已宣告認證方式10 分

    請在註冊中心條目中宣告憑證請求標頭,或保持端點能夠回應探測,以便判定其認證方式。

  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list,或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分