Chrome DevTools MCP

chính thức

Máy chủ MCP Chrome DevTools chính thức để điều khiển và kiểm tra trình duyệt Chrome trực tiếp từ các tác nhân mã hóa như Gemini, Claude, Cursor và Copilot.

Bạn có thể làm gì với Chrome Dev Tools MCP?

  • Ghi lại và phân tích dấu vết hiệu suất — bắt đầu một dấu vết bằng performance_start_trace, dừng nó bằng performance_stop_trace, sau đó nhận thông tin chi tiết có thể hành động qua performance_analyze_insight.
  • Kiểm tra hoạt động mạng — liệt kê tất cả yêu cầu bằng list_network_requests và truy xuất chi tiết từng yêu cầu với get_network_request.
  • Gỡ lỗi lỗi bảng điều khiển và trạng thái thời gian chạy — truy xuất thông báo bảng điều khiển qua list_console_messagesget_console_message, hoặc thực thi JavaScript tùy ý với evaluate_script.
  • Tự động hóa tương tác trình duyệt — điều hướng, nhấp, điền biểu mẫu và mô phỏng đầu vào bằng các công cụ như navigate_page, click, fillpress_key.
  • Chụp trạng thái trực quan — chụp ảnh màn hình trang bằng take_screenshot hoặc ảnh chụp nhanh khả năng truy cập bằng take_snapshot.
  • Chẩn đoán vấn đề bộ nhớ — chụp ảnh nhanh heap bằng take_heapsnapshot và kiểm tra các bộ giữ lại đối tượng, bộ thống trị hoặc so sánh các ảnh nhanh.

Tài liệu

Chrome DevTools cho tác nhân

npm chrome-devtools-mcp package

Chrome DevTools cho tác nhân (chrome-devtools-mcp) cho phép tác nhân lập trình của bạn (như Antigravity, Claude, Cursor hoặc Copilot) điều khiển và kiểm tra một trình duyệt Chrome đang chạy. Nó hoạt động như một máy chủ Model-Context-Protocol (MCP), cung cấp cho trợ lý lập trình AI của bạn quyền truy cập vào toàn bộ sức mạnh của Chrome DevTools để tự động hóa đáng tin cậy, gỡ lỗi chuyên sâu và phân tích hiệu suất. Một CLI cũng được cung cấp để sử dụng mà không cần MCP.

Tham khảo công cụ | Nhật ký thay đổi | Đóng góp | Khắc phục sự cố | Nguyên tắc thiết kế

Tính năng chính

  • Nhận thông tin chi tiết về hiệu suất: Sử dụng Chrome DevTools để ghi lại các trace và trích xuất thông tin chi tiết về hiệu suất có thể hành động.
  • Gỡ lỗi trình duyệt nâng cao: Phân tích các yêu cầu mạng, chụp ảnh màn hình và kiểm tra thông báo console của trình duyệt (với stack trace đã được ánh xạ nguồn).
  • Tự động hóa đáng tin cậy. Sử dụng puppeteer để tự động hóa các hành động trong Chrome và tự động chờ kết quả hành động.

Tuyên bố từ chối trách nhiệm

chrome-devtools-mcp tiết lộ nội dung của phiên bản trình duyệt cho các máy khách MCP cho phép họ kiểm tra, gỡ lỗi và sửa đổi bất kỳ dữ liệu nào trong trình duyệt hoặc DevTools. Tránh chia sẻ thông tin nhạy cảm hoặc cá nhân mà bạn không muốn chia sẻ với các máy khách MCP.

chrome-devtools-mcp chỉ hỗ trợ chính thức Google Chrome và Chrome for Testing. Các trình duyệt dựa trên Chromium khác có thể hoạt động, nhưng điều này không được đảm bảo và bạn có thể gặp phải hành vi không mong đợi. Sử dụng theo quyết định của riêng bạn. Chúng tôi cam kết cung cấp các bản sửa lỗi và hỗ trợ cho phiên bản mới nhất của Extended Stable Chrome.

Các công cụ hiệu suất có thể gửi URL trace đến Google CrUX API để lấy dữ liệu trải nghiệm người dùng thực. Điều này giúp cung cấp bức tranh hiệu suất toàn diện bằng cách trình bày dữ liệu thực địa cùng với dữ liệu phòng thí nghiệm. Dữ liệu này được thu thập bởi Chrome User Experience Report (CrUX). Để tắt tính năng này, hãy chạy với cờ --no-performance-crux.

Thống kê sử dụng

Google thu thập thống kê sử dụng (chẳng hạn như tỷ lệ thành công của lệnh gọi công cụ, độ trễ và thông tin môi trường) để cải thiện độ tin cậy và hiệu suất của Chrome DevTools MCP.

