Safari Devtools Mcp

Safari DevTools MCP

safari-devtools-mcp を使うと、コーディングエージェント（Claude、Cursor、Copilot、Gemini など）が macOS 上で実行中の Safari ブラウザーを操作し、調査できます。Model-Context-Protocol（MCP）サーバーとして機能し、デバッグ、自動化、テストのために、AI コーディングアシスタントから Safari DevTools にアクセスできるようにします。

Chrome の開発者は、Google の chrome-devtools-mcp を使って、強力な AI デバッグ機能を利用できます。Safari の開発者にも同等のものが必要です。このプロジェクトは、同じツール名とパラメータースキーマを備えた同様のエクスペリエンスを Safari に提供するため、ブラウザー間を最小限の手間で切り替えられます。

変更履歴 | コントリビューション

注： このサーバーは、ブラウザーのコンテンツ（ページデータ、コンソールログ、ネットワークトラフィック）を MCP クライアントに公開します。セッション中は、機密性の高いウェブサイトの閲覧や認証情報の入力を避けてください。

safari-devtools-mcp を選ぶ理由

このプロジェクトでは、スクリプトだけでは実現できない機能に WebDriver を使用しています。

• ネットワークリクエスト／レスポンスボディの取得 — fetch と XHR の呼び出しを、完全なヘッダー、ペイロード、タイミング情報とともにインターセプトします
• アクセシビリティツリーによる DOM スナップショット — 壊れやすい CSS セレクターではなく、ページの再レンダリング後も維持される安定した要素 UID を使用します
• CSS の計算済みスタイルの調査 — 任意の要素から、任意の計算済みプロパティを読み取れます
• Cookie とストレージの管理 — Cookie、localStorage、sessionStorage の読み取り、書き込み、削除ができます
• 要素単位のスクリーンショット — ビューポート全体だけでなく、個々の要素をキャプチャできます
• セッションの自動復旧 — SafariDriver のセッションが終了したことを検知し、透過的に再接続します

主な機能

• ブラウザーデバッグ：コンソールログの取得、ネットワークリクエストの調査、JavaScript の評価を、スタックトレースやリクエスト／レスポンスの詳細情報とともに行えます。
• 信頼性の高い自動化：アクセシビリティツリーのスナップショットと安定した UID を使って、クリック、入力、フォームへの入力、ドラッグ＆ドロップ、キーボードショートカットの実行ができます。
• macOS とのネイティブ連携：AppleScript を使って、複数のウィンドウにまたがる Safari タブの一覧表示、切り替え、操作を行えます

要件

• macOS（Safari と SafariDriver は Apple 専用です）
• Node.js 18 以降（22 以降を推奨）
• リモートオートメーションを有効にした Safari

Safari のセットアップ

1. Safari > 設定 > 詳細を開き、**「Web開発者向けの機能を表示」**にチェックを入れます
2. 開発メニュー > **「リモートオートメーションを許可」**にチェックを入れます
3. SafariDriver を承認します：

   sudo safaridriver --enable
   

はじめに

標準の MCP 設定：

{
  "mcpServers": {
    "safari-devtools": {
      "command": "npx",
      "args": ["-y", "safari-devtools-mcp@latest"]
    }
  }
}

claude mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

copilot mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

gemini mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

git clone https://github.com/HayoDev/safari-devtools-mcp.git
cd safari-devtools-mcp
npm install && npm run build

{
  "mcpServers": {
    "safari-devtools": {
      "command": "node",
      "args": [
        "/path/to/safari-devtools-mcp/build/src/bin/safari-devtools-mcp.js"
      ]
    }
  }
}

最初のプロンプト

https://example.com に移動し、スナップショットを取得して、コンソールエラーを一覧表示してください。

スリムモード

ツールの説明を短くしてトークン使用量を削減するには、--slim を使用します。コンテキストが限られたモデルや長時間の会話で役立ちます：

{
  "mcpServers": {
    "safari-devtools": {
      "command": "npx",
      "args": ["-y", "safari-devtools-mcp@latest", "--slim"]
    }
  }
}

プロンプト（スキル）

このサーバーは、ガイド付きデバッグワークフローを MCP プロンプトとして提供します。プロンプトに対応したクライアント（例：Claude Desktop、Claude Code）では、名前を指定して呼び出せます：

ツール（45）

デバッグ

ページコンテンツ

ナビゲーション

スクロール

CSS の検査

Cookie とストレージ

入力の自動化

iOS Safari の検証

アーキテクチャ

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

既知の制限事項

• 単一セッション：Safari で同時に使用できる WebDriver セッションは 1 つのみです。複数のインスタンスを実行することはできません。
• macOS のみ：Safari と SafariDriver は Apple 専用のため、このサーバーは Linux や Windows では動作しません。
• ヘッドレスモード非対応：Safari はヘッドレス動作をサポートしていません。ブラウザーウィンドウを表示する必要があります。
• コンソールの注入前の欠落：キャプチャスクリプトの注入前に記録されたコンソールメッセージはキャプチャされません。
• ネットワークの注入前の欠落：注入前に行われたネットワークリクエストは、詳細が限定された状態（タイミングとサイズのみで、ヘッダーやステータスコードは含まれません）で Performance API 経由で補完されます。
• PNG のみ：Safari WebDriver がサポートするスクリーンショット形式は PNG のみです。JPEG と WebP は利用できません。ページ全体のキャプチャには対応していません。
• AppleScript の権限：タブ管理機能を使うには、osascript に対する macOS のアクセシビリティ権限が必要です。

クレジット

• chrome-devtools-mcp（Google/ChromeDevTools 提供）— 本プロジェクトが手本とし、インターフェース標準として採用したプロジェクトです。Chrome と Safari をシームレスに切り替えられるよう、ツール名とスキーマは意図的に互換性を持たせています。
• safari-mcp-server — Safari MCP 統合の先行事例として、開発中に参考にしました。

ライセンス

MIT