用 Claude 接管 Safari：3 個步驟讓 AI 自動除錯省下 2 小時

寫網頁最痛苦的「手動除錯」時代結束了！

如果你是開發者，應該很熟悉這種情境：發現網頁在 Safari 上跑起來怪怪的，你得先打開開發者工具，盯著那一串看不懂的 Console Log，然後把錯誤訊息複製下來，貼給 ChatGPT 或 Claude，問它為什麼會這樣。AI 給你答案後，你再手動改程式碼，重新整理頁面，發現還是錯的… 如此循環 10 次，一個下午就沒了。😭

但最近 Apple 發布的 Safari Technology Preview 247 丟出了一個大震撼彈：Safari MCP server。簡單來說，它讓 AI 變成你的「自動化分身」，可以直接操作你的 Safari 瀏覽器，幫你找 Bug、跑測試，你只要下指令就好。

什麼是 MCP？你可以把它想成 AI 的「萬用插槽」

在進入細節前，得先解釋一下什麼是 MCP (Model Context Protocol)。你可以把 MCP 想像成一個「萬用轉接頭」。

以前 AI 就像一個住在房間裡的聰明人，他很有知識，但沒辦法走出房門去幫你做事。如果你要他幫你查資料，你得把資料「搬」進房間給他看。而 MCP 就像是幫 AI 開了一扇窗，讓他可以直接連接到外部的工具（例如你的資料庫、你的檔案夾，或是這次的 Safari 瀏覽器）。

當你把 Safari MCP server 接到像 Claude Code 這樣的 AI 代理人（AI Agent）時，AI 就不再只是「給你建議」，而是能直接「操作瀏覽器」。

AI 現在能幫你在 Safari 做哪些事？

這次的 Safari MCP server 提供了一整套工具，讓 AI 能像真人一樣操作瀏覽器，但速度快上百倍。以下是它能做的具體動作：

自動導航與操作：AI 可以自己 navigate_to_url（跳轉網頁）、create_tab（開新分頁），甚至幫你 page_interactions（模擬點擊、輸入文字、捲動頁面）。
深度診斷：它能直接讀取 browser_console_messages（控制台日誌）和 get_network_request（網路請求），不需要你手動複製貼上。
視覺確認：AI 可以直接下令 screenshot（截圖），確認網頁排版有沒有跑掉。
模擬設備：透過 set_viewport_size，AI 可以幫你測試在不同螢幕尺寸（例如 iPhone 或 iPad）下的顯示效果。

實戰對比：傳統除錯 vs AI 自動除錯

讓我們用一個台灣電商網站常見的「結帳按鈕失效」問題來對比：

❌ 傳統做法（耗時約 60 分鐘）：

開啟 Safari $ ightarrow$ 進入結帳頁 $ ightarrow$ 點擊按鈕 $ ightarrow$ 發現沒反應。
打開檢查工具 $ ightarrow$ 發現一個紅色的 JavaScript Error $ ightarrow$ 複製錯誤碼。
打開 Claude $ ightarrow$ 貼上錯誤碼 $ ightarrow$ 詢問原因 $ ightarrow$ 得到建議。
修改程式碼 $ ightarrow$ 儲存 $ ightarrow$ 重新整理頁面 $ ightarrow$ 測試 $ ightarrow$ 發現還有另一個 Bug。

✅ 使用 Safari MCP server（耗時約 5 分鐘）：

你對 AI 說：「幫我檢查結帳頁面的按鈕為什麼沒反應。」
AI 自動開啟 Safari $ ightarrow$ 導向結帳頁 $ ightarrow$ 模擬點擊 $ ightarrow$ 讀取 Console Log $ ightarrow$ 發現錯誤 $ ightarrow$ 自動分析程式碼 $ ightarrow$ 直接提出修正方案。
你確認後點擊「套用」，Bug 解決。