Việc thu thập dữ liệu được bật theo mặc định. Bạn có thể chọn không tham gia bằng cách truyền cờ --no-usage-statistics khi khởi động máy chủ:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google xử lý dữ liệu này theo Chính sách quyền riêng tư của Google.

Việc Google thu thập thống kê sử dụng cho Chrome DevTools MCP độc lập với thống kê sử dụng của trình duyệt Chrome. Việc chọn không tham gia vào số liệu của Chrome không tự động chọn bạn không tham gia vào công cụ này và ngược lại.

Việc thu thập bị tắt nếu các biến môi trường CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS hoặc CI được đặt.

Kiểm tra cập nhật

Theo mặc định, máy chủ định kỳ kiểm tra registry npm để tìm bản cập nhật và ghi lại thông báo khi có phiên bản mới hơn. Bạn có thể tắt các kiểm tra cập nhật này bằng cách đặt biến môi trường CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS.

Yêu cầu

  • Node.js phiên bản LTS.
  • Chrome phiên bản ổn định hiện tại hoặc mới hơn.
  • npm

Bắt đầu

Thêm cấu hình sau vào máy khách MCP của bạn:

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

[!LƯU Ý] Sử dụng chrome-devtools-mcp@latest đảm bảo rằng máy khách MCP của bạn sẽ luôn sử dụng phiên bản mới nhất của máy chủ Chrome DevTools MCP.

Nếu bạn chỉ quan tâm đến các tác vụ trình duyệt cơ bản, hãy sử dụng chế độ --slim:

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

Xem Tham khảo công cụ Slim.

Cấu hình máy khách MCP

Amp Làm theo https://ampcode.com/manual#mcp và sử dụng cấu hình được cung cấp ở trên. Bạn cũng có thể cài đặt máy chủ Chrome DevTools MCP bằng CLI:
amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Antigravity

Để sử dụng máy chủ Chrome DevTools MCP, hãy làm theo hướng dẫn từ tài liệu của Antigravity để cài đặt máy chủ MCP tùy chỉnh. Thêm cấu hình sau vào cấu hình máy chủ MCP:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

Điều này sẽ làm cho máy chủ Chrome DevTools MCP tự động kết nối với trình duyệt mà Antigravity đang sử dụng. Nếu bạn không sử dụng cổng 9222, hãy đảm bảo điều chỉnh cho phù hợp.

Chrome DevTools MCP sẽ không tự động khởi động phiên bản trình duyệt bằng cách tiếp cận này vì máy chủ Chrome DevTools MCP kết nối với trình duyệt tích hợp của Antigravity. Nếu trình duyệt chưa chạy, bạn phải khởi động nó trước bằng cách nhấp vào biểu tượng Chrome ở góc trên bên phải.

Claude Code

Cài đặt qua CLI (chỉ MCP)

Sử dụng Claude Code CLI để thêm máy chủ Chrome DevTools MCP (hướng dẫn):

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

Cài đặt dưới dạng Plugin (MCP + Kỹ năng)

[!LƯU Ý] Nếu bạn đã cài đặt Chrome DevTools MCP trước đó cho Claude Code, hãy đảm bảo xóa nó khỏi cài đặt và tệp cấu hình của bạn trước.

Để cài đặt Chrome DevTools MCP với các kỹ năng, hãy thêm registry marketplace trong Claude Code:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

Sau đó, cài đặt plugin:

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Khởi động lại Claude Code để máy chủ MCP và các kỹ năng tải (kiểm tra bằng /skills).

[!MẸO] Nếu cài đặt plugin thất bại với lỗi Failed to clone repository (ví dụ: sự cố kết nối HTTPS đằng sau tường lửa công ty), hãy xem hướng dẫn khắc phục sự cố để biết các giải pháp thay thế hoặc sử dụng phương pháp cài đặt CLI ở trên thay thế.

Cline Làm theo https://docs.cline.bot/mcp/configuring-mcp-servers và sử dụng cấu hình được cung cấp ở trên.
Codex Làm theo hướng dẫn cấu hình MCP sử dụng cấu hình tiêu chuẩn từ trên. Bạn cũng có thể cài đặt máy chủ Chrome DevTools MCP bằng Codex CLI:
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Trên Windows 11

Định cấu hình vị trí cài đặt Chrome và tăng thời gian chờ khởi động bằng cách cập nhật .codex/config.toml và thêm các tham số envstartup_timeout_ms sau:

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000
Command Code

Sử dụng Command Code CLI để thêm máy chủ Chrome DevTools MCP (hướng dẫn MCP):

cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
Copilot CLI

Khởi động Copilot CLI:

copilot

Bắt đầu hộp thoại để thêm máy chủ MCP mới bằng cách chạy:

/mcp add

Định cấu hình các trường sau và nhấn CTRL+S để lưu cấu hình:

  • Tên máy chủ: chrome-devtools
  • Loại máy chủ: [1] Local
  • Lệnh: npx -y chrome-devtools-mcp@latest
Copilot / VS Code

Cài đặt dưới dạng Plugin (Khuyến nghị)

Cách dễ nhất để bắt đầu là cài đặt chrome-devtools-mcp dưới dạng plugin tác nhân. Điều này đóng gói máy chủ MCP và tất cả kỹ năng cùng nhau, vì vậy tác nhân của bạn có được cả công cụ và hướng dẫn chuyên gia cần thiết để sử dụng chúng hiệu quả.

  1. Mở Bảng lệnh (Cmd+Shift+P trên macOS hoặc Ctrl+Shift+P trên Windows/Linux).
  2. Tìm kiếm và chạy lệnh Chat: Install Plugin From Source.
  3. Dán tên kho lưu trữ của chúng tôi: ChromeDevTools/chrome-devtools-mcp.

Vậy là xong! Tác nhân của bạn giờ đây đã được tăng cường sức mạnh với các khả năng của Chrome DevTools.


Cài đặt dưới dạng Máy chủ MCP (chỉ MCP)

Nhấp vào nút để cài đặt:

Install in VS Code

Install in VS Code Insiders

Hoặc cài đặt thủ công:

Làm theo hướng dẫn cấu hình MCP của VS Code sử dụng cấu hình tiêu chuẩn từ trên hoặc sử dụng CLI:

Đối với macOS và Linux:

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

Đối với Windows (PowerShell):

code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'
Cursor

Nhấp vào nút để cài đặt:

Install in Cursor

Hoặc cài đặt thủ công:

Đi tới Cursor Settings -> MCP -> New MCP Server. Sử dụng cấu hình được cung cấp ở trên.

Factory CLI Sử dụng Factory CLI để thêm máy chủ Chrome DevTools MCP (hướng dẫn):
droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"
Gemini CLI Cài đặt máy chủ Chrome DevTools MCP bằng Gemini CLI.

Toàn dự án:

# Either MCP only:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# Or as a Gemini extension (MCP+Skills):
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

Toàn cục:

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

Ngoài ra, hãy làm theo hướng dẫn MCP và sử dụng cấu hình tiêu chuẩn từ trên.

Gemini Code Assist Làm theo hướng dẫn cấu hình MCP sử dụng cấu hình tiêu chuẩn từ trên.
Grok Build CLI
grok mcp add chrome-devtools npx chrome-devtools-mcp@latest

Xem tài liệu để biết thêm tùy chọn

JetBrains AI Assistant & Junie

Đi tới Settings | Tools | AI Assistant | Model Context Protocol (MCP) -> Add. Sử dụng cấu hình được cung cấp ở trên. Tương tự, chrome-devtools-mcp có thể được cấu hình cho JetBrains Junie trong Settings | Tools | Junie | MCP Settings -> Add. Sử dụng cấu hình được cung cấp ở trên.

Kiro

Trong Cài đặt Kiro, đi tới Configure MCP > Open Workspace or User MCP Config > Sử dụng đoạn cấu hình được cung cấp ở trên.

Hoặc, từ Thanh hoạt động của IDE > Kiro > MCP Servers > Click Open MCP Config. Sử dụng đoạn cấu hình được cung cấp ở trên.

Katalon Studio

Máy chủ Chrome DevTools MCP có thể được sử dụng với Katalon StudioAssist thông qua proxy MCP.

Bước 1: Cài đặt proxy MCP bằng cách làm theo hướng dẫn thiết lập proxy MCP.

Bước 2: Khởi động máy chủ Chrome DevTools MCP với proxy:

mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest

Lưu ý: Bạn có thể cần chọn một cổng khác nếu 8080 đã được sử dụng.

Bước 3: Trong Katalon Studio, thêm máy chủ vào StudioAssist với các cài đặt sau:

  • URL kết nối: http://127.0.0.1:8080/mcp
  • Loại truyền tải: HTTP

Sau khi kết nối, các công cụ Chrome DevTools MCP sẽ có sẵn trong StudioAssist.

Mistral Vibe

Thêm vào ~/.vibe/config.toml:

[[mcp_servers]]
name = "chrome-devtools"
transport = "stdio"
command = "npx"
args = ["chrome-devtools-mcp@latest"]
OpenCode

