Chrome DevTools cho các 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 của bạn. Khi cài đặt Chrome DevTools cho các tác nhân phần mềm, 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 phiên bản trình duyệt đang hoạt động bằng Giao thức ngữ cảnh mô hình nguồn mở.
- Chrome DevTools CLI: Giao diện để tương tác trực tiếp với trình duyệt từ cửa sổ dòng lệnh.
- Kỹ năng của tác nhân: Hướng dẫn chuyên môn 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 dành cho các tác nhân tích hợp các chức năng gỡ lỗi vào tác nhân AI của bạn.
Ví dụ: một tác nhân phần mềm có thể sử dụng các công cụ này để ghi lại và đánh giá các 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 những điểm có thể cải thiện. Ngoài việc phát triển web, Công cụ cho nhà phát triển dành cho các tác nhân cũng cho phép tác nhân của bạn duyệt xem web trực tiếp thay vì chỉ truy xuất HTML tĩnh.
Thiết lập
Hướng dẫn này cho bạn biết cách thiết lập Chrome DevTools cho các tác nhân phần mềm để giúp tác nhân mã hoá của bạn kiểm soát và kiểm tra một 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 một 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 các tác nhân cung cấp đủ bộ công cụ, nhưng CLI chỉ hỗ trợ một nhóm nhỏ có mục tiêu để tự động hoá dựa trên shell.
Các mô hình và IDE được hỗ trợ
Chrome DevTools cho các 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ì có thể xem và tương tác với các trang mà nó truy cập, nên nhân viên hỗ trợ có thể hành động hiệu quả thay cho bạn nếu bạn kết nối nhân viên hỗ trợ đó với một trình duyệt có phiên hoạt động đang diễn ra 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 nhân viên hỗ trợ.
Điều kiện tiên quyết
Trước khi cài đặt Chrome DevTools cho các 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 các tác nhân, hãy chọn phương thức phù hợp với môi trường mã hoá 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 những tác nhân khác đi kèm với các công cụ được tích hợp sẵn.
Antigravity
Chrome DevTools cho các 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 trình duyệt phụ. Hãy thử dùng một 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, chúng tôi khuyên bạn nên cài đặt trình bổ trợ Công cụ cho nhà phát triển 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 Subagent.
Cài đặt bằng giao diện dòng lệnh
Để thiết lập Chrome DevTools cho các tác nhân, bạn có thể 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 của tác nhân, hướng dẫn của chuyên gia giúp tác nhân sử dụng các tính năng của Công cụ cho nhà phát triển.
Nếu không thấy tác nhân của mình trong danh sách này, bạn có thể tìm hiểu cách cài đặt tác nhân trong kho lưu trữ Chrome DevTools for Agents GitHub.
Để thêm Chrome DevTools cho tác nhân phần mềm vào một tác nhân phần mềm dòng lệnh, hãy sử dụng các lệnh CLI tích hợp cho tác nhân phần mềm 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ợ mã Claude, hãy dùng các lệnh dấu gạch chéo sau trong Claude Code. Thêm sổ đăng ký trang web thương mại:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Và cài đặt trình bổ trợ từ sổ đăng ký của marketplace:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Hãy xem trang chính thức về 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 những 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
Để định cấu hình cho một tác nhân không có trong danh sách, hãy xem kho lưu trữ MCP GitHub của Chrome DevTools.
Kiểm tra thông tin thiết lập của bạn
Nhập câu lệnh sau vào tác nhâ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 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ể cố gắng tự động khắc phục vấn đề. Nếu không, bạn có thể nhắc rõ ràng cho trợ lý:
Use the Chrome DevTools troubleshooting skill to fix my setup.
Hoặc bạn có thể nói 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ấu hình nâng cao
Sau đây là một số cách khác mà tác nhân có thể truy cập vào trình duyệt.
Định cấu hình chế độ không có giao diện người dùng
Nếu muốn thực hiện các tác vụ ở chế độ nền mà không có cửa sổ trình duyệt nào hiển thị, bạn có thể chạy Chrome ở chế độ không có giao diện người dùng. Thêm cờ --headless vào đối số máy chủ:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
Kết nối với một phiên trình duyệt hiện có
Theo mặc định, Công cụ cho nhà phát triển cho các tác nhân sẽ khởi động một phiên bản Chrome mới. Tuy nhiên, bạn có thể kết nối tác nhân với một phiên trình duyệt hiện có bằng cách sử dụng cờ --autoConnect. Điều này đặc biệt hữu ích nếu nhân viên hỗ trợ cần điều tra một vấn đề bị chặn sau khi bạn đăng nhập hoặc bắt đầu một phiên.
Có hai cách để kết nối với một phiên hiện có:
Sử dụng tính năng kết nối tự động (Chrome 144 trở lên)
Khi máy chủ MCP của Chrome DevTools được định cấu hình bằng lựa chọn --autoConnect, máy chủ MCP sẽ kết nối với một phiên bản Chrome đang hoạt động và yêu cầu một phiên gỡ lỗi từ xa.
- Trong trình duyệt Chrome đang chạy, hãy chuyển đến
chrome://inspect/#remote-debuggingđể bật tính năng gỡ lỗi từ xa. Cập nhật cấu hình MCP để thêm cờ
--autoConnect:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Đưa ra câu lệnh cho trợ lý ảo. Chrome sẽ hiện một hộp thoại yêu cầu người dùng cấp quyền cho phép phiên gỡ lỗi từ xa. Nhấp vào Cho phép.
Kết nối theo cách thủ công bằng cổng gỡ lỗi từ xa
Nếu không thể sử dụng --autoConnect (ví dụ: nếu chạy tác nhân trong một môi trường hộp cát), bạn có thể khởi động Chrome theo cách thủ công bằng một cổng gỡ lỗi.
Sau đây là một ví dụ (trên macOS):
Khởi động trình duyệt Chrome khi đã bật cổng gỡ lỗi từ xa. Vì lý do bảo mật, bạn cũng phải chỉ định một thư mục dữ liệu người dùng tuỳ chỉnh.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableĐịnh cấu hình nhân viên hỗ trợ để kết nối bằng tham số
--browser-url:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }