🔬 Nghiên cứu 🌱 Mới trồng 13 tháng 7, 2026 Trồng 13 thg 7

ChromeDevTools/chrome-devtools-mcp

📦 ChromeDevTools/chrome-devtools-mcp ⭐ 47k Mở trên GitHub ↗

Chrome DevTools for coding agents

Kết luận: fit · Công nghệ: mcp · chrome-devtools · browser-automation · debugging · puppeteer

chrome-devtools-mcp là công cụ MCP server nối coding agent với Chrome DevTools, cho phép tự động hóa và gỡ lỗi trình duyệt qua giao diện DevTools. Với ~46.8k stars và trọng tâm vào mcp, debugging, chrome-devtools, đây là lựa chọn mạnh để thêm khả năng quan sát DOM/network/console cho agent hoặc workflow kiểm thử web.

📖 Giới thiệu chi tiết

🧩 Nó là gì?

ChromeDevTools/chrome-devtools-mcp là một dự án giúp coding agent như Claude, Cursor, Copilot, Codex, Gemini... điều khiển và “nhìn vào” trình duyệt Chrome thật thông qua Chrome DevTools.

Nói đơn giản: nó biến Chrome DevTools thành công cụ mà AI lập trình có thể dùng để mở trang web, bấm nút, đọc lỗi console, xem network, chụp màn hình và phân tích hiệu năng.

🎯 Giải quyết vấn đề gì? Dành cho ai?

Khi bạn nhờ AI sửa lỗi giao diện web, kiểm tra trang, hoặc tối ưu hiệu năng, AI thường chỉ nhìn được code. Nhưng nhiều lỗi chỉ xuất hiện khi chạy thật trên trình duyệt, ví dụ:

  • Nút bấm không hoạt động.
  • API bị lỗi trong tab Network.
  • Console báo lỗi JavaScript.
  • Giao diện bị lệch.
  • Trang tải chậm nhưng không rõ vì sao.
  • App chạy khác giữa code và trình duyệt thật.

chrome-devtools-mcp giải quyết chuyện đó bằng cách cho AI truy cập Chrome DevTools, giống như một lập trình viên đang mở DevTools để debug.

Dự án này phù hợp với:

  • Người mới học web muốn AI hỗ trợ kiểm tra lỗi trực tiếp trên trình duyệt.
  • Frontend developer cần debug UI, console, network nhanh hơn.
  • Full-stack developer muốn kiểm tra luồng từ giao diện tới API.
  • Người dùng coding agent như Claude Code, Cursor, Copilot, Codex, Gemini CLI.
  • Team muốn tự động hóa kiểm thử web hoặc phân tích hiệu năng.

Một khái niệm cần biết: MCP là viết tắt của Model Context Protocol. Hiểu đơn giản, đây là “cầu nối” để AI assistant gọi được các công cụ bên ngoài, trong trường hợp này là Chrome DevTools.

⚙️ Hoạt động ra sao?

Cơ chế chính của chrome-devtools-mcp như sau:

  • Nó chạy như một MCP server trên máy của bạn.
  • Coding agent kết nối tới MCP server này.
  • MCP server mở hoặc kết nối tới một trình duyệt Chrome thật.
  • Thông qua Chrome DevTools và Puppeteer, nó có thể điều khiển Chrome:
    • Mở trang web.
    • Click, nhập text, điều hướng.
    • Chờ kết quả sau thao tác.
    • Đọc DOM, tức cấu trúc trang HTML đang hiển thị.
    • Kiểm tra console messages.
    • Phân tích network requests.
    • Chụp screenshot.
    • Ghi trace để phân tích hiệu năng.
  • Sau đó, AI nhận thông tin từ trình duyệt và dùng nó để debug hoặc đề xuất sửa code.

Ví dụ dễ hình dung:

Bạn nói với agent: “Mở app ở http://localhost:3000, đăng nhập thử và xem vì sao bấm nút Submit không chạy.”

Nếu có chrome-devtools-mcp, agent có thể:

  1. Mở Chrome.
  2. Truy cập http://localhost:3000.
  3. Bấm nút Submit.
  4. Đọc lỗi trong console.
  5. Xem request nào bị fail.
  6. Quay lại code và đề xuất chỗ cần sửa.

🆚 Khi nào nên dùng / không nên