Thêm cấu hình sau vào tệp opencode.json của bạn. Nếu bạn chưa có, hãy tạo nó tại ~/.config/opencode/opencode.json (hướng dẫn):

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
    }
  }
}
Qoder

Trong Cài đặt Qoder, đi tới MCP Server > + Add > Sử dụng đoạn cấu hình được cung cấp ở trên.

Ngoài ra, hãy làm theo hướng dẫn MCP và sử dụng cấu hình tiêu chuẩn từ trên.

Qoder CLI

Cài đặt máy chủ Chrome DevTools MCP bằng Qoder CLI (hướng dẫn):

Toàn dự án:

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

Toàn cục:

qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest
Visual Studio

Nhấp vào nút để cài đặt:

Install in Visual Studio

Warp

Đi tới Settings | AI | Manage MCP Servers -> + Add để thêm Máy chủ MCP. Sử dụng cấu hình được cung cấp ở trên.

Windsurf Làm theo hướng dẫn cấu hình MCP sử dụng cấu hình tiêu chuẩn từ trên.
### Lời nhắc đầu tiên của bạn

Nhập lời nhắc sau vào MCP Client của bạn để kiểm tra xem mọi thứ có hoạt động không:

Check the performance of https://developers.chrome.com

MCP client của bạn sẽ mở trình duyệt và ghi lại một bản ghi hiệu suất.

[!NOTE] Máy chủ MCP sẽ tự động khởi động trình duyệt khi MCP client sử dụng một công cụ yêu cầu phiên bản trình duyệt đang chạy. Chỉ kết nối với máy chủ Chrome DevTools MCP sẽ không tự động khởi động trình duyệt.

Công cụ

Nếu bạn gặp bất kỳ vấn đề nào, hãy xem hướng dẫn khắc phục sự cố của chúng tôi.

Cấu hình

