BIẾT A.I CHƯA?

Chrome DevTools MCP – Công cụ mới từ Google giúp AI Debugging web

26/09/202524 views0

Chrome DevTools MCP là một server Model Context Protocol (MCP) mới từ Google, cho phép các AI coding assistants kết nối trực tiếp với Chrome để debugging và phân tích web pages một cách hiệu quả. Ra mắt vào tháng 9/2025, công cụ này giải quyết vấn đề AI “lập trình với mắt bị bịt” bằng cách cung cấp khả năng quan sát và tương tác thực tế với trình duyệt.

Chrome DevTools MCP là gì?

Chrome DevTools MCP hoạt động như một cầu nối giữa large language models (LLM) và Chrome DevTools, cho phép AI agents thực hiện các tác vụ debugging mà không cần can thiệp thủ công. Đây là một phần của Model Context Protocol (MCP), giao thức mã nguồn mở được Anthropic giới thiệu vào tháng 11/2024, nhằm chuẩn hóa cách AI tương tác với dữ liệu và công cụ bên ngoài.

Cụ thể, MCP bao gồm ba thành phần chính:

MCP Host: Ứng dụng AI như chatbot hoặc IDE, quản lý quyền truy cập và bảo mật.
MCP Client: Kết nối một-một với server, xử lý giao tiếp hai chiều.
MCP Server: Cung cấp dữ liệu hoặc công cụ, ví dụ như Chrome DevTools MCP cho debugging web.

Công cụ này giúp AI không chỉ viết code mà còn thấy code chạy như thế nào trong browser, từ đó cải thiện độ chính xác khi fix bugs hoặc optimize performance.

Tính năng nổi bật của Chrome DevTools MCP

Chrome DevTools MCP cung cấp 26 công cụ chuyên nghiệp bao quát các khía cạnh phát triển web:

7 công cụ tự động hóa input: click, fill, drag, hover, upload_file – cho phép AI tương tác như người dùng thực.
7 công cụ điều khiển navigation: navigate_page, new_page, wait_for – hỗ trợ di chuyển giữa các trang.
3 công cụ phân tích performance: performance_start_trace, performance_stop_trace, performance_analyze_insight – thu thập và phân tích trace để tối ưu tốc độ.
4 công cụ debugging: take_screenshot, evaluate_script, list_console_messages, list_network_requests – giúp chẩn đoán lỗi chi tiết.

Ví dụ, AI có thể sử dụng performance_start_trace để mở Chrome, load website và ghi lại performance trace, sau đó phân tích để đề xuất cải thiện.

Cách cài đặt và sử dụng Chrome DevTools MCP

Để bắt đầu, thêm cấu hình sau vào MCP client của bạn:

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

Sau khi cài đặt, kiểm tra bằng prompt đơn giản trong AI agent:

Kiểm tra performance của https://developers.chrome.com

Công cụ tương thích với nhiều AI clients như Cursor IDE, Claude Desktop, hoặc Gemini CLI, và có thể tích hợp với trình duyệt Chrome qua extension để thu thập dữ liệu như console logs hoặc screenshots.

Ứng dụng thực tế của Chrome DevTools MCP

Tự động hóa debugging và testing

Chrome DevTools MCP cho phép AI tự động debug web pages bằng cách mở browser, chạy code và phân tích kết quả. Ví dụ, trong automated testing, AI có thể:

Chụp screenshot để kiểm tra visual regression.
Liệt kê network requests để phát hiện slow loads.
Đánh giá script để fix JavaScript errors.

Tích hợp với các công cụ khác

Kết hợp với Browser Tools MCP, công cụ này mở rộng khả năng tự động hóa như điền form, scraping data hoặc navigation. Trong môi trường doanh nghiệp, nó tích hợp với MCP ecosystem để kết nối AI với CRM, Slack hoặc development servers, đảm bảo bảo mật dữ liệu.

Lợi ích cho developers và AI agents

Cải thiện độ chính xác: AI có thể “thấy” kết quả thực tế, giảm lỗi trong code generation.
Tiết kiệm thời gian: Tự động hóa performance analysis, thay vì manual inspection.
Linh hoạt cao: Dễ dàng mở rộng với các MCP servers khác, như tích hợp với n8n cho workflow automation.