Chrome DevTools MCP cho Claude Code: cài đặt và attach mode

Agent của bạn vừa sửa xong một bug CSS và tuyên bố "đã fix", nhưng nó chưa hề mở trang đó lần nào. Bạn vẫn là người phải F5, mở DevTools, đọc console rồi quay lại dán log cho nó. Chrome DevTools MCP cắt bỏ vòng lặp đó: agent tự mở Chrome thật, đọc console, xem request hỏng và nói cho bạn biết cái gì vỡ.

Chrome DevTools MCP là gì, và nó khác gì một "browser tool"

Theo bài hướng dẫn của Branch42 Labs, đây là MCP server mã nguồn mở do chính đội Chrome DevTools phát triển. Nó cho phép Claude Code, Cursor, Codex hoặc Gemini CLI điều khiển một Chrome thật và dùng các tính năng DevTools: network requests, console, screenshots, performance traces, Lighthouse và heap snapshots.

Tác giả ghi nhận đội Chrome phát hành bản public preview từ tháng 9/2025, và hiện bộ server có khoảng 60 tool, một số nằm sau cờ opt-in. Con số đó quan trọng với bạn vì mỗi tool là một mô tả nạp vào context — bật tất cả không phải lúc nào cũng tốt.

MCP (Model Context Protocol) là chuẩn mở để một AI client gọi tool bên ngoài. Server công bố danh sách tool, client đọc danh sách đó và gọi khi request của bạn cần tới.

Cài đặt: một dòng lệnh, nhưng chọn scope trước

Yêu cầu tối thiểu là Node.js LTS và Chrome stable hiện hành. Lệnh cài cho Claude Code:

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

Đừng gõ vội cái --scope user đó theo quán tính. Tài liệu Claude Code mô tả ba scope với hệ quả rất khác nhau:

Scope	Cờ	Lưu ở đâu	Ai dùng được
Local (mặc định)	không có	config Claude của bạn	chỉ bạn, trong project này
Project	--scope project	.mcp.json trong repo	mọi người clone repo
User	--scope user	config Claude của bạn	chỉ bạn, trong mọi project

Điểm hay của project scope: nó chia sẻ địa chỉ server, không chia sẻ phiên đăng nhập của bạn — mỗi người vẫn tự sign in bằng tài khoản của họ. Với DevTools MCP chạy local qua npx thì user scope là lựa chọn hợp lý; với MCP server remote dùng chung trong team, project scope mới là cái bạn muốn commit.

Nếu thích bản plugin, nó cài kèm cả skills cho a11y, cookies, LCP và memory leaks:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Client khác dùng cấu hình JSON quen thuộc, với command: "npx" và args ["-y", "chrome-devtools-mcp@latest"]. Codex và Gemini CLI có lệnh tương đương codex mcp add và gemini mcp add. Prompt đầu tiên nên thử: yêu cầu agent kiểm tra performance của một URL cụ thể — bạn sẽ thấy cửa sổ Chrome bật lên và một trace được ghi.

Bộ tool network là phần đáng tiền nhất

Có hai tool. list_network_requests trả về request của trang kể từ lần navigate gần nhất; lọc theo resourceTypes, phân trang bằng pageSize/pageIdx, và đặt includePreservedRequests để với ngược lại 3 lần navigation. get_network_request trả về một request kèm headers — gồm cả Cookie và Set-Cookie — cùng body.

Mẹo đáng giá nhất trong bài: gọi get_network_request không kèm reqid thì nó trả về đúng request bạn đang chọn trong panel Network của DevTools. Quy trình thành ra rất gọn — click vào call đang lỗi, rồi hỏi agent "tại sao cái này 403?".

Body lớn thì dùng responseFilePath để ghi ra đĩa thay vì nhồi vào context window. Đây là chi tiết dễ bỏ qua nhưng quyết định việc một phiên debug kéo dài được bao lâu trước khi context phình.

