Safari MCP

官方

Safari MCP 伺服器讓您的代理程式能夠連接到 Safari 瀏覽器視窗，從而了解您的程式碼在瀏覽器中的實際渲染情況。

造訪 webkit.org試用此 MCP贊助

你可以用 Safari MCP 做什麼？

  • 檢查即時頁面結構 — 請你的助理透過擷取 Safari 分頁目前的 DOM 或文字內容，以了解實際渲染的結果。
  • 偵錯主控台與網路問題 — 請你的助理擷取緩衝的主控台日誌，或列出網路請求摘要，以診斷錯誤。
  • 自動化瀏覽器互動 — 指示你的助理透過點擊、輸入或捲動頁面，以測試工作流程或重現錯誤。
  • 擷取視覺證據 — 使用 screenshot 請求目前頁面的 PNG 截圖，以確切查看使用者所見的內容。
  • 測試響應式版面 — 請你的助理模擬 CSS 媒體類型（例如 "print"），或調整檢視區大小，以驗證不同斷點下的設計。
  • 評估自訂 JavaScript — 指示你的助理在頁面上執行任意 JS，以檢查狀態或計算效能指標。

文件

更新： 在 Safari 27 和 Safari Technology Preview 247 中，我們推出了 Safari MCP 伺服器——一個專為網頁開發者設計的 Model Context Protocol 伺服器，讓你的網頁開發與除錯流程變得更快、更強大。我們知道代理程式（agent）在編寫程式流程中扮演越來越重要的角色，而 Safari MCP 伺服器能讓你的代理程式透過連接到 Safari 瀏覽器視窗，實際了解你的程式碼在瀏覽器中的渲染結果。

任何相容 MCP 的用戶端都可以連接到 Safari MCP 伺服器。透過將你的代理程式連接到 Safari 瀏覽器視窗，你的代理程式可以模擬使用者體驗，取得更自主除錯所需的資訊，例如 DOM 存取、網路請求、螢幕截圖和主控台輸出。

它能加速你的除錯流程，讓你能夠舒適地待在終端機中，減少在視窗之間來回切換和輸入提示詞來除錯的次數。

使用情境

如果你為網頁進行開發，你一定知道除錯的循環過程。通常會是這樣：

你在瀏覽器中看到網站出現問題。你打開主控台尋找問題。你點進樣式分頁。你看到哪裡壞了。你回到程式碼進行修復。或者你可能截圖、向代理程式詳細描述問題，然後讓它幫你修復。希望它能一次搞定，錯誤被修正，然後你可以繼續下一步。

但當問題沒有被修復時，你又會重複整個流程——瀏覽器、提示詞、代理程式。

一次又一次，直到你終於解決這個錯誤。

無論你使用哪種瀏覽器或工具，除錯流程都需要大量的點擊、工具和視窗切換才能完成一次修復，但其實不必如此。如果你已經在開發流程中使用代理程式，Safari MCP 伺服器能讓你的除錯變得更快、更有效率。

Safari MCP 伺服器讓你的代理程式能夠自行處理更多除錯和疑難排解工作。以下是一些它能協助的範例：

在 Safari 中進行網頁開發。 下次你在 Safari 中開發時，將能體驗升級後的流程。你的代理程式已經在協助你處理程式碼，現在它能做得更多——實際檢查你的程式碼在 Safari 中的渲染結果。

提升與 Safari 的相容性。 只在單一瀏覽器中測試意味著可能遺漏其他瀏覽器中的潛在錯誤，讓那些使用者獲得較差的體驗。有了 Safari MCP 伺服器，你的代理程式可以在 Safari 中開啟你的網站、檢查計算後的樣式、確認版面配置，並與你的預期進行比對，而無需切換視窗。

分析效能。 找出網站中哪些部分拖慢了速度。Safari MCP 伺服器讓你的代理程式在頁面上執行 JavaScript，以呈現效能指標，例如導覽時間和資源載入時間，藉此精準定位拖慢網站的因素，並著手進行正確的修復。

檢查無障礙性。 Safari MCP 伺服器讓你的代理程式檢查常見的無障礙問題，例如缺少標籤、不正確的 ARIA 屬性以及對比度不足，讓你能及早發現影響使用者的問題。

驗證任何使用者狀態。 確認頁面正常運作且顯示符合預期。你的代理程式可以檢查表單狀態、使用選擇器查詢元素、確認特定互動、顯示結帳流程的不同狀態等等。減少手動檢查的時間，讓代理程式為你代勞。

這些只是眾多使用情境中的幾個例子。無論你決定如何實作，Safari MCP 伺服器都能幫助你的代理程式為你做得更多，並減少網頁開發中常見的來回往返。更順暢的流程意味著更多錯誤被解決、更快樂的使用者，以及更好的產品。

工具

以下是可用的工具及其功能：

