Safari MCP

為網頁開發者推出的 Safari MCP 伺服器

2026 年 7 月 1 日

作者：Saron Yitbarek

在 Safari Technology Preview 247 中，我們推出了 Safari MCP 伺服器——一個專為網頁開發者設計的 Model Context Protocol 伺服器，能讓你的網頁開發與除錯工作流程更快速、更強大。我們知道代理程式在編碼過程中日益重要，而 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 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 中的個人資訊（例如自動填寫或其他瀏覽器活動）。當它擷取頁面內容、螢幕截圖或主控台記錄時，這些資料會直接傳送到你正在執行的代理程式——而不是傳送給 Apple。此後這些資料的處理方式取決於你使用的代理程式和模型。如同任何你授予瀏覽器存取權的代理程式一樣，請只使用你信任的代理程式。

我們為何打造這個工具

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

透過建立這個資源，我們希望讓在 Safari 中測試和除錯變得前所未有的容易，方法是幫助你的代理程式了解事物在瀏覽器中的外觀和運作方式。

如果你最終嘗試了它，或者這是你第一次使用 MCP 伺服器，請告訴我們你的想法。

在線上找到我們：Saron Yitbarek 在 BlueSky 上，Jen Simmons 在 Bluesky / Mastodon 上，以及 Jon Davis 在 Bluesky / Mastodon 上。如果你遇到任何問題，請提交 WebKit 錯誤報告。提交問題確實能帶來改變。