Chrome DevTools MCP

Chrome DevTools MCP là gì?

Chrome DevTools MCP là một công cụ cho phép Claude Code điều khiển trình duyệt Chrome một cách tự động — như thể có một người đang ngồi trước màn hình và thao tác chuột, bàn phím.

MCP viết tắt của Model Context Protocol — một giao thức giúp Claude Code kết nối với các công cụ bên ngoài, trong trường hợp này là trình duyệt Chrome.

Tại sao nên dùng Chrome DevTools MCP?

Đặc điểm	Giải thích đơn giản
Tự động hoá thao tác trình duyệt	Mở trang web, điền form, bấm nút, chụp ảnh màn hình — tất cả đều tự động.
Làm việc với web tĩnh	Một số trang web không có API để lấy dữ liệu — Chrome DevTools là cách duy nhất để tương tác.
Tương thích với mọi trình duyệt	Hoạt động trên Chrome, Edge, Brave và các trình duyệt dựa trên Chromium.
Chạy trên máy tính của bạn	Không cần server, không tốn chi phí cloud — mọi thứ chạy trực tiếp trên máy bạn.
Miễn phí và mã nguồn mở	Được phát triển bởi cộng đồng, không mất phí.

Danh sách đầy đủ các công cụ (Tools)

Dưới đây là toàn bộ hơn 30 công cụ của Chrome DevTools MCP, được phân loại theo công dụng để bạn dễ tìm kiếm.

Dùng khi bạn muốn điều khiển trình duyệt — mở trang, nhấp chuột, nhập liệu.

Tên công cụ	Công dụng
`navigate_page`	Mở một trang web tại URL cụ thể, hoặc quay lại/trước/tải lại trang hiện tại.
`new_page`	Mở một tab mới trong trình duyệt tại URL cụ thể.
`select_page`	Chuyển đổi giữa các tab đang mở trong trình duyệt.
`close_page`	Đóng một tab trong trình duyệt.
`click`	Nhấp chuột vào một phần tử trên trang (nút bấm, liên kết, hình ảnh…).
`hover`	Di chuột qua một phần tử — kích hoạt tooltip, menu hover.
`drag`	Kéo một phần tử và thả vào vị trí khác (ví dụ: kéo file vào ô tải lên).
`fill`	Điền văn bản vào ô nhập liệu (Input, Textarea, Select…).
`fill_form`	Điền nhiều ô nhập liệu cùng lúc từ một danh sách.
`type_text`	Gõ văn bản bằng bàn phím — dùng khi cần gõ từng ký tự (mật khẩu, captcha…).
`press_key`	Nhấn một phím hoặc tổ hợp phím đặc biệt (`Enter`, `Escape`, `Control+A`, `Ctrl+S`…).
`upload_file`	Tải lên một tệp — ví dụ: upload ảnh, tài liệu.

2. Nhóm “Kiểm tra & Quan sát” — Inspection & Observation

Dùng khi bạn muốn nhìn thấy những gì đang xảy ra trên trang web.

Tên công cụ	Công dụng
`take_snapshot`	Chụp “ảnh chụp nhanh” toàn bộ nội dung trang — liệt kê mọi phần tử trên màn hình kèm ID để nhận diện.
`take_screenshot`	Chụp ảnh màn hình của trang web — lưu thành file PNG/JPEG.
`list_pages`	Liệt kê tất cả các tab đang mở trong trình duyệt.
`list_console_messages`	Xem các thông báo từ console của trình duyệt — hữu ích khi debug lỗi.
`get_console_message`	Xem chi tiết một thông báo console cụ thể theo ID.
`list_network_requests`	Xem danh sách tất cả yêu cầu mạng (API calls, tải ảnh, file…) mà trang đã gửi/nhận.
`get_network_request`	Xem chi tiết một yêu cầu mạng cụ thể — header, body request, response.
`evaluate_script`	Chạy đoạn mã JavaScript tuỳ chỉnh trên trang — dùng để trích xuất dữ liệu phức tạp.

3. Nhóm “Xử lý hộp thoại” — Dialog Handling

Dùng khi trang web hiện ra hộp thoại (alert, confirm, prompt).

Tên công cụ	Công dụng
`handle_dialog`	Chấp nhận (Accept) hoặc bỏ qua (Dismiss) hộp thoại của trình duyệt — ví dụ: alert “Bạn có chắc muốn rời trang?“.

4. Nhóm “Tuỳ chỉnh trình duyệt” — Browser Emulation

Dùng khi bạn muốn mô phỏng các điều kiện đặc biệt — thiết bị di động, mạng chậm, vị trí địa lý.

Tên công cụ	Công dụng
`resize_page`	Thay đổi kích thước cửa sổ trình duyệt — mô phỏng màn hình desktop, tablet, mobile.
`emulate`	Tuỳ chỉnh trình duyệt: thay đổi kích thước viewport, thu phóng, chế độ sáng/tối, throttle mạng (3G/4G).

5. Nhóm “Kiểm tra hiệu năng” — Performance & Analysis

Dùng khi bạn muốn đo lường, phân tích tốc độ và chất lượng trang web.

Tên công cụ	Công dụng
`performance_start_trace`	Bắt đầu ghi lại hiệu năng trang — theo dõi thời gian tải, render, JavaScript execution.
`performance_stop_trace`	Dừng ghi và trả về file trace — có thể phân tích chi tiết từng mili giây.
`lighthouse_audit`	Chạy kiểm tra Lighthouse — đo điểm Accessibility, SEO, Best Practices (không bao gồm Performance).
`take_memory_snapshot`	Chụp bản đồ bộ nhớ của trang — dùng để phát hiện memory leak.
`performance_analyze_insight`	Xem chi tiết một chỉ số hiệu năng cụ thể trong kết quả trace.

