Chrome DevTools MCP cho Claude, Codex, Gemini - AI agent thật sự control browser, debug như senior dev

Bạn đang dùng Claude Code, Codex, hay Gemini CLI để code. Agent đọc file giỏi, viết code giỏi, nhưng khi gặp UI bug thì như mù: nó không thấy gì trên màn hình. Bạn phải chụp screenshot, paste vào chat, mô tả "cái button đang đè lên text", "header bị cách top 24px"... rồi đợi agent đoán. Sửa xong agent không tự verify được, lại phải bạn chụp tiếp.

Chrome DevTools MCP giải quyết đúng nỗi đau đó. Đây là MCP server chính thức của Google, mở toàn bộ Chrome DevTools Protocol cho AI agent. Agent có thể tự mở browser, navigate URL, click, fill form, chụp screenshot, đọc console error, đo Core Web Vitals, debug network request, chạy Lighthouse audit. Tất cả qua 43+ tool đã sẵn sàng.

Lợi ích chính, gói lại 1 dòng mỗi cái

• Agent thấy được trang web thật: chụp screenshot, đọc DOM snapshot, kể chính xác element nào đang ở đâu.
• Sửa xong tự verify: agent reload page, chụp lại, so sánh trước/sau, không cần bạn confirm bằng tay.
• Đọc Console error trực tiếp: không còn cảnh paste 50 dòng stack trace vào chat.
• Network inspect: agent xem API request/response, debug 500 error, tìm endpoint chậm.
• Performance trace + Lighthouse: AI viết tối ưu rồi tự đo Core Web Vitals trước/sau.
• Form fill, click, keyboard input: chạy được kịch bản test e2e nhỏ ngay trong session chat.
• Device emulation: test mobile viewport bằng iPhone UA trực tiếp, không cần BrowserStack.
• Memory heap snapshot: agent detect memory leak trong React/Vue app.

Một câu: agent giờ vừa là dev, vừa là QA, vừa là designer review.

Setup trong 60 giây cho 3 agent CLI chính

Cả 3 đều dùng cùng package chrome-devtools-mcp trên npm. Khác nhau chỉ ở command đăng ký MCP server.

Claude Code

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

Nếu muốn cả plugin (MCP + Skills + slash commands):

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

Codex CLI

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

Gemini CLI

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

Hoặc cài dưới dạng extension (có sẵn skills):

gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

Hoặc config JSON dùng cho cả 3

Mọi MCP client đều đọc được config dạng này (đặt vào ~/.config/claude/mcp.json hoặc tương đương):

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

Yêu cầu hệ thống

• Node.js LTS (20.x trở lên)
• Chrome stable, beta, dev hoặc canary (Chromium khác không support)
• npm để chạy npx

Flag hay dùng

• --headless: chạy ẩn, không bật cửa sổ browser. Tốt cho server không có GUI.
• --browser-url: gắn vào instance Chrome đang chạy sẵn (giữ session login).
• --channel canary: chọn kênh Chrome (canary/dev/beta/stable).
• --isolated: profile tạm, tự xoá khi xong, không dính cookie cũ.

10 use case thực tế

Sau đây là các kịch bản mình áp dụng hằng tuần, cụ thể từng cái dùng với agent nào hợp nhất.

1. Sửa CSS layout từ screenshot, agent tự verify

Trang landing trên mobile bị overflow ngang, button bị cắt phải. Trước đây phải chụp gửi agent. Giờ:

You: Sửa cái landing /pricing trên mobile 390px, button "Mua ngay" đang bị tràn ra phải.