工具說明
browser_console_messages回傳目前或指定分頁的緩衝主控台日誌
browser_dialogs列出並回應瀏覽器對話方塊（接受、關閉，或為 JS 提示輸入文字）
close_tab依其控制代碼關閉瀏覽器分頁
create_tab建立新的瀏覽器分頁，可選擇載入 URL
evaluate_javascript在頁面內執行 JavaScript 程式碼並回傳結果
get_network_request取得單一記錄網路請求的完整詳細資料（標頭、內文、時間）
get_page_content以各種格式（Markdown、HTML、JSON 等）擷取頁面的文字內容
list_network_requests列出目前分頁的網路請求摘要（URL、方法、狀態、時間）
list_tabs列出所有開啟的瀏覽器分頁及其控制代碼和 URL
navigate_to_url導覽至 URL 並回傳載入頁面的內容
page_info取得目前頁面的資訊：URL、標題和載入狀態
page_interactions依序執行 DOM 互動：點擊、輸入、捲動、懸停、按鍵等
screenshot將目前頁面擷取為 PNG 螢幕截圖
set_emulated_media模擬 CSS 媒體類型（例如「print」）以進行響應式設計測試
set_viewport_size以 CSS 像素設定瀏覽器視窗尺寸
switch_tab依其控制代碼切換到不同的瀏覽器分頁
wait_for_navigation等待目前頁面完成載入；回傳最終 URL 和標題

有了 Safari MCP 伺服器，你不再需要撰寫完美的提示詞，仔細向代理程式描述你在瀏覽器中遇到的狀況。你可以讓代理程式有能力自行探索。

如何開始

Safari 27

首先，你需要安裝 Safari 27。安裝完成後，請務必啟用網頁開發者功能和遠端自動化。若要啟用網頁開發者功能，請選擇 Safari > 設定 > 進階 > 勾選「顯示網頁開發者功能」核取方塊。接著前往 Safari > 設定 > 開發者 > 勾選「允許遠端自動化和外部代理程式」。

如果你使用 Claude，可以在終端機中使用以下指令：

claude mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

如果你使用 Codex，可以在終端機中使用以下指令：

codex mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

對於其他代理程式，你可以將以下內容放入 mcp.json 或 config.json 檔案中。

{
  "mcpServers": {
    "safari-mcp": {
      "command": "/usr/bin/safaridriver",
      "args": ["--mcp"]
    }
  }
}

Safari Technology Preview

首先，你需要安裝 Safari Technology Preview。安裝完成後，請務必啟用 Safari 設定 > 進階 > 顯示網頁開發者功能。接著前往 Safari 設定 > 開發者 > 啟用遠端自動化和外部代理程式。

如果你使用 Claude，可以在終端機中使用以下指令：

claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

如果你使用 Codex，可以在終端機中使用以下指令：

codex mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

對於其他代理程式，你可以將以下內容放入 mcp.json 或 config.json：

"safari-mcp-stp": {
  "command": "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver",
  "args": ["--mcp"] 
}

請注意，雖然上述程式碼將伺服器命名為 safari-mcp-stp，你可以隨意命名，甚至只使用 safari。安裝好 Safari MCP 伺服器後，請嘗試以下其中一個提示詞：

Find bugs on my site in Safari

How accessible is my site in Safari?

See how my website performs in Safari

雖然每個代理程式的運作方式略有不同，但通常不需要明確告知它使用 Safari MCP 伺服器——它會自行判斷。像上面這樣簡單的提示詞就足以啟動 MCP。

以下是使用 Safari MCP 伺服器的代理程式對話可能進行的方式：

你：收到一個錯誤回報——Safari 中航班頁面有東西壞了。你能找出問題所在嗎？

代理程式：好的，讓我來看看。

代理程式：我在 Safari 的航班頁面發現了兩個不同的錯誤。要我兩個都修復嗎？

你：好的。還有其他可能對 Safari 使用者造成問題的地方嗎？

代理程式：是的，還有兩件事值得標記。結果顯示動畫靜默失效，而且 API 伺服器啟動日誌有誤。我也要一併處理嗎？

你只需要一個初始請求就能開始，在 Safari MCP 伺服器的協助下，你的代理程式就能接手後續的工作。

Safari MCP 伺服器完全在你的本機機器上執行，不會自行發出任何網路呼叫。它也無法存取你在 Safari 中的個人資訊（例如 AutoFill 或其他瀏覽器活動）。當它擷取頁面內容、螢幕截圖或主控台日誌時，這些資料會直接傳送到你正在執行的代理程式——而非 Apple。這些資料之後的處理方式取決於你使用的代理程式和模型。如同任何你授予瀏覽器存取權限的代理程式，請只使用你信任的代理程式。

我們為何打造這個工具

建立網頁的方式有很多種，無論是否使用 AI。如果 AI 是你工作流程的一部分，我們相信這個工具能讓它更具生產力。如果不是，那也沒關係。

透過建立這項資源，我們希望能讓在 Safari 中測試和除錯變得比以往更容易，協助你的代理程式理解事物在瀏覽器中的樣貌和運作方式。

如果你嘗試使用，或者這是你第一次使用 MCP 伺服器，歡迎告訴我們你的想法。

在網路上找到我們：Saron Yitbarek 在 Bluesky、Jen Simmons 在 Bluesky / Mastodon、Jon Davis 在 Bluesky / Mastodon。如果你遇到任何問題，請提交 WebKit 錯誤回報。提交問題確實會帶來改變。