Minh hoạ nhanh bằng hình ảnh

Dưới đây là luồng thao tác phổ biến khi dùng Chrome DevTools MCP với Claude Code:

┌─────────────────────────────────────────────────────────┐
│  🌐 Navigation & Interaction                             │
│                                                         │
│  list_pages()          ← Xem có bao nhiêu tab đang mở  │
│  new_page("zalo.com")  ← Mở tab mới                     │
│  take_snapshot()        ← Chụp nội dung trang            │
│  click(uid: "btn-1")   ← Bấm nút "Đăng nhập"           │
│  fill(uid: "input-1", "tungnt") ← Điền tên đăng nhập    │
│  press_key("Enter")    ← Nhấn Enter                     │
│                                                         │
│  📸 Inspection & Observation                            │
│                                                         │
│  take_screenshot()     ← Chụp ảnh màn hình              │
│  list_console_messages() ← Xem log lỗi console           │
│  evaluate_script(() => return document.title) ← Lấy tiêu đề │
│                                                         │
│  🔧 Browser Emulation & Performance                     │
│                                                         │
│  emulate(viewport: "375x667", network: "Slow 4G") ← Mobile │
│  lighthouse_audit(device: "mobile") ← Kiểm tra SEO/A11y  │
│  performance_start_trace()  ← Bắt đầu đo hiệu năng       │
└─────────────────────────────────────────────────────────┘

Cách bắt đầu dùng với Claude Code

Bước 1: Cài đặt MCP Server

npm install -g @modelcontextprotocol/server-chrome-devtools

Bước 2: Thêm vào Claude Code (trong cấu hình MCP)

Tạo hoặc cập nhật file cấu hình MCP của bạn:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-chrome-devtools"]
    }
  }
}

Bước 3: Sử dụng trong Claude Code

Sau khi cài đặt, Claude Code có thể tự động điều khiển trình duyệt Chrome khi bạn yêu cầu. Ví dụ:

“Mở trang web example.com và chụp ảnh màn hình”
“Điền form đăng nhập với email: abc@gmail.com và password: 123456”
“Kiểm tra điểm SEO của trang ngothanhtung.com”

Ứng dụng thực tế

Web Scraping (Lấy dữ liệu từ web)

Khi trang web không có API, bạn dùng Chrome DevTools để tự động trích xuất dữ liệu:

// Dùng evaluate_script để lấy toàn bộ danh sách sản phẩm
const products = Array.from(document.querySelectorAll('.product-item')).map((item) => ({
  name: item.querySelector('.product-name')?.innerText,
  price: item.querySelector('.product-price')?.innerText,
}));

return products;

Kiểm tra đăng nhập

// Mở trang, điền form, bấm nút đăng nhập
await navigate_page("https://example.com/login")
await fill_form([
  { uid: "email-input", value: "user@example.com" },
  { uid: "password-input", value: "secretpassword" }
])
await click(uid: "login-button")

Kiểm tra hiệu năng trang web

// Đo tốc độ tải trang
await performance_start_trace()
await navigate_page("https://example.com")
await performance_stop_trace(filePath: "./trace.json")

Mẹo dành cho người mới bắt đầu

Nên làm

Bắt đầu bằng take_snapshot() — Đây là cách nhanh nhất để xem trang web có những phần tử nào và ID của chúng.
Dùng take_screenshot() để xác nhận trang đã mở đúng trang cần thiết.
Dùng list_pages() trước khi thao tác nhiều tab — tránh nhầm tab.
Thử evaluate_script() khi bạn cần trích xuất dữ liệu phức tạp mà không có API.

Tránh làm

Không nhấn nhiều nút liên tục — Mỗi thao tác cần thời gian để trang xử lý xong (loading). Đợi trang ổn định trước khi thao tác tiếp.
Không quên handle_dialog() — Nếu trang web hiện hộp thoại xác nhận, Claude Code cần xử lý nó trước khi làm gì khác.
Không dùng mạng không giới hạn để test — Dùng emulate(network: "Slow 3G") để mô phỏng điều kiện thực tế.

Tóm tắt nhanh theo nhóm

Nhóm	Số công cụ	Dùng khi nào?
Điều hướng & Tương tác	12	Điều khiển trình duyệt — nhấp, nhập, điều hướng
Kiểm tra & Quan sát	8	Xem nội dung trang, log lỗi, request
Xử lý hộp thoại	1	Xử lý alert/confirm/prompt
Tuỳ chỉnh trình duyệt	2	Mô phỏng thiết bị, mạng, giao diện
Kiểm tra hiệu năng	5	Đo tốc độ, phân tích hiệu năng

Tổng cộng: ~30 công cụ — đủ để tự động hoá mọi thao tác trên trình duyệt.

Liên kết hữu ích

Trang chính thức: github.com/modelcontextprotocol/servers/tree/main/src/chrome-devtools
Tài liệu MCP: modelcontextprotocol.io
Lighthouse: developer.chrome.com/docs/lighthouse

Tổng quan

Tạo tài khoản và thiết lập

Development tools

Kiến thức nền tảng

Công nghệ

Kiến trúc phần mềm

Thực chiến