Claude:
  [navigate https://yoursite.com/pricing]
  [emulate viewport 390x844 iPhone]
  [screenshot - thấy button overflow]
  [đọc CSS .btn-buy, tìm root cause]
  [edit file styles.css, set max-width:100%]
  [deploy hot reload]
  [navigate reload]
  [screenshot - button không còn overflow]
  Done. Fixed by adding max-width:100% to .btn-buy.

Hợp với Claude Code nhất vì context window dài, agent quản lý multi-step tốt.

2. Debug Console error trong Next.js dev server

App lỗi Hydration mismatch nhưng không biết component nào. Hỏi agent:

You: Vào localhost:3000, click /dashboard, đọc console error.

Codex:
  [navigate http://localhost:3000]
  [click a[href="/dashboard"]]
  [get_console_messages]
  Error: Hydration failed because the initial UI does not match...
  Stack trace points to components/UserBadge.tsx:14

  [read components/UserBadge.tsx]
  Root cause: useState(new Date()) chạy khác giữa server/client.

  [edit] fix with useEffect to set time after mount.
  [reload, recheck console]
  Console clean.

3. Đo Core Web Vitals trước/sau khi tối ưu

Optimize ảnh hero từ 2MB xuống 200KB. Muốn confirm LCP cải thiện thực sự:

You: Chạy performance trace trên homepage, so sánh trước và sau tối ưu hero image.

Gemini:
  [performance_start_trace https://yoursite.com]
  [wait_load + idle]
  [performance_stop]
  Trước: LCP 3.2s, CLS 0.18, INP 240ms

  [áp dụng patch tối ưu image]
  [navigate reload]
  [performance trace lại]
  Sau: LCP 1.4s, CLS 0.02, INP 180ms

  Tóm: LCP giảm 56%, CLS dưới ngưỡng 0.1, mobile xanh.

4. Verify deploy production sau khi push code

Sau khi git push lên main, CI deploy xong. Trước đây bạn phải mở browser check tay 5 page. Giờ agent làm:

You: Vừa deploy v2.4. Check homepage, /pricing, /docs, /login, /signup xem có 200 + render h1 đúng không.

Claude:
  for each URL:
    [navigate]
    [screenshot]
    [evaluate document.querySelector('h1')?.innerText]
    [check network for 4xx/5xx]

  Kết quả:
    / - 200, h1 "Welcome to..." OK
    /pricing - 200, h1 "Choose your plan" OK
    /docs - 200, h1 "Documentation" OK
    /login - 200, h1 "Sign in" OK
    /signup - 500 ERROR! POST /api/check-username trả 502.

  Cần rollback hoặc fix /api/check-username trước khi merge tiếp.

5. Test form submission end to end

Form contact mới làm, muốn test thật xem có gửi mail không, không cần viết Playwright spec:

You: Vào /contact, điền form mẫu, submit, verify thấy "Cảm ơn".

Agent:
  [navigate /contact]
  [fill input[name=name] = "Test"]
  [fill input[name=email] = "[email protected]"]
  [fill textarea[name=msg] = "Hello"]
  [click button[type=submit]]
  [wait_for "Cảm ơn"]
  Success - thank-you message hiện, mail đã gửi (network log thấy POST /api/contact 200).

6. Visual regression khi merge PR

Trước khi merge PR, chụp 5 page key, so với baseline trên main. Tìm pixel diff lớn:

You: Compare visuals của PR branch vs main cho /home, /pricing, /about.

Agent:
  for each page on PR preview:
    [navigate + screenshot]
  for each page on main:
    [navigate + screenshot]
  diff pixel by pixel.

  /home: 0.2% diff (chấp nhận, chỉ là time render hơi khác)
  /pricing: 14% diff! Card pricing thay đổi layout.
  /about: 0%

  Nếu PR không cố ý đổi /pricing, đây là regression.

7. Scrape data có pagination + auth

Cần lấy 200 dòng từ admin dashboard (cần login). Agent login, navigate, scroll, scrape:

You: Login vào admin với cookie session.json, vào /admin/orders, scrape tất cả orders 30 ngày qua.

Agent:
  [load cookie session.json]
  [navigate /admin/orders?days=30]
  while có button "Load more":
    [click + wait]
  [evaluate JS: lấy data từ DOM hoặc window.__INITIAL_STATE__]
  Saved 247 orders to orders.json

8. Test responsive trên 5 device viewport cùng lúc

Không cần BrowserStack subscription. Agent emulate device, chụp, lặp:

You: Test /landing trên iPhone 13, iPhone 15 Pro Max, iPad, Pixel 7, Galaxy S20.

Agent:
  for each device:
    [emulate device]
    [navigate + screenshot fullPage]
  Tạo /tmp/landing-responsive/ với 5 ảnh để bạn review.

  Phát hiện: trên Galaxy S20 hero text bị cắt vì font-size không clamp.

9. Inspect Network để debug API chậm

App load chậm. Muốn biết request nào tốn time nhất:

You: Vào /dashboard, log toàn bộ network request, tìm cái nào > 1s.

Agent:
  [network_start_capture]
  [navigate /dashboard]
  [wait_idle]
  [network_get_requests]
  Top slow:
    GET /api/feed/recent: 2.4s (DB query không có index)
    GET /api/notifications: 1.8s (gọi 8 service downstream)
    Image hero.jpg: 1.2s (chưa optimize)
  Suggestion: thêm index ON feed.created_at DESC, parallelize notifications calls.

10. Memory leak hunting trong SPA

App React/Vue dùng lâu bị chậm. Suspect memory leak:

You: Vào /chat, gửi 50 message giả, chụp heap snapshot.

Agent:
  [navigate /chat]
  [memory_take_snapshot baseline]
  loop 50 times: [type + send message]
  [memory_take_snapshot after]
  [memory_diff]

  +47MB. Class MessageBubble không bị GC: 50 instances còn live.
  Root cause: event listener gắn vào window.addEventListener nhưng không removeEventListener khi unmount.

Tips bonus

• Chạy headless trên VPS: dùng --headless để agent chạy server side, không cần GUI. Hợp cho CI/CD task.
• Gắn vào Chrome đang mở: --browser-url http://localhost:9222 để dùng session login sẵn (Gmail, admin, etc.).
• Isolated profile: --isolated mỗi run dùng profile sạch, test không bị nhiễm cookie cũ.
• Limit data exposure: MCP client thấy được toàn bộ trang (bao gồm form đã điền, cookie). Cẩn thận khi agent navigate vào trang có thông tin cá nhân.

Khi nào nên dùng MCP này, khi nào không

Nên dùng nếu: bạn đang code web/app, hay phải debug UI/CSS, cần verify deploy, làm visual regression, tối ưu performance, test e2e nhỏ trong vibe coding flow.

Không nên nếu: bạn cần CI test suite production grade (dùng Playwright/Cypress đúng nghĩa), hoặc test cross browser thật (MCP chỉ support Chrome, không cover Safari/Firefox).

Datacenter ở Việt Nam (Hà Nội + Hải Phòng) cho ping nội địa dưới 10ms, đẩy code và sync log từ laptop về VPS gần như instant. Khởi tạo trong 60 giây, root access đầy đủ, snapshot tự động, hỗ trợ 24/7 qua Zalo và ticket.