CyberAgent 是日本頂尖的 IT 公司，提供各種線上服務，包括熱門的 Ameba 部落格平台。團隊面臨重大挑戰，因為自動測試難以偵測到執行階段錯誤，需要耗時的手動介入。
本文將探討 CyberAgent 如何使用 Chrome 開發人員工具 Model Context Protocol (MCP) 伺服器，從手動程序轉移至自動化工作流程，節省開發人員時間並提升測試流程的可靠性。
挑戰：手動且有限的工作流程
Ameba 設計系統 Spindle 是一組可重複使用的 UI 元件，用於建構網誌平台的介面。這項功能依賴 Storybook 進行 UI 元件開發和測試。
過去，CyberAgent 解決執行階段錯誤的工作流程是重複的手動週期。開發人員會在瀏覽器中檢查每個元件， 套用修正程式，然後再次檢查。由於網頁和元件數量龐大，這種依賴視覺確認的方式有其限制，因此難以找出所有錯誤。
解決方法：使用 Chrome 開發人員工具 MCP 偵錯代理程式
為克服這項挑戰，團隊轉向使用 Chrome 開發人員工具 MCP 伺服器。 他們按照官方入門指南完成簡單設定後，就能立即指示 AI 代理 (Claude) 自動執行整個偵錯工作流程。
只要提供單一提示，代理程式就能處理 Chrome 開發人員工具 MCP 擷取的瀏覽器狀態資訊、存取檔案系統內容，以及讀取控制台記錄，進而與開發人員工具互動。接著，這項工具會自動找出錯誤並修正，完全不必手動介入。
他們使用的初始提示如下：
Currently, spindle-ui's Storybook is running, but runtime errors may be occurring.
Please use chrome-dev-tools-mcp to confirm the operation of the Story in the following steps:
Identify all target Stories. Confirm each and every one, no matter how many there are.
Confirm that the Story is displayed correctly using dev-tools-mcp.
Fix all errors.
Click and move through each Story from the top in the browser opened with mcp to confirm.
AI 代理程式接著稽核 Storybook 執行個體，瀏覽整個故事以讀取錯誤、套用程式碼修正，並確認每項修正是否成功。
影響：從手動檢查到自動修正
結果很快就出爐。大約一小時後，AI 代理程式自主稽核了 Spindle 設計系統中的所有 32 個元件和 236 個故事。
雖然代理程式識別並修正了一個執行階段錯誤和兩個警告，但實驗的真正價值在於確保負面結果：確認程式庫絕大多數都沒有錯誤，不需要開發人員手動點選數百種狀態。
過去，這類全面稽核不僅耗費眼力，也容易出現人為疏失。將這項工作交由 Chrome 開發人員工具 MCP 處理後，CyberAgent 達成下列目標：
- 100% 稽核涵蓋率：代理程式會機械式地驗證每則故事，確保「乾淨」的元件確實乾淨，這種程度的嚴謹手動難以維持。
- 零誤判：自動測試套件可能會遺漏視覺執行階段異常狀況，但 MCP 伺服器可讓代理程式驗證實際的瀏覽器狀態，確保高可靠性。
- 認知卸載：開發人員可信任系統會處理重複的「苦差事」，讓他們專注於複雜的邏輯，而非例行檢查。
如網頁開發人員 Kota Yanagi 所述，這項優點在於責任轉移：
「以前我會在瀏覽器中手動檢查執行階段錯誤和警告，現在可以輕鬆卸載這項工作，我也很喜歡現在能以自然語言描述複雜的作業，讓工具直接從讀取錯誤記錄到修正問題。」
這項自動化工作流程的成功，甚至促使 CyberAgent 更新 AI 代理程式的內部主軸代理程式指南。本指南現在將 Chrome 開發人員工具 MCP 設為 AI 代理程式 Claude 的預設偵錯伺服器，正式將其使用方式列為最佳做法，並展現對這項全新 AI 技術輔助程序的信心。
具體修正內容已在兩個提取要求中實作，您可以在 GitHub 上查看：
CyberAgent 進一步改良提示，並發布最終輸出結果。
意見回饋和未來計畫
CyberAgent 對 Chrome 開發人員工具 MCP 提供的彈性和選項數量感到滿意。他們也提供寶貴的意見回饋，有助於日後改善，並指出這項工具功能強大，但使用進階功能需要具備一定程度的知識。
展望未來，團隊有興趣與開發人員工具的「效能」面板進行更深入的整合。他們設想的工作流程是，代理商可以驗證網站體驗核心指標，然後使用「效能」面板進行更深入的效能分析，並建議改善措施。
CyberAgent 的開發人員專家 Kazunari Hara 分享了他的驚奇體驗，並強調這項工具的效率和未來應用潛力：
「當我看到瀏覽器直接從記錄自動修正錯誤時，簡直驚呆了。現在可以自動執行過去會遺漏或耗時的作業，進而提升開發效率。由於 Chrome 開發人員工具 MCP 在實際執行階段環境中提供許多功能，我預期這項工具在未來許多不同情況下都能派上用場。」
結論
CyberAgent 將 Chrome 開發人員工具 MCP 整合到工作流程後，成功自動執行複雜又耗時的偵錯工作。他們的經驗顯示，AI 輔助工具在提升開發人員工作效率方面，具有無比的潛力。
這項程序完全自動化，因此不需要手動檢查，也不會遺漏任何錯誤。雖然目前的實作方式已證明其價值，但 CyberAgent 的意見回饋指出，Chrome 開發人員工具 MCP 的未來發展令人期待，因為這項工具可直接在瀏覽器中，協助他們執行更精密的效能分析和最佳化工作。