Máy chủ Chrome DevTools MCP hỗ trợ tùy chọn cấu hình sau:

  • --autoConnect/ --auto-connect Nếu được chỉ định, tự động kết nối với một trình duyệt (Chrome 144+) đang chạy cục bộ từ thư mục dữ liệu người dùng được xác định bởi tham số kênh (kênh mặc định là ổn định). Yêu cầu máy chủ gỡ lỗi từ xa được khởi động trong phiên bản Chrome qua chrome://inspect/#remote-debugging.

    • Loại: boolean
    • Mặc định: false
  • --browserUrl/ --browser-url, -u Kết nối với một phiên bản Chrome đang chạy, có thể gỡ lỗi (ví dụ: http://127.0.0.1:9222). Để biết thêm chi tiết, xem: https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.

    • Loại: string
    • Mặc định: false
  • --wsEndpoint/ --ws-endpoint, -w Điểm cuối WebSocket để kết nối với một phiên bản Chrome đang chạy (ví dụ: ws://127.0.0.1:9222/devtools/browser/). Thay thế cho --browserUrl.

    • Loại: string
    • Mặc định: false
  • --wsHeaders/ --ws-headers Tiêu đề tùy chỉnh cho kết nối WebSocket ở định dạng JSON (ví dụ: '{"Authorization":"Bearer token"}'). Chỉ hoạt động với --wsEndpoint.

    • Loại: string
    • Mặc định: false
  • --headless Có chạy ở chế độ headless (không có giao diện người dùng) hay không.

    • Loại: boolean
    • Mặc định: false
  • --executablePath/ --executable-path, -e Đường dẫn đến tệp thực thi Chrome tùy chỉnh.

    • Loại: string
    • Mặc định: false
  • --isolated Nếu được chỉ định, tạo một thư mục dữ liệu người dùng tạm thời và tự động dọn dẹp sau khi trình duyệt đóng. Mặc định là false.

    • Loại: boolean
    • Mặc định: false
  • --userDataDir/ --user-data-dir Đường dẫn đến thư mục dữ liệu người dùng cho Chrome. Mặc định là $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE

    • Loại: string
    • Mặc định: false
  • --channel Chỉ định một kênh Chrome khác sẽ được sử dụng. Mặc định là phiên bản kênh ổn định.

    • Loại: string
    • Lựa chọn: canary, dev, beta, stable
    • Mặc định: false
  • --logFile/ --log-file Đường dẫn đến tệp để ghi nhật ký gỡ lỗi. Đặt biến môi trường DEBUG thành * để bật nhật ký chi tiết. Hữu ích cho việc gửi báo cáo lỗi.

    • Loại: string
    • Mặc định: false
  • --viewport Kích thước khung nhìn ban đầu cho các phiên bản Chrome do máy chủ khởi động. Ví dụ: 1280x720. Ở chế độ headless, kích thước tối đa là 3840x2160px.

    • Loại: string
    • Mặc định: false
  • --proxyServer/ --proxy-server Cấu hình máy chủ proxy cho Chrome được truyền dưới dạng --proxy-server khi khởi chạy trình duyệt. Xem https://www.chromium.org/developers/design-documents/network-settings/ để biết chi tiết.

    • Loại: string
    • Mặc định: false
  • --acceptInsecureCerts/ --accept-insecure-certs Nếu được bật, bỏ qua các lỗi liên quan đến chứng chỉ tự ký và hết hạn. Sử dụng cẩn thận.

    • Loại: boolean
    • Mặc định: false
  • --experimentalPageIdRouting/ --experimental-page-id-routing Có hiển thị pageId trên các công cụ phạm vi trang và định tuyến yêu cầu theo ID trang hay không (hữu ích cho các phiên tác nhân đồng thời).

    • Loại: boolean
    • Mặc định: false
  • --experimentalDevtools/ --experimental-devtools Có bật tự động hóa trên các mục tiêu DevTools hay không

    • Loại: boolean
    • Mặc định: false
  • --experimentalVision/ --experimental-vision Có bật các công cụ dựa trên tọa độ như click_at(x,y) hay không. Thường yêu cầu một mô hình sử dụng máy tính có khả năng tạo tọa độ chính xác bằng cách xem ảnh chụp màn hình.

    • Loại: boolean
    • Mặc định: false
  • --memoryDebugging/ --memory-debugging, -experimentalMemory Có bật các công cụ gỡ lỗi bộ nhớ hay không.

    • Loại: boolean
    • Mặc định: false
  • --experimentalStructuredContent/ --experimental-structured-content Có xuất nội dung định dạng có cấu trúc hay không.

    • Loại: boolean
    • Mặc định: false
  • --experimentalIncludeAllPages/ --experimental-include-all-pages Có bao gồm tất cả các loại trang như webview hoặc trang nền dưới dạng trang hay không.

    • Loại: boolean
    • Mặc định: false
  • --experimentalScreencast/ --experimental-screencast Hiển thị các công cụ screencast thử nghiệm (yêu cầu ffmpeg). Cài đặt ffmpeg https://www.ffmpeg.org/download.html và đảm bảo nó có sẵn trong PATH của máy chủ MCP.

    • Loại: boolean
    • Mặc định: false
  • --experimentalFfmpegPath/ --experimental-ffmpeg-path Đường dẫn đến tệp thực thi ffmpeg để ghi screencast.

    • Loại: string
    • Mặc định: false
  • --categoryExperimentalWebmcp/ --category-experimental-webmcp Đặt thành true để bật gỡ lỗi các công cụ WebMCP. Yêu cầu Chrome 149+ với các cờ sau: --enable-features=WebMCP,DevToolsWebMCPSupport

    • Loại: boolean
    • Mặc định: false
  • --chromeArg/ --chrome-arg Các đối số bổ sung cho Chrome. Chỉ áp dụng khi Chrome được khởi chạy bởi chrome-devtools-mcp.

    • Loại: array
    • Mặc định: false
  • --blockedUrlPattern/ --blocked-url-pattern Hạn chế quyền truy cập mạng của trình duyệt bằng cách chặn các mẫu URL được chỉ định (sử dụng https://urlpattern.spec.whatwg.org/). Ngầm ngắt kết nối khỏi các mục tiêu có URL bị chặn khi kết nối và chặn các yêu cầu thời gian chạy (bao gồm điều hướng và tài nguyên phụ). Chấp nhận một mảng các mẫu.

    • Loại: array
    • Mặc định: false
  • --allowedUrlPattern/ --allowed-url-pattern Hạn chế quyền truy cập mạng của trình duyệt bằng cách chỉ cho phép các mẫu URL được chỉ định (sử dụng https://urlpattern.spec.whatwg.org/). Yêu cầu Chrome 149+. Ngầm ngắt kết nối khỏi các mục tiêu có URL không được phép khi kết nối và chặn các yêu cầu thời gian chạy (bao gồm điều hướng và tài nguyên phụ). Chấp nhận một mảng các mẫu.

    • Loại: array
    • Mặc định: false
  • --ignoreDefaultChromeArg/ --ignore-default-chrome-arg Tường minh vô hiệu hóa các đối số mặc định cho Chrome. Chỉ áp dụng khi Chrome được khởi chạy bởi chrome-devtools-mcp.

    • Loại: array
    • Mặc định: false
  • --categoryEmulation/ --category-emulation Đặt thành false để loại trừ các công cụ liên quan đến mô phỏng.

    • Loại: boolean
    • Mặc định: true
  • --categoryPerformance/ --category-performance Đặt thành false để loại trừ các công cụ liên quan đến hiệu suất.

    • Loại: boolean
    • Mặc định: true
  • --categoryNetwork/ --category-network Đặt thành false để loại trừ các công cụ liên quan đến mạng.

    • Loại: boolean
    • Mặc định: true
  • --categoryExtensions/ --category-extensions Đặt thành true để bao gồm các công cụ liên quan đến tiện ích mở rộng. Lưu ý: Tính năng này hiện chỉ được hỗ trợ với kết nối pipe. autoConnect, browserUrl và wsEndpoint không được hỗ trợ với tính năng này cho đến khi phiên bản 149 được phát hành.

    • Loại: boolean
    • Mặc định: false
  • --categoryExperimentalThirdParty/ --category-experimental-third-party Đặt thành true để bật các công cụ phát triển của bên thứ ba do chính trang được kiểm tra hiển thị

    • Loại: boolean
    • Mặc định: false
  • --performanceCrux/ --performance-crux Đặt thành false để tắt việc gửi URL từ các bản ghi hiệu suất đến API CrUX để lấy dữ liệu hiệu suất thực địa.

    • Loại: boolean
    • Mặc định: true
  • --usageStatistics/ --usage-statistics Đặt thành false để từ chối thu thập thống kê sử dụng. Google thu thập dữ liệu sử dụng để cải thiện công cụ, được xử lý theo Chính sách quyền riêng tư của Google (https://policies.google.com/privacy). Điều này độc lập với các chỉ số trình duyệt Chrome. Bị vô hiệu hóa nếu các biến môi trường CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS hoặc CI được đặt.

    • Loại: boolean
    • Mặc định: true
  • --screenshotFormat/ --screenshot-format Ghi đè định dạng đầu ra mặc định được sử dụng bởi take_screenshot khi người gọi không chỉ định. JPEG và WebP nhỏ hơn ~3-5 lần so với PNG, giúp giảm kích thước ngữ cảnh trong các cuộc trò chuyện AI. Bỏ đặt sẽ giữ nguyên mặc định hiện có ("png").

    • Loại: string
    • Lựa chọn: jpeg, png, webp
    • Mặc định: false
  • --screenshotQuality/ --screenshot-quality Ghi đè chất lượng nén mặc định (0-100) được sử dụng bởi take_screenshot cho JPEG và WebP khi người gọi không chỉ định. Giá trị thấp hơn có nghĩa là tệp nhỏ hơn. Bị bỏ qua đối với PNG. Bỏ đặt sẽ giữ nguyên mặc định của Puppeteer.

    • Loại: number
    • Mặc định: false
  • --screenshotMaxWidth/ --screenshot-max-width Chiều rộng tối đa tính bằng pixel cho ảnh chụp màn hình. Nếu ảnh chụp được rộng hơn, nó sẽ được thu nhỏ (giữ nguyên tỷ lệ khung hình) trước khi được trả về. Giảm kích thước ngữ cảnh trong các cuộc trò chuyện AI. Bỏ đặt có nghĩa là không thay đổi kích thước.

    • Loại: number
    • Mặc định: false
  • --screenshotMaxHeight/ --screenshot-max-height Chiều cao tối đa tính bằng pixel cho ảnh chụp màn hình. Nếu ảnh chụp cao hơn, nó sẽ được thu nhỏ (giữ nguyên tỷ lệ khung hình) trước khi trả về. Có thể kết hợp với --screenshot-max-width; tỷ lệ thu nhỏ nào nhỏ hơn sẽ được áp dụng. Không đặt nghĩa là không thay đổi kích thước.

    • Loại: number
    • Mặc định: false
  • --slim Chỉ hiển thị bộ công cụ "tinh gọn" gồm 3 công cụ: điều hướng, thực thi script và chụp màn hình. Hữu ích cho các tác vụ trình duyệt cơ bản.

    • Loại: boolean
    • Mặc định: false
  • --redactNetworkHeaders/ --redact-network-headers Nếu là true, sẽ biên tập lại một số tiêu đề mạng được coi là nhạy cảm trước khi trả về cho client.

    • Loại: boolean
    • Mặc định: false
  • --allowUnrestrictedPaths/ --allow-unrestricted-paths Nếu được đặt, sẽ vô hiệu hóa hạn chế đường dẫn mặc định được áp dụng khi MCP client không thương lượng khả năng roots. Theo mặc định, các công cụ ghi tệp bị giới hạn trong thư mục tạm của hệ điều hành khi không có roots nào được cấu hình. Chỉ sử dụng tùy chọn này khi kết nối một client cục bộ đáng tin cậy không triển khai MCP roots và yêu cầu quyền truy cập vào các đường dẫn bên ngoài thư mục tạm.

    • Loại: boolean
    • Mặc định: false

Truyền chúng qua thuộc tính args trong cấu hình JSON. Ví dụ:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

Kết nối qua WebSocket với tiêu đề tùy chỉnh

Bạn có thể kết nối trực tiếp đến điểm cuối Chrome WebSocket và bao gồm các tiêu đề tùy chỉnh (ví dụ: để xác thực):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

Để lấy điểm cuối WebSocket từ một phiên bản Chrome đang chạy, hãy truy cập http://127.0.0.1:9222/json/version và tìm trường webSocketDebuggerUrl.

Bạn cũng có thể chạy npx chrome-devtools-mcp@latest --help để xem tất cả các tùy chọn cấu hình có sẵn.

Khái niệm

Phiên đồng thời

Hầu hết các MCP client khởi động một máy chủ Chrome DevTools MCP cho mỗi cuộc hội thoại. Nếu client của bạn chia sẻ một phiên bản máy chủ duy nhất cho nhiều tác nhân hoặc tác nhân phụ đồng thời, hãy khởi động máy chủ với --experimentalPageIdRouting. Điều này hiển thị pageId trên các công cụ phạm vi trang để mỗi tác nhân có thể định tuyến các lệnh gọi công cụ đến tab mà nó đang làm việc.

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

Nếu bạn chạy nhiều phiên MCP client độc lập và muốn mỗi phiên khởi chạy hồ sơ Chrome tạm thời riêng, hãy cũng truyền --isolated. Điều này tránh việc chia sẻ thư mục dữ liệu người dùng Chrome DevTools MCP mặc định giữa các phiên bản máy chủ đó.

Thư mục dữ liệu người dùng

chrome-devtools-mcp khởi động một phiên bản kênh ổn định của Chrome bằng thư mục dữ liệu người dùng sau:

  • Linux / macOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
  • Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

Thư mục dữ liệu người dùng không bị xóa giữa các lần chạy và được chia sẻ trên tất cả các phiên bản của chrome-devtools-mcp. Đặt tùy chọn isolated thành true để thay vào đó sử dụng thư mục dữ liệu người dùng tạm thời, thư mục này sẽ tự động bị xóa sau khi trình duyệt đóng.

Kết nối đến một phiên bản Chrome đang chạy

Theo mặc định, máy chủ Chrome DevTools MCP sẽ khởi động một phiên bản Chrome mới với một hồ sơ chuyên dụng. Điều này có thể không lý tưởng trong mọi tình huống:

  • Nếu bạn muốn duy trì cùng một trạng thái ứng dụng khi xen kẽ giữa kiểm thử trang web thủ công và kiểm thử do tác nhân điều khiển.
  • Khi MCP cần đăng nhập vào một trang web. Một số tài khoản có thể ngăn đăng nhập khi trình duyệt bị điều khiển qua WebDriver (cơ chế khởi chạy mặc định cho máy chủ Chrome DevTools MCP).
  • Nếu bạn đang chạy LLM của mình trong môi trường sandbox, nhưng bạn muốn kết nối đến một phiên bản Chrome chạy bên ngoài sandbox.

Trong những trường hợp này, hãy khởi động Chrome trước và để máy chủ Chrome DevTools MCP kết nối đến nó. Có hai cách để thực hiện:

  • Kết nối tự động (có sẵn trong Chrome 144): tốt nhất để chia sẻ trạng thái giữa kiểm thử thủ công và kiểm thử do tác nhân điều khiển.
  • Kết nối thủ công qua cổng gỡ lỗi từ xa: tốt nhất khi chạy trong môi trường sandbox.

Tự động kết nối đến một phiên bản Chrome đang chạy

Bước 1: Thiết lập gỡ lỗi từ xa trong Chrome

Trong Chrome (>= M144), hãy làm như sau để thiết lập gỡ lỗi từ xa:

  1. Điều hướng đến chrome://inspect/#remote-debugging để bật gỡ lỗi từ xa.
  2. Làm theo giao diện hộp thoại để cho phép hoặc không cho phép các kết nối gỡ lỗi đến.

Bước 2: Cấu hình máy chủ Chrome DevTools MCP để tự động kết nối đến một phiên bản Chrome đang chạy

Để kết nối máy chủ chrome-devtools-mcp đến phiên bản Chrome đang chạy, hãy sử dụng đối số dòng lệnh --autoConnect cho máy chủ MCP.

Đoạn mã sau đây là một cấu hình ví dụ cho gemini-cli:

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

Bước 3: Kiểm tra thiết lập của bạn

Đảm bảo trình duyệt của bạn đang chạy. Mở gemini-cli và chạy lời nhắc sau:

Check the performance of https://developers.chrome.com

[!LƯU Ý] Tùy chọn autoConnect yêu cầu người dùng khởi động Chrome. Nếu người dùng có nhiều hồ sơ đang hoạt động, máy chủ MCP sẽ kết nối đến hồ sơ mặc định (do Chrome xác định). Máy chủ MCP có quyền truy cập vào tất cả các cửa sổ đang mở cho hồ sơ đã chọn.

Máy chủ Chrome DevTools MCP sẽ cố gắng kết nối đến phiên bản Chrome đang chạy của bạn. Nó hiển thị một hộp thoại yêu cầu sự cho phép của người dùng.

Nhấp vào Cho phép dẫn đến việc máy chủ Chrome DevTools MCP mở developers.chrome.com và thực hiện một bản ghi hiệu suất.

Kết nối thủ công bằng chuyển tiếp cổng

Bạn có thể kết nối đến một phiên bản Chrome đang chạy bằng cách sử dụng tùy chọn --browser-url. Điều này hữu ích nếu bạn đang chạy máy chủ MCP trong môi trường sandbox không cho phép khởi động một phiên bản Chrome mới.

Dưới đây là hướng dẫn từng bước về cách kết nối đến một phiên bản Chrome đang chạy:

Bước 1: Cấu hình MCP client

Thêm tùy chọn --browser-url vào cấu hình MCP client của bạn. Giá trị của tùy chọn này phải là URL của phiên bản Chrome đang chạy. http://127.0.0.1:9222 là một mặc định phổ biến.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

Bước 2: Khởi động trình duyệt Chrome

[!CẢNH BÁO] Việc bật cổng gỡ lỗi từ xa sẽ mở một cổng gỡ lỗi trên phiên bản trình duyệt đang chạy. Bất kỳ ứng dụng nào trên máy của bạn cũng có thể kết nối đến cổng này và điều khiển trình duyệt. Đảm bảo rằng bạn không duyệt bất kỳ trang web nhạy cảm nào trong khi cổng gỡ lỗi đang mở.

Khởi động trình duyệt Chrome với cổng gỡ lỗi từ xa được bật. Đảm bảo đóng mọi phiên bản Chrome đang chạy trước khi khởi động phiên bản mới với cổng gỡ lỗi được bật. Số cổng bạn chọn phải giống với số bạn đã chỉ định trong tùy chọn --browser-url trong cấu hình MCP client của bạn.

Vì lý do bảo mật, Chrome yêu cầu bạn sử dụng thư mục dữ liệu người dùng không mặc định khi bật cổng gỡ lỗi từ xa. Bạn có thể chỉ định một thư mục tùy chỉnh bằng cờ --user-data-dir. Điều này đảm bảo rằng hồ sơ và dữ liệu duyệt web thông thường của bạn không bị lộ ra phiên gỡ lỗi.

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

Bước 3: Kiểm tra thiết lập của bạn

Sau khi cấu hình MCP client và khởi động trình duyệt Chrome, bạn có thể kiểm tra thiết lập của mình bằng cách chạy một lời nhắc đơn giản trong MCP client:

Check the performance of https://developers.chrome.com

MCP client của bạn sẽ kết nối đến phiên bản Chrome đang chạy và nhận được một báo cáo hiệu suất.

Nếu bạn gặp sự cố chuyển tiếp cổng giữa máy ảo (VM) và máy chủ, hãy xem phần “Gỡ lỗi từ xa giữa máy ảo (VM) và máy chủ không thành công” trong docs/troubleshooting.md.

Để biết thêm chi tiết về gỡ lỗi từ xa, hãy xem tài liệu Chrome DevTools.

Gỡ lỗi Chrome trên Android

Vui lòng tham khảo các hướng dẫn này.

Hạn chế đã biết

Xem Khắc phục sự cố.

Tích hợp như một tác nhân phụ trình duyệt

Nếu bạn đang phát triển công cụ tác nhân và muốn cung cấp một tác nhân phụ trình duyệt tích hợp như một phần của sản phẩm, chúng tôi khuyên bạn nên xây dựng dựa trên Chrome DevTools cho tác nhân.

Để có một triển khai tham khảo, hãy xem tài liệu tác nhân trình duyệt Gemini CLI.