Chrome DevTools MCP: Debug trình duyệt từ agent của bạn
ChromeDevTools/chrome-devtools-mcpChrome DevTools MCP là một MCP server trao cho coding agent quyền truy cập một trình duyệt Chrome thật qua toàn bộ bộ công cụ Chrome DevTools. Agent của bạn — Claude, Cursor, Copilot hay Antigravity — có thể ghi trace hiệu năng, đọc network và console, chụp màn hình, và tự động hóa hành động bằng Puppeteer.
Hãy chọn Chrome DevTools MCP nếu bạn muốn coding agent thực sự thấy trang đang làm gì — trace hiệu năng thật, lời gọi network, lỗi console — thay vì đoán từ code. Bỏ qua nếu công việc của bạn không đụng tới trình duyệt, hoặc bạn chỉ cần tự động hóa bằng script, khi đó Puppeteer hay Playwright thuần nhẹ hơn là dựng một MCP server.
Vấn đề nó giải quyết
Một coding agent debug web app thường làm việc trong mù mờ: nó đọc mã nguồn nhưng không thấy trang đã render, request network lỗi, hay lỗi console chỉ xuất hiện lúc chạy. Rốt cuộc bạn phải copy-paste đầu ra DevTools vào chat bằng tay, vừa chậm vừa mất source-mapped stack trace vốn khiến một lỗi đọc được.
Đây là gì?
Chrome DevTools MCP là một Model Context Protocol server mã nguồn mở (giấy phép Apache-2.0), viết bằng TypeScript, nối một coding agent tới một trình duyệt Chrome thật. Nó phơi các năng lực Chrome DevTools — trace hiệu năng, soi network và console, chụp màn hình, tự động hóa bằng Puppeteer — dưới dạng công cụ MCP, để agent kiểm tra và debug một trang sống. Cũng có một CLI để dùng không cần MCP.
Vì sao đang được chú ý
MCP đã thành cách phổ biến để trao cho công cụ AI coding các năng lực thật, và một trình duyệt là một trong những thứ hữu ích nhất để giao cho agent. Cái này đến từ chính đội Chrome DevTools, nhắm thẳng vào điểm mù lúc chạy, và hoạt động với Claude, Cursor, Copilot và Antigravity — nên nó ăn khớp với những ai xây workflow web do agent điều khiển.
Tính năng chính
- ✓Thông tin hiệu năng: ghi trace Chrome DevTools và rút ra phát hiện hành động được
- ✓Debug trình duyệt: soi request network, thông điệp console và chụp màn hình
- ✓Source-mapped stack trace, nên lỗi lúc chạy vẫn đọc được
- ✓Tự động hóa dựa trên Puppeteer, tự chờ kết quả hành động
- ✓Hoạt động với các MCP client như Claude, Cursor, Copilot và Antigravity
- ✓Một CLI độc lập để dùng không cần MCP client
Trường hợp dùng tốt nhất
- •Để một agent ghi và đọc trace hiệu năng nhằm tìm cái làm chậm một trang
- •Debug một lỗi lúc chạy từ đầu ra console với source-mapped stack trace
- •Soi các request network lỗi trong lúc agent sửa lỗi
- •Tự động hóa hành động trình duyệt trong một workflow coding bằng Puppeteer
Cách cài đặt / dùng thử
Chrome DevTools MCP được công bố trên npm với tên `chrome-devtools-mcp`. Bạn thêm nó vào cấu hình MCP client như một server — ví dụ args `["-y", "chrome-devtools-mcp@latest"]` — và nó chạy qua npx. Nó hỗ trợ chính thức Google Chrome và Chrome for Testing. Xem tool reference và troubleshooting của kho để biết thiết lập cho từng client.
Cách sử dụng
Khi MCP server đã đăng ký với client, agent của bạn gọi các công cụ của nó để điều khiển Chrome: ghi trace, đọc panel network, kiểm tra console, chụp màn hình, hoặc tự động hóa một cú click. Các cờ cho phép tinh chỉnh thu thập dữ liệu — `--no-usage-statistics` tắt thống kê dùng của Google và `--no-performance-crux` tắt tra cứu dữ liệu thực địa CrUX.
Điểm mạnh
- ✓Đến từ chính đội Chrome DevTools, nên bám sát các năng lực DevTools thật
- ✓Cho agent tầm nhìn lúc chạy — hiệu năng, network, console — không chỉ mã nguồn
- ✓Giữ source-mapped stack trace, khiến lỗi lúc chạy thực sự debug được
- ✓Kiêm luôn CLI, nên bạn dùng được mà không phải cam kết một MCP client
Hạn chế & rủi ro
- △Nó phơi nội dung trình duyệt cho MCP client, nên đừng chĩa vào phiên có dữ liệu nhạy cảm hay cá nhân (README nói thẳng điều này)
- △Chỉ hỗ trợ chính thức Google Chrome và Chrome for Testing; các trình duyệt Chromium khác có thể trục trặc
- △Thu thập thống kê sử dụng bật mặc định — bạn phải dùng cờ để tắt
- △Đây là công cụ debug trình duyệt; với tự động hóa thuần bằng script, Puppeteer hay Playwright thuần là phụ thuộc nhẹ hơn
Lựa chọn thay thế
Ai nên thử — và ai nên bỏ qua
Lập trình viên điều khiển một coding agent (Claude, Cursor, Copilot, Antigravity) và muốn nó debug cùng đo hiệu năng trang thật thay vì suy luận từ mã nguồn. Nếu công việc agent của bạn nặng về trình duyệt, tầm nhìn lúc chạy rất đáng. Nếu bạn không đụng trình duyệt hoặc chỉ cần tự động hóa bằng script, nó là thừa thiết lập.
Câu hỏi thường gặp
Chrome DevTools MCP là một MCP server từ đội Chrome DevTools, cho phép coding agent điều khiển và kiểm tra một trình duyệt Chrome thật — ghi trace hiệu năng, đọc dữ liệu network và console, và tự động hóa hành động bằng Puppeteer.
README liệt kê các MCP client như Claude, Cursor, Copilot và Antigravity. Cũng có một CLI để dùng không cần MCP client.
Nó hỗ trợ chính thức Google Chrome và Chrome for Testing. Các trình duyệt dựa trên Chromium khác có thể chạy nhưng không được đảm bảo, theo README.
Thống kê sử dụng bật mặc định và có thể tắt bằng `--no-usage-statistics`. Công cụ hiệu năng có thể truy vấn API Google CrUX, bạn tắt được bằng `--no-performance-crux`.