Chrome DevTools MCP — AI Agent Với Trình Gỡ Lỗi Trình Duyệt
MCP server Chrome DevTools chính thức cho AI agent — kiểm tra DOM, console, network, hiệu năng, bộ nhớ và Lighthouse ngay từ coding assistant.
AI coding agent giỏi viết code, nhưng chúng bị mù với những gì xảy ra khi code đó chạy trong trình duyệt. Lỗi console, lệch layout, network timeout, rò rỉ bộ nhớ — những vấn đề runtime này vô hình đối với agent chỉ thấy file nguồn.
Chrome DevTools MCP server thay đổi điều đó. Được tạo bởi đội ngũ Chrome DevTools chính thức, MCP server mã nguồn mở này cấp cho AI agent toàn bộ sức mạnh của Chrome DevTools — trực tiếp từ AI coding assistant của bạn.
Chrome DevTools MCP là gì?#
Chrome DevTools MCP là một Model Context Protocol server kết nối AI coding agent với một phiên bản Google Chrome trực tiếp. Nó hiển thị toàn bộ tính năng Chrome DevTools dưới dạng MCP tools mà agent có thể gọi:
- Điều hướng trang và kiểm tra cây accessibility DOM
- Xem log console với stack trace đã ánh xạ nguồn
- Giám sát network request và response
- Ghi và phân tích performance trace
- Chụp heap snapshot và gỡ lỗi rò rỉ bộ nhớ
- Chạy kiểm toán Lighthouse
- Giả lập thiết bị, điều kiện mạng và vị trí địa lý
Bên trong, nó sử dụng Puppeteer và Chrome DevTools Protocol (CDP) để điều khiển phiên bản Chrome.
Cài đặt#
# Qua npx (không cần cài đặt)
npx -y chrome-devtools-mcp@latestThêm vào cấu hình MCP client:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}Các công cụ có sẵn#
Server cung cấp 50+ MCP tools qua 7 danh mục:
Điều hướng (6 tools)#
navigate_page, new_page, close_page, list_pages, select_page, wait_for
Tự động hóa đầu vào (10 tools)#
click, drag, fill, fill_form, handle_dialog, hover, press_key, type_text, upload_file, click_at
Giả lập (2 tools)#
emulate, resize_page — giả lập thiết bị, viewport, điều kiện mạng, CPU, vị trí, màu sắc, user agent
Gỡ lỗi & Phân tích (8 tools)#
evaluate_script, get_console_message, list_console_messages, lighthouse_audit, take_screenshot, take_snapshot, screencast_start, screencast_stop
Network (2 tools)#
list_network_requests, get_network_request
Hiệu năng (3 tools)#
performance_start_trace, performance_stop_trace, performance_analyze_insight
Bộ nhớ / Heap (12 tools)#
take_heapsnapshot, compare_heapsnapshots, get_heapsnapshot_retaining_paths và nhiều hơn — phân tích heap đầy đủ
Tích hợp Agent#
Claude Code#
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestCursor#
Cursor Settings → MCP → New MCP Server, dán cấu hình JSON.
Gemini CLI#
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latestTại sao điều này quan trọng#
Trước Chrome DevTools MCP, AI coding agent bị giới hạn ở phân tích code tĩnh cho công việc frontend. Chúng có thể xem xét code nguồn nhưng không thể thấy trình duyệt thực sự render gì, không thể bắt lỗi runtime console, không thể đo hiệu năng thực tế và không thể xác minh rằng một sửa UI thực sự hoạt động.
Giờ đây, AI agent có thể:
- Viết code, build, mở trình duyệt và xác minh kết quả — hoàn toàn tự động
- Gỡ lỗi runtime bằng cách đọc console output, network timing và heap snapshot
- Kiểm toán hiệu năng với Lighthouse và phân tích trace
- Kiểm thử trên nhiều thiết bị với giả lập
Điều này khép kín vòng lặp giữa viết code và xác thực trong trình duyệt — một khả năng trước đây yêu cầu lập trình viên ở mọi bước.