你好，我是まだ。

在前端開發中，逐一複製控制台錯誤或拍攝螢幕截圖交給AI，實在很麻煩呢。

其實我也一樣，每次在本地環境進行測試時，遇到錯誤就要打開DevTools，複製錯誤訊息再貼到Claude Code中...反覆這樣的工作。

不過，使用之前介紹的Playwright MCP後，情況大有改善，但現在又出現了一個更方便的工具。

總之，如果你專注於Chrome的網頁開發，只要使用Chrome DevTools MCP就可以完全解決問題。

這次，我將詳細說明Chrome DevTools MCP的特點、與Playwright MCP的區別，以及它的實際使用方法！

（補充：我用影片解釋了實際操作。如果有興趣，歡迎觀看）

忙碌人的摘要

• Chrome DevTools MCP是Google官方提供的瀏覽器自動化工具
• AI可以直接操作Chrome進行測試和分析
• 相比Playwright MCP更輕量，工具數量也達到26個
• 特別擅長性能測量的詳細分析
• 上下文使用量（Token使用量）與Playwright MCP幾乎相當
• 但因為是Chrome專用，對於其他瀏覽器測試則需要與Playwright MCP併用

什麼是Chrome DevTools MCP？

MCP的基本原理

MCP（Model Context Protocol）就像是連接AI與外部工具的共同規則。

以烹飪為例，料理的人（AI）依照食譜操作，並且有刀具或鍋子（工具）可以使用，這就是MCP的運作方式。

Chrome DevTools MCP則是這個工具箱中的「專門用來操作瀏覽器的工具」。

為什麼Google的產品更好？

Chrome DevTools MCP最大的優勢在於，它是由創建Chrome的Google自身提供的。

自家產品能實現深度整合，真是難能可貴。

1. 直接訪問Chrome的內部功能

不僅可以使用DevTools的所有功能，還可以獲取平常難以獲得的詳細性能數據。

「能運行」和「不能運行」Playwright MCP都能做到，但「為什麼不運行」和「哪裡慢」則是Chrome DevTools MCP的強項。

2. 由官方支持，運行穩定

與第三方產品不同，Chrome能即時針對更新進行響應，這也是一大優勢。

尤其在當前瀏覽器規範頻繁變更的情況下，官方支持帶來了增強的保障。

實際能做什麼？

接下來，我將介紹一些具體的場景，展示Chrome DevTools MCP可以做到的事情。

稍後也會解釋與Playwright MCP的區別，先讓我們看看Chrome DevTools MCP的特點。

活用場景1：自動發現性能問題

請回想一下傳統的手動流程。

打開DevTools的Performance標籤，開始記錄，重新載入頁面，分析結果...

這一系列動作，實在相當麻煩。

我在實務中也這樣做過多次，說實話，這需要相當多的時間。

LightHouse也很方便，但只停留在概覽層級的建議，詳細的瓶頸分析仍然需要人力介入。

於是，Chrome DevTools MCP登場了。

請測量這個頁面的性能，告訴我遲緩的原因。

隨隨便便這一句就可以了。

活用場景2：調查錯誤原因

假設在表單提交中出現錯誤。

然後，打開控制台，複製錯誤訊息，粘貼到AI中...

這個動作，已經不需要了。

不需要再手動複製錯誤訊息。

活用場景3：確認響應式設計

手機顯示、平板顯示、PC顯示。

每個設備上確認顯示狀況實在太麻煩了。

這時候，交給Chrome DevTools MCP就好。

請確認PC、平板、手機三種尺寸的顯示。

就這樣，它會自動執行類似以下的確認。

PC尺寸（1920x1080）

• 確認桌面顯示
• 拍攝螢幕截圖
• 偵測布局問題

平板尺寸（768x1024）

• 確認iPad尺寸的顯示
• 偵測中間尺寸的特有問題
• 確認觸控操作的可行性

手機尺寸（375x812）

• 確認iPhone X尺寸的顯示
• 確認直立畫面的顯示問題
• 檢查文本的可讀性

如果各尺寸的布局出現崩壞，則會具體報告是哪個元素出現問題。

Web開發，特別是響應式設計的確認工作非常繁雜，但使用Chrome DevTools MCP可以大幅提高效率。

設置方法

在這裡，我將介紹如何在各種AI工具中設置Chrome DevTools MCP。

主要編輯器的安裝方法可以在官方網站查詢，所以通常不會困惑，但還是提供一下說明。

在Claude Code中的設置（最簡單）

單行命令安裝

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

這樣就可以了。30秒就完成。

手動設置的情況

在專案的根目錄創建一個.mcp.json文件。

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

其他工具中的設置

在Cursor的情況下

在GitHub上有即時設置的按鈕，請點擊它。

或者，在設置畫面中添加以下JSON。

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

1. 設定 → MCP → 新增MCP伺服器
2. 粘貼上述的JSON設置
3. 保存

在Codex的情況下

通過命令添加（推薦）

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

使用TOML文件設定
添加到~/.codex/config.toml

[mcp_servers.chrome-devtools]
command = "npx"
args = ["chrome-devtools-mcp@latest"]

在VS Code（GitHub Copilot）的情況下

1. 打開命令面板（Ctrl+Shift+P）
2. 搜索「MCP: 開啟用戶配置」
3. 在打開的mcp.json中添加設置

或者執行以下命令在終端中添加

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

Playwright MCP和什麼不同？

到目前為止，我已經介紹了Chrome DevTools MCP的特點和設置方法。

那麼，與我之前介紹的Playwright MCP相比，有什麼不同呢？

讓我們具體來看看兩者的差異！

這次，將從工具數量、特點功能以及Token使用量三個方面進行比較。

Chrome DevTools MCP vs Playwright MCP

以下是我撰寫本文時的最新資訊。

坦白說，許多工具的功能是重疊的，例如打開瀏覽器、進行操作、檢查錯誤訊息這些功能都是相同的。

然而，Chrome DevTools MCP包含了許多專注於性能分析的工具。

• performance_start_trace：詳細的性能追蹤
• performance_stop_trace：停止追蹤和分析
• performance_analyze_insight：自動生成分析報告
• evaluate_script：執行任意JavaScript

通過組合這些工具，能進行更深層的性能分析。

對我這樣擁有Web開發經驗的人來說，這部分是相當麻煩的，因此將其交給AI通過MCP處理是非常方便的。

工具比較表

依據官方文檔，對各類別的工具數量及特點進行總結。

更具體的工具比較（詳細版）

這裡是按類別總結的具體工具名稱及其差異。

1. 基本瀏覽器操作

ChromeDevTools MCP（7個工具）

• click - 點擊元素
• fill - 輸入文本
• drag - 拖放操作
• hover - 滑鼠懸停
• fill_form - 一次填寫多個表單
• handle_dialog - 處理提示或對話框
• upload_file - 文件上傳

Playwright MCP（同等功能）

• browser_click - 點擊操作
• browser_type - 輸入文本
• browser_drag - 拖放操作
• browser_hover - 滑鼠懸停
• browser_fill_form - 表單批量填寫
• browser_handle_dialog - 處理對話框
• browser_file_upload - 文件上傳
• browser_press_key - 鍵盤操作（ChromeDevTools中沒有）
• browser_select_option - 下拉選單選擇（ChromeDevTools中沒有）

2. 頁面導航

ChromeDevTools MCP（7個工具）

• navigate_page - URL導航
• new_page - 創建新頁面
• close_page - 關閉頁面
• list_pages - 顯示打開的頁面列表
• select_page - 切換頁面
• navigate_page_history - 在歷史中前後導航
• wait_for - 等待元素或條件

Playwright MCP（5個工具）

