Chrome DevTools cho tác nhân là một bộ công cụ mang sức mạnh của Chrome DevTools đến quy trình làm việc lập trình AI. Khi cài đặt Chrome DevTools cho tác nhân, bạn sẽ có quyền truy cập vào:
- Máy chủ MCP: Kết nối tác nhân AI của bạn với một thực thể trình duyệt đang hoạt động bằng Giao thức Ngữ cảnh mô hình nguồn mở.
- CLI Chrome DevTools: Một giao diện để tương tác với trình duyệt ngay từ thiết bị đầu cuối.
- Kỹ năng dựa trên tác nhân: Hướng dẫn của chuyên gia giúp tác nhân của bạn biết cách phối hợp nhiều công cụ cho các tác vụ phức tạp như gỡ lỗi về hiệu suất hoặc khả năng hỗ trợ tiếp cận.
Trong bối cảnh phát triển web, Chrome DevTools cho tác nhân tích hợp các tính năng gỡ lỗi vào tác nhân AI của bạn.
Ví dụ: tác nhân có thể sử dụng các công cụ để ghi lại và đánh giá dấu vết hiệu suất nhằm phân tích hiệu suất của một trang web và xác định các điểm có thể cải thiện. Ngoài việc phát triển web, DevTools cho tác nhân cũng cho phép tác nhân của bạn duyệt web trực tiếp thay vì chỉ truy xuất HTML tĩnh.
Thiết lập
Hướng dẫn này chỉ cho bạn cách thiết lập Chrome DevTools cho tác nhân để giúp tác nhân lập trình của bạn kiểm soát và kiểm tra trình duyệt Chrome đang hoạt động.
Sử dụng gói chrome-devtools-mcp để kiểm soát và kiểm tra trình duyệt Chrome đang hoạt động từ tác nhân lập trình của bạn (chẳng hạn như Gemini, Claude, Cursor hoặc Copilot). Xin lưu ý rằng mặc dù Chrome DevTools cho tác nhân cung cấp bộ công cụ đầy đủ, nhưng CLI chỉ hỗ trợ một tập hợp con được nhắm mục tiêu cho quá trình tự động hoá dựa trên shell.
Các mô hình và IDE được hỗ trợ
Chrome DevTools cho tác nhân hỗ trợ mọi công cụ hoặc IDE hỗ trợ giao thức MCP. Trong đó có Antigravity, Gemini CLI, Claude Code, Cursor, Copilot và nhiều công cụ khác.
Lưu ý về bảo mật
Vì tác nhân của bạn sẽ có thể xem và tương tác với các trang mà tác nhân truy cập, nên tác nhân có thể thay mặt bạn thực hiện hành động một cách hiệu quả nếu bạn kết nối tác nhân đó với một trình duyệt có phiên hoạt động và được xác thực. Tránh chia sẻ thông tin cá nhân hoặc thông tin nhạy cảm mà bạn không muốn chia sẻ với tác nhân.
Điều kiện tiên quyết
Trước khi cài đặt Chrome DevTools cho tác nhân, hãy đảm bảo môi trường của bạn đáp ứng các yêu cầu sau:
Để thiết lập Chrome DevTools cho tác nhân, hãy chọn phương thức phù hợp với môi trường lập trình mà bạn muốn. Mặc dù một số tác nhân yêu cầu cài đặt thủ công, nhưng các tác nhân khác được tích hợp sẵn các công cụ.
Antigravity
Chrome DevTools cho tác nhân được đi kèm sẵn với Antigravity 2.0. Bạn có thể bắt đầu sử dụng ngay với tác nhân phụ của trình duyệt. Hãy thử sử dụng lệnh dấu gạch chéo như:
/browser Navigate to the Google homepage
Để truy cập vào các kỹ năng chuyên biệt của tác nhân, bạn nên cài đặt trình bổ trợ DevTools trong bước Xây dựng bằng Google của quá trình thiết lập ban đầu hoặc trong phần cài đặt ứng dụng. Để biết thêm thông tin, hãy xem tài liệu về Trình duyệt Antigravity Tác nhân phụ.
Cài đặt bằng CLI
Để thiết lập Chrome DevTools cho tác nhân, bạn có thể sử dụng tệp cấu hình JSON hoặc lệnh CLI để cài đặt trực tiếp máy chủ nếu tác nhân của bạn hỗ trợ. Một số tác nhân cũng cung cấp các tiện ích hoặc trình bổ trợ chính thức bao gồm các kỹ năng dựa trên tác nhân, hướng dẫn của chuyên gia giúp tác nhân của bạn sử dụng các tính năng của DevTools.
Nếu tác nhân của bạn không có trong danh sách này, bạn có thể tìm cách cài đặt tác nhân đó trong kho lưu trữ GitHub của Chrome DevTools cho tác nhân.
Để thêm Chrome DevTools cho tác nhân vào tác nhân dòng lệnh, hãy sử dụng các lệnh CLI tích hợp cho tác nhân cụ thể của bạn:
Gemini CLI
Cài đặt tiện ích Gemini CLI bao gồm gói MCP và các kỹ năng đi kèm bằng lệnh sau:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Chỉ cài đặt gói MCP bằng lệnh sau:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
Để cài đặt Chrome DevTools cho tác nhân dưới dạng Trình bổ trợ Claude Code, hãy sử dụng các lệnh dấu gạch chéo sau trong Claude Code. Thêm sổ đăng ký marketplace:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Và cài đặt trình bổ trợ từ sổ đăng ký marketplace:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Hãy xem trang chính thức Trình bổ trợ Claude của Chrome DevTools để biết thêm thông tin.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Cài đặt bằng cấu hình JSON
Đối với các tác nhân khác hỗ trợ khoá cấu hình mcpServers, hãy thêm
mục này theo cách thủ công và nhớ cài đặt DevTools cho tác nhân thông qua npm i
chrome-devtools-mcp.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Cài đặt trong các tác nhân khác
Kiểm tra thông tin thiết lập của bạn
Nhập lời nhắc sau vào tác nhân của bạn để kiểm tra xem mọi thứ có hoạt động hay không:
Check the performance of https://developers.chrome.com
Tác nhân của bạn sẽ mở một cửa sổ trình duyệt và ghi lại dấu vết hiệu suất.
Khắc phục sự cố khi thiết lập
Nếu tác nhân của bạn không chạy được các công cụ và có quyền truy cập vào các kỹ năng của Chrome DevTools, thì tác nhân đó có thể tự động khắc phục vấn đề. Nếu không, bạn có thể nhắc tác nhân một cách rõ ràng:
Use the Chrome DevTools troubleshooting skill to fix my setup.
Hoặc bạn có thể nêu cụ thể hơn:
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
Các bước tiếp theo
Để tuỳ chỉnh thông tin thiết lập, hãy xem phần Cấu hình.