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 DevTools MCP?

  • Theo dõi hiệu suất — Yêu cầu trợ lý của bạn ghi lại một bản theo dõi hiệu suất cho một URL và đưa ra những thông tin chi tiết có thể hành động, ví dụ: "Kiểm tra hiệu suất của https://developers.chrome.com".
  • Phân tích mạng — Nhờ trợ lý của bạn kiểm tra các yêu cầu mạng để gỡ lỗi các vấn đề tải trang, tài nguyên bị lỗi hoặc sự cố lời gọi API.
  • Giám sát bảng điều khiển — Yêu cầu kiểm tra các thông báo bảng điều khiển của trình duyệt, bao gồm cả dấu vết ngăn xếp được ánh xạ nguồn, để chẩn đoán lỗi JavaScript.
  • Chụp ảnh màn hình — Hướng dẫn trợ lý của bạn chụp ảnh màn hình trang hiện tại để xác minh trực quan hoặc lập tài liệu.
  • Hành động trình duyệt tự động — Chỉ đạo trợ lý của bạn tự động hóa các tương tác như nhấp chuột, điều hướng hoặc điền biểu mẫu bằng Puppeteer, với việc tự động chờ kết quả.

Tài liệu

Chrome DevTools cho các tác nhân

npm chrome-devtools-mcp package

Chrome DevTools cho các 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 trình duyệt Chrome trực tiếp. 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 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 chiếu công cụ | Nhật ký thay đổi | Đóng góp | Xử lý sự cố | Nguyên tắc thiết kế

Các 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 dấu vết 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 dấu vết ngăn xếp đượ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ả của hành động.

Tuyên bố miễn trừ trách nhiệm

chrome-devtools-mcp hiển thị 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ính thức hỗ trợ Google Chrome và Chrome for Testing chỉ. 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 muốn. 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 Chrome ổn định mở rộng.

Các công cụ hiệu suất có thể gửi URL dấu vết đến API Google CrUX để lấy dữ liệu trải nghiệm người dùng thực tế. Đ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 khi 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 số liệu Chrome không tự động chọn không tham gia 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 sổ đăng ký 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 việc thực hiệ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 chiếu công cụ gọn nhẹ.

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

Để biết hướng dẫn thiết lập cụ thể cho trình chỉnh sửa hoặc tác nhân của bạn (ví dụ: Antigravity, Claude Code, Cursor, VS Code), vui lòng xem Hướng dẫn cấu hình máy khách của chúng tôi.

Lời nhắc đầu tiên của bạn

Nhập lời nhắc sau vào máy khách MCP 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

Máy khách MCP của bạn sẽ mở trình duyệt và ghi lại dấu vết hiệu suất.

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

Công cụ

Nếu bạn gặp bất kỳ sự cố nào, hãy xem hướng dẫn xử lý sự cố của chúng tôi. Xem Tham chiếu công cụ đầy đủ để biết danh sách hoàn chỉnh tất cả các khả năng MCP được hỗ trợ.

Cấu hình

Tìm danh sách đầy đủ các tham số máy chủ (ví dụ: --headless, --isolated, --slim) và cách cấu hình kết nối WebSocket trong Hướng dẫn cấu hình.

Sử dụng nâng cao

Đối với các tính năng nâng cao như xử lý các phiên đồng thời, thư mục dữ liệu người dùng liên tục, kết nối với phiên bản Chrome đang chạy thay vì khởi động phiên bản mới hoặc gỡ lỗi trên Android, hãy xem Hướng dẫn sử dụng nâng cao của chúng tôi.

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 trên nền tảng Chrome DevTools cho các tác nhân.

Để biết triển khai tham chiếu, hãy xem tài liệu tác nhân trình duyệt Gemini CLI.