• browser_navigate - URL導航
• browser_navigate_back - 返回操作
• browser_close - 關閉瀏覽器
• browser_wait_for - 等待處理
• browser_tabs - 標籤管理（創建・切換・刪除整合）

3. 性能分析【ChromeDevTools的獨特功能】

ChromeDevTools MCP（3個工具）

• performance_start_trace - 開始性能記錄
• performance_stop_trace - 停止性能記錄
• performance_analyze_insight - 詳細性能問題分析

Playwright MCP

• 標準功能無
• 可選項（--caps=tracing）可添加（無分析專用工具）

4. 網絡監控

ChromeDevTools MCP（2個工具）

• list_network_requests - 顯示網絡請求列表
• get_network_request - 獲取特定請求的詳細資料

Playwright MCP（1個工具）

• browser_network_requests - 僅顯示網絡請求列表

5. 調試功能

ChromeDevTools MCP（4個工具）

• evaluate_script - 執行JavaScript
• list_console_messages - 獲取控制台消息
• take_screenshot - 拍攝螢幕截圖
• take_snapshot - 獲取DOM快照

Playwright MCP（同等功能）

• browser_evaluate - 執行JavaScript
• browser_console_messages - 獲取控制台消息
• browser_take_screenshot - 拍攝螢幕截圖
• browser_snapshot - 獲取可及性樹

6. 模擬操作【ChromeDevTools的強項】

ChromeDevTools MCP（3個工具）

• emulate_cpu - 限制CPU速度
• emulate_network - 限制網絡速度
• resize_page - 更改視窗大小

Playwright MCP（1個工具）

• browser_resize - 僅更改視窗大小

Token使用量比較

接下來，我們將比較實際的Token使用量。

給出的提示如下。我在我的網站上進行了驗證。

在"https://school.learning-next.app/coupons"這個網站上，顯示了Udemy課程的優惠券列表。
請告訴我其中折扣率最高的（XX % OFF）項目的數字。
另外，請告訴我該課程的標題和折扣率。

然後，請轉到分發該優惠券的頁面。

接下來，請轉到"/docs"路徑，確認有哪些文件。

此外，轉頁過程中請檢查以下幾點：

- 控制台是否有錯誤
- meta description標籤的內容
- 每個頁面的設計

在這裡，頁面轉換了3次，同時還指示檢查控制台錯誤和拍攝螢幕截圖。

在開發完某個功能後，想像一下讓AI執行這些一連串的動作，以確認是否有問題。

然後我們分別使用Chrome DevTools MCP與Playwright MCP進行執行，對上下文使用量進行比較。
（此處將「Token使用量」視為同義）

我們在Claude Code中使用/context命令進行檢查。

結果：

※初始值的差異可不必在意。

Playwright MCP稍微少一些，但可以認為基本相當。

也許在執行更複雜的操作時會出現差異，但在這種簡單的檢查（稍微的功能開發最終檢查）中，使用兩者並無大差。

實際上，若使用Chrome DevTools即可進行性能分析，因此我認為以Chrome DevTools MCP為主使用最佳。

使用規範

那麼，根據到目前為止的內容，我們來思考實際上如何加以區分。

Chrome DevTools MCP適合的場景

首先，Chrome DevTools MCP擅長詳細的性能分析。

例如，可以詳細分析Web Vitals的每個指標。

• LCP（最大內容繪製）
• FID（首次輸入延遲）
• CLS（累積佈局偏移）

這些都是對SEO重要的指標，因此在重視性能優化的情況下，Chrome DevTools MCP是最佳選擇。

在Chrome中，它比Playwright MCP能更詳細地進行模擬操作。

例如，能更細緻地設定CPU或網絡速度限制。

因此在實務等級的前端開發中，主力使用Chrome DevTools MCP是有效率的。

Playwright MCP必要的場景

另一方面，Playwright MCP最大的優勢在於支援跨瀏覽器功能。

除了Chrome，還可以在Firefox和Safari（WebKit）中進行操作確認。

我在個人開發中也有這樣的經驗，CSS的flexbox在Safari中有時會崩壞。

在這種情況下，Chrome DevTools MCP無法進行檢測。

因此，在需要確認其他瀏覽器運行時，必須使用Playwright MCP。

在個人開發中，通常不太會考慮瀏覽器問題，但在客戶工作的情況下，這經常是必須的。
（特別是企業提供的系統，可能還需要支援IE...）

尤其在使用現代CSS功能的情況下，瀏覽器間的差異會更容易出現，因此需要格外小心。
因此，建議兩者皆可交替使用。

常見疑問與回答

現在針對Chrome DevTools MCP，我將回應一些預期的疑問。

Q：可以繼承已開啟的Chrome標籤嗎？登錄怎麼辦？

A：很遺憾，這無法做到。但不用擔心。

Chrome DevTools MCP將在調試模式下啟動全新的Chrome實例。

這將作為一個不同於現有瀏覽器的配置文件。

那麼，對於需要登錄的網站要怎麼辦呢？

只需在啟動後指示AI執行登錄流程即可。

具體流程：

1. 打開網站
2. 轉到登錄頁面
3. 輸入郵件和密碼
4. 點擊登錄按鈕
5. 當儀表板顯示後即為成功

這一系列動作，僅需一次指示給AI執行。

就我而言，我會在CLAUDE.md或AGENTS.md中寫下登錄步驟，每次都這樣執行。

# 登錄步驟

在開發環境中已創建了檢測用帳戶，請根據以下步驟進行登錄。
1. 打開https://example.com/login
2. 輸入郵件地址為"[email protected]"
3. 輸入密碼為"P@sSw0rd!"
4. 點擊「登錄」按鈕
5. 當儀表板顯示後即為成功

請注意，若需要二次身份驗證（2FA），則仍需手動處理。

Q：支援哪些瀏覽器？

A：各自的MCP支援的瀏覽器有所不同。

Chrome DevTools MCP

• 僅支援Chrome
• 支援最新版本及前幾個版本
• Chromium基礎的瀏覽器（如Edge）為非官方支援

Playwright MCP

• Chrome：完全支援
• Firefox：完全支援
• Safari：支援WebKit版本
• Edge：完全支援

Q：在本地開發環境中也能用嗎？

A：當然可以。

可以直接訪問localhost:3000或localhost:8080等本地伺服器。

例如，可以這樣：

Next.js開發中

打開localhost:3000，確認熱重載後的顯示。

Vite開發中

確認localhost:5173的構建結果，測量初始顯示的性能。

總結

你覺得如何？

Chrome DevTools MCP是Google官方提供的強大瀏覽器自動化工具。

尤其在實務前端開發中，當需要性能分析或詳細調試時非常有幫助。

在日常開發中，通常使用Chrome DevTools MCP就已經足夠，Playwright MCP則僅在需要進行跨瀏覽器測試時使用會更有效。

設置也非常簡單，馬上導入，讓繁瑣的檢查工作從此解放吧。

Claude Code 相關文章

我還寫了關於Claude Code或AI驅動開發的其他文章，如果有興趣的話，歡迎查看。

• Claude Code vs Codex CLI 你該選哪個？根據我使用的經驗從不同觀點解說
• SuperClaude是什麼？Claude Code的代碼質量提高了30%的神奇工具完全指南！
• Claude Code與Codex CLI的功能比較！從自定義命令、副代理到輸出樣式進行徹底解說

小小宣傳： 我正在製作Claude Code和Codex的Udemy課程

我主要開講AI驅動開發的Udemy課程，感謝大家的支持，已經拿到了多個暢銷產品的稱號。

在我的個人網站上還提供了最低價格的優惠券（最高可達90% OFF），歡迎參觀。

您的意見與新課程的需求也非常歡迎！

原文出處：https://qiita.com/tomada/items/8b22cac69b5247df1c20