Nên dùng chrome-devtools-mcp khi:

  • Bạn đang làm web app và muốn AI kiểm tra trên trình duyệt thật.
  • Lỗi chỉ xuất hiện khi chạy app, không nhìn ra từ code.
  • Bạn cần debug console, network, DOM hoặc screenshot.
  • Bạn muốn AI hỗ trợ phân tích hiệu năng bằng Chrome DevTools.
  • Bạn dùng các coding agent hỗ trợ MCP như Claude, Cursor, Copilot, Codex hoặc Gemini.

Không nên dùng khi:

  • Bạn chỉ cần hỏi đáp code đơn giản, không cần chạy trình duyệt.
  • Dự án không liên quan tới web hoặc Chrome.
  • Bạn không muốn MCP client nhìn thấy nội dung đang mở trong trình duyệt.
  • Bạn đang xử lý dữ liệu nhạy cảm, tài khoản thật, thông tin cá nhân hoặc nội dung riêng tư.
  • Bạn cần hỗ trợ chính thức cho browser không phải Google Chrome hoặc Chrome for Testing.

So với việc tự mở DevTools bằng tay:

  • Tự mở DevTools phù hợp khi bạn muốn kiểm soát từng bước.
  • chrome-devtools-mcp phù hợp khi bạn muốn AI tự quan sát, thao tác và debug cùng bạn.

So với các công cụ tự động hóa như Puppeteer thuần:

  • Puppeteer phù hợp nếu bạn tự viết script kiểm thử.
  • chrome-devtools-mcp phù hợp nếu bạn muốn coding agent dùng khả năng đó qua MCP, kèm thêm thông tin từ DevTools.

🚀 Bắt đầu nhanh

Yêu cầu cơ bản:

  • Cài Node.js bản LTS.
  • Cài npm.
  • Cài Google Chrome bản stable hiện tại hoặc mới hơn.

Cách cấu hình phổ biến nhất là thêm MCP server vào MCP client của bạn:

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

Nếu bạn dùng Codex CLI, có thể thêm nhanh bằng lệnh:

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Nếu bạn dùng Claude Code, có thể thêm bằng lệnh:

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Nếu bạn chỉ cần các tác vụ trình duyệt cơ bản và muốn chạy nhẹ hơn, có thể dùng --slim và --headless:

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

Ví dụ tối thiểu sau khi cấu hình xong:

Mở http://localhost:3000 bằng chrome-devtools, bấm nút Login, kiểm tra console và network xem có lỗi gì không.

Một ví dụ khác:

Dùng chrome-devtools để chụp screenshot trang chủ, kiểm tra lỗi console, rồi gợi ý cách sửa nếu có lỗi.

Lưu ý về quyền riêng tư:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Dùng --no-usage-statistics nếu bạn không muốn gửi thống kê sử dụng của công cụ.

Nếu không muốn performance tools gửi trace URLs tới Google CrUX API, chạy với:

--no-performance-crux

✅ Điểm mạnh & ⚠️ Hạn chế

✅ Điểm mạnh

  • Kết nối trực tiếp coding agent với Chrome DevTools.
  • Giúp AI debug dựa trên trình duyệt thật, không chỉ đọc code.
  • Xem được console, network, DOM và screenshot.
  • Có thể phân tích hiệu năng bằng trace từ Chrome DevTools.
  • Dùng Puppeteer để tự động hóa thao tác đáng tin cậy hơn.
  • Hỗ trợ nhiều MCP client phổ biến như Claude, Cursor, Copilot, Codex, Gemini.
  • Có thể chạy nhanh bằng npx mà không cần cài đặt phức tạp.
  • Có chế độ --slim cho nhu cầu trình duyệt cơ bản.

⚠️ Hạn chế

  • Cần Node.js, npm và Chrome.
  • Chính thức hỗ trợ Google Chrome và Chrome for Testing; browser Chromium khác có thể chạy nhưng không đảm bảo.
  • MCP client có thể thấy và thao tác nội dung trong browser, nên không nên mở dữ liệu nhạy cảm.
  • Mặc định có thu thập usage statistics, cần tắt bằng --no-usage-statistics nếu không muốn.
  • Một số tính năng hiệu năng có thể dùng Google CrUX API, cần tắt bằng --no-performance-crux nếu muốn tránh.
  • Cần MCP client hỗ trợ MCP để dùng đúng sức mạnh của dự án.
  • Với người mới hoàn toàn, bước cấu hình MCP ban đầu có thể hơi lạ, nhưng chỉ cần làm một lần.