Attach mode: trỏ agent vào Chrome bạn đang đăng nhập

Mặc định server tự khởi động Chrome với profile riêng tại ~/.cache/chrome-devtools-mcp/chrome-profile; cờ --isolated dùng profile dùng một lần. Cả hai đều vô dụng khi bug nằm sau màn hình login.

Cách chính thức là --autoConnect, cần Chrome 144 trở lên: mở chrome://inspect/#remote-debugging, cho phép incoming connections, thêm cờ vào args, rồi duyệt hộp thoại quyền mà Chrome hiện mỗi lần server kết nối. Trong lúc attach, banner "Chrome is being controlled by automated test software" sẽ nằm đó.

Chrome cũ hơn hoặc môi trường sandbox thì tự mở Chrome với --remote-debugging-port=9222 và một --user-data-dir riêng, sau đó trỏ server vào bằng --browser-url=http://127.0.0.1:9222.

Đánh đổi phải nói thẳng: attach mode trao cho agent cookies và các tài khoản bạn đang đăng nhập. Bài viết dẫn tài liệu của Google rằng chỉ nên dùng chế độ này với agent mà bạn tin tưởng. Trước khi bật, cân nhắc ba cờ: --redactNetworkHeaders nếu headers mang token bạn không muốn gửi cho model, --no-usage-statistics vì thống kê sử dụng bật sẵn, và --no-performance-crux vì nhóm tool performance có thể gửi URL trace sang CrUX.

Khi nào chọn Playwright MCP

Playwright MCP (claude mcp add playwright npx @playwright/mcp@latest) chồng lấn khá nhiều. Bảng so sánh trong bài tóm gọn khác biệt:

Tiêu chí	Chrome DevTools MCP	Playwright MCP
Trình duyệt	Chrome, Chrome for Testing	Chrome, Firefox, WebKit, Edge
Mô hình trang	screenshots + text snapshot	accessibility tree, không cần vision
Perf / Lighthouse / heap	có	traces qua --caps=devtools, không có Lighthouse hay heap tool
Network	list + get (headers, bodies)	list (regex URL) + get, mock qua --caps=network
Dùng browser sẵn có	--autoConnect, --browser-url	--extension, --cdp-endpoint

Quy tắc chọn của tác giả rất gọn: user flow và kiểm tra cross-browser thì Playwright; "tại sao trang này chậm hoặc lỗi trên Chrome" thì DevTools MCP. Bài cũng dẫn README của Playwright lưu ý rằng coding agent có thể hợp với CLI + skills của nó hơn, vì các lệnh đó tốn ít token hơn MCP.

Giới hạn cần biết trước khi kỳ vọng quá nhiều

Tác giả chỉ ra một vùng mà cả hai server đều đuối: hiểu toàn bộ API của một app. Cả hai chỉ thấy những gì trình duyệt tải trong lúc agent còn kết nối. Danh sách request reset theo mỗi lần navigate và chỉ với ngược được tối đa 3 lần, nên agent phải click qua từng màn hình, mỗi màn hình tốn tool call và context. Thêm nữa, /orders/1042 và /orders/1043 hiện ra như hai URL riêng biệt — agent phải tự suy ra chúng là một endpoint. Đóng trình duyệt là mất sạch traffic.

Nói cách khác: đây là công cụ cho "đi tái hiện lỗi này", không phải cho "vẽ lại bản đồ API của hệ thống".

Việc nên làm tiếp

Cài ở local scope trong đúng một repo đang có bug frontend, chạy không attach, và để agent tự đọc console một tuần. Nếu nó bắt đầu trả lời được "request nào 403 và vì sao" mà bạn không phải copy log, lúc đó mới cân nhắc --autoConnect — kèm --redactNetworkHeaders. Thứ đáng theo dõi tiếp là số tool: 60 tool trong context không miễn phí, và các cờ opt-in tồn tại chính vì lý do đó.