Các tác nhân mã hóa như Claude Code, Cursor và Copilot có thể viết mã, chạy thử nghiệm và gỡ lỗi — nhưng họ không thể xem trang web của bạn trông như thế nào trong trình duyệt thực. Họ có thể đọc nguồn HTML nhưng không thể hiểu được bố cục, kiểu dáng, hoạt ảnh hoặc hành vi thời gian chạy. Họ có thể kiểm tra nhật ký bảng điều khiển nhưng không thể tương tác với trang như người dùng.

Chrome DevTools MCP thu hẹp khoảng cách này. Đây là một dự án Google Chrome chính thức nhằm phô diễn toàn bộ sức mạnh của Giao thức Chrome DevTools (CDP) cho các tác nhân mã hóa AI thông qua Giao thức bối cảnh mô hình (MCP). Đột nhiên, tác nhân mã hóa của bạn có thể chụp ảnh màn hình, phân tích hiệu suất, kiểm tra các yêu cầu mạng, gỡ lỗi bảng điều khiển và tự động hóa các tương tác trên trình duyệt — tất cả đều thông qua một giao thức được tiêu chuẩn hóa.

Chrome DevTools MCP là gì? #

Chrome DevTools MCP (chrome-devtools-mcp) là máy chủ MCP cung cấp cho các tác nhân mã hóa AI quyền truy cập vào Chrome DevTools. Nó được duy trì bởi nhóm Chrome DevTools tại Google và được phát hành theo giấy phép Apache-2.0.

Dự án có hai hợp phần:

MCP Server — Kết nối tác nhân mã hóa của bạn với trình duyệt Chrome trực tiếp qua CDP
CLI — Công cụ dòng lệnh độc lập để tự động hóa trình duyệt mà không cần MCP

Với điều này, tác nhân mã hóa của bạn có thể:

Xem trang web của bạn thông qua ảnh chụp màn hình
Đo lường hiệu suất của nó thông qua dấu vết và số liệu
Gỡ lỗi sự cố mạng thông qua kiểm tra yêu cầu/phản hồi
Tương tác với trang thông qua các lần nhấp, nhập và điều hướng tự động
Kiểm tra DOM và CSS trong thời gian thực

Tính năng chính #

###Chụp ảnh màn hình

Chụp ảnh màn hình toàn trang hoặc chế độ xem của bất kỳ trang web nào. Tác nhân mã hóa của bạn có thể sử dụng điều này để xác minh trực quan rằng các thay đổi CSS, cập nhật thành phần hoặc điều chỉnh bố cục của nó có chính xác — mà bạn không cần phải tự mở trình duyệt.

Nhân viên: "Để tôi chụp ảnh màn hình để xác minh bố cục."
→ chrome-devtools-mcp chụp ảnh màn hình
→ Đại lý xem trang được hiển thị
→ Tác nhân điều chỉnh CSS nếu cần

Phân tích hiệu suất #

Ghi lại dấu vết hiệu suất và trích xuất thông tin chi tiết hữu ích:

Các chỉ số quan trọng về trang web — Các phép đo LCP, FID, CLS
Thác nước mạng — Chuỗi thời gian và phụ thuộc yêu cầu
Hồ sơ JavaScript — Thời gian thực hiện hàm và ngăn xếp cuộc gọi
Phân tích tốc độ khung hình — Phát hiện giật và giảm FPS

Kiểm tra mạng #

Phân tích mọi yêu cầu và phản hồi của mạng:

Tiêu đề yêu cầu, mã phản hồi, thời gian
Kích thước tải trọng và tỷ lệ nén
Yêu cầu không thành công và lỗi CORS
Hoạt động của nhân viên phục vụ

Gỡ lỗi bảng điều khiển #

Đọc thông báo trên bảng điều khiển trình duyệt với dấu vết ngăn xếp được ánh xạ nguồn:

Lỗi JavaScript với số tập tin và dòng
Đầu ra Console.log từ ứng dụng của bạn
Thông báo cảnh báo về các API không được dùng nữa
Thông báo bảng điều khiển tùy chỉnh từ mã của bạn

Kiểm tra DOM và CSS #

Truy vấn và thao tác với DOM:

Chọn các thành phần theo bộ chọn, văn bản hoặc vai trò
Đọc và sửa đổi thuộc tính CSS
Kiểm tra kiểu dáng và kích thước bố cục được tính toán
Đánh giá JavaScript trong ngữ cảnh trang

Tự động hóa trình duyệt #

Tự động hóa tương tác của người dùng:

Nhấp vào nút và liên kết
Điền vào biểu mẫu và gửi dữ liệu
Điều hướng đến URL
Xử lý các hộp thoại và lời nhắc
Cuộn và tương tác với nội dung động

Kiến trúc #

Chrome DevTools MCP kết nối với trình duyệt Chrome trực tiếp thông qua Giao thức Chrome DevTools:

┌──────────────────────────────────────────────┐
│              AI Coding Agent                 │
│  (Claude Code / Cursor / Copilot / etc.)     │
└──────────────────┬───────────────────────────┘
                   │ MCP Protocol (JSON-RPC)
                   ▼
┌──────────────────────────────────────────────┐
│         chrome-devtools-mcp Server           │
│                                              │
│  ┌────────────┐ ┌──────────┐ ┌────────────┐ │
│  │ Screenshots│ │ Network  │ │ Performance│ │
│  │   Tool     │ │ Tool     │ │   Tool     │ │
│  └────────────┘ └──────────┘ └────────────┘ │
│  ┌────────────┐ ┌──────────┐ ┌────────────┐ │
│  │  Console   │ │   DOM    │ │  Actions   │ │
│  │   Tool     │ │  Tool    │ │  Tool      │ │
│  └────────────┘ └──────────┘ └────────────┘ │
└──────────────────┬───────────────────────────┘
                   │ CDP (WebSocket)
                   ▼
┌──────────────────────────────────────────────┐
│              Live Chrome Browser             │
│                                              │
│  ┌──────────────────────────────────────┐    │
│  │         Your Web Application          │    │
│  └──────────────────────────────────────┘    │
└──────────────────────────────────────────────┘

Cài đặt #

Là máy chủ MCP #

# Cài đặt máy chủ MCP
cài đặt npm -g chrome-devtools-mcp

# Khởi động máy chủ MCP
máy chủ chrome-devtools-mcp

Tác nhân mã hóa của bạn kết nối với máy chủ MCP và có quyền truy cập vào tất cả các công cụ DevTools.

Là một công cụ CLI #

# Cài đặt CLI
cài đặt npm -g chrome-devtools-mcp

# Chụp ảnh màn hình
ảnh chụp màn hình chrome-devtools-mcp --url https://example.com --output ảnh chụp màn hình.png

# Ghi lại dấu vết hiệu suất
hiệu suất chrome-devtools-mcp --url https://example.com --output trace.json

# Nhận tin nhắn trên bảng điều khiển
bảng điều khiển chrome-devtools-mcp --url https://example.com

Khởi chạy Chrome với tính năng gỡ lỗi được bật #

Để máy chủ MCP kết nối với Chrome, bạn cần khởi chạy Chrome với tính năng gỡ lỗi từ xa được bật:

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --new-window

#Linux
google-chrome --remote-debugging-port=9222 --new-window

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" ^
  --remote-debugging-port=9222

Hoặc sử dụng tính năng tự động khởi chạy của CLI:

máy chủ chrome-devtools-mcp --auto-launch-chrome

Thao tác này sẽ tự động khởi chạy một phiên bản Chrome mới với các cờ gỡ lỗi chính xác.

Tham khảo công cụ #

ảnh chụp màn hình #

Chụp ảnh màn hình của trang hiện tại hoặc một thành phần cụ thể.

# Ảnh chụp màn hình toàn trang
ảnh chụp màn hình chrome-devtools-mcp --full-page

# Ảnh chụp màn hình khung nhìn
ảnh chụp màn hình chrome-devtools-mcp --viewport

# Yếu tố cụ thể
ảnh chụp màn hình chrome-devtools-mcp --selector ".hero-section"

mạng #

Phân tích các yêu cầu và phản hồi của mạng.

# Liệt kê tất cả các yêu cầu
mạng chrome-devtools-mcp --list

# Lọc theo mã trạng thái
mạng chrome-devtools-mcp --trạng thái lọc = 404

# Kiểm tra một yêu cầu cụ thể
mạng chrome-devtools-mcp --inspect url=https://api.example.com/data

hiệu suất #

Ghi lại và phân tích dấu vết hiệu suất.

# Ghi lại dấu vết 30 giây
hiệu suất chrome-devtools-mcp --duration 30

# Phân tích các chỉ số quan trọng của trang web cốt lõi
hiệu suất chrome-devtools-mcp --cwv

# Thực thi JavaScript hồ sơ
hiệu suất chrome-devtools-mcp --cpu

bảng điều khiển ###

Đọc tin nhắn bảng điều khiển trình duyệt.

# Nhận tất cả tin nhắn
bảng điều khiển chrome-devtools-mcp --all

# Chỉ lọc lỗi
bảng điều khiển chrome-devtools-mcp --lỗi cấp độ

# Xóa bảng điều khiển
bảng điều khiển chrome-devtools-mcp --clear

nhà #

Truy vấn và thao tác DOM.

# Chọn một phần tử
chrome-devtools-mcp dom --query "button.submit"

# Đọc văn bản bên trong
chrome-devtools-mcp dom --text "#main-heading"

#Sửa đổi CSS
chrome-devtools-mcp dom --style "#hero { nền: xanh; }"

#Đánh giá JavaScript
chrome-devtools-mcp dom --eval "document.title"

hành động #

Tự động tương tác trình duyệt.

# Điều hướng đến một URL
hành động chrome-devtools-mcp --navigate https://example.com

# Bấm vào một phần tử
hành động chrome-devtools-mcp --nhấp vào "button.login"

# Điền vào biểu mẫu
hành động chrome-devtools-mcp --fill "#email" "user@example.com"
hành động chrome-devtools-mcp --điền "#password" "secret123"
hành động chrome-devtools-mcp --nhấp vào "button.submit"

Tích hợp với Tác nhân mã hóa #

Mã Claude #

# In your MCP configuration (~/.claude/settings.json)
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "chrome-devtools-mcp",
      "args": ["server"]
    }
  }
}

Claude Code giờ đây có thể sử dụng tất cả các công cụ DevTools để kiểm tra và gỡ lỗi các ứng dụng web của bạn.

Con trỏ #

Cài đặt → Tính năng → Máy chủ MCP → Thêm máy chủ
Lệnh: chrome-devtools-mcp
Đối số: máy chủ

Phi công phụ (Mã VS) #

// .vscode/mcp_servers.json
{
  "máy chủ": {
    "chrome-devtools": {
      "lệnh": "chrome-devtools-mcp",
      "args": ["máy chủ"]
    }
  }
}

Các trường hợp sử dụng trong thế giới thực #

1. Kiểm tra hồi quy trực quan #

Tác nhân mã hóa của bạn thực hiện các thay đổi CSS và xác minh chúng ngay lập tức:

Nhân viên: "Tôi đã thay đổi bán kính viền nút thành 8px. Hãy để tôi xác minh..."
→ Chụp ảnh màn hình
→ So sánh với đường cơ sở
→ Báo cáo: "Bán kính đường viền được áp dụng chính xác. Không phát hiện thấy hồi quy hình ảnh nào."

2. Tối ưu hóa hiệu suất #

Agent: "The page load time seems slow. Let me profile it..."
→ Records performance trace
→ Identifies: "LCP is 4.2s, dominated by unoptimized hero image (2.1s)"
→ Fixes: "Reduced image size and added lazy loading"
→ Verifies: "LCP improved to 1.8s"

3. Gỡ lỗi bảng điều khiển #

Nhân viên: "Người dùng đang báo cáo lỗi JavaScript. Hãy để tôi kiểm tra bảng điều khiển..."
→ Đọc tin nhắn trên bảng điều khiển
→ Tìm thấy: "Lỗi Loại chưa được bắt: Không thể đọc 'bản đồ' thuộc tính không xác định ở Dòng 42"
→ Sửa lỗi: "Đã thêm kiểm tra null trước khi gọi .map()"
→ Xác minh: "Bảng điều khiển sạch sau khi sửa"

4. Kiểm tra tích hợp API #

Nhân viên: "Hãy để tôi xác minh việc tích hợp API đang hoạt động..."
→ Kiểm tra các yêu cầu mạng
→ Tìm thấy: "POST /api/login trả về 401 — thiếu tiêu đề Ủy quyền"
→ Sửa lỗi: "Đã thêm mã thông báo mang vào tiêu đề yêu cầu"
→ Xác minh: "Đăng nhập trả về 200 với dữ liệu người dùng"

5. Tự động hóa biểu mẫu #

Agent: "Let me test the registration form end-to-end..."
→ Navigates to /register
→ Fills in name, email, password
→ Clicks submit
→ Checks for success message
→ Reports: "Registration flow works. Success message displayed."

So sánh với các lựa chọn thay thế #

Chrome DevTools MCP vs Puppeteer #

Tính năng	Chrome DevTools MCP	Người múa rối
Phương thức truy cập	Giao thức MCP (chuẩn hóa)	API Node.js
Tích hợp AI	Bản địa (được thiết kế cho đại lý)	Tích hợp thủ công
Khám phá công cụ	Tự ghi tài liệu qua MCP	Dựa trên mã
Đa tác nhân	Phiên bản trình duyệt được chia sẻ	Mỗi quá trình
Sử dụng CLI	Tích hợp	Yêu cầu trình bao bọc
Hỗ trợ trình duyệt	Chỉ Chrome/Chromium	Chỉ Chrome/Chromium

Chrome DevTools MCP được thiết kế dành riêng cho các tác nhân AI. Puppeteer là một thư viện tự động hóa trình duyệt có mục đích chung yêu cầu tích hợp thủ công để sử dụng tác nhân.

Chrome DevTools MCP vs Nhà viết kịch #

Feature	Chrome DevTools MCP	Playwright
Browser support	Chrome only	Chrome, Firefox, Safari
AI integration	Native	Manual
Protocol	MCP (JSON-RPC)	Playwright API
Setup complexity	Low (MCP config)	Moderate
Cross-browser testing	No	Yes
Mobile emulation	Limited	Full

Nhà viết kịch linh hoạt hơn khi thử nghiệm trên nhiều trình duyệt. Chrome DevTools MCP đơn giản hơn và sử dụng AI nhiều hơn để gỡ lỗi dành riêng cho Chrome.

Công cụ phát triển Chrome MCP so với Selenium #

Tính năng	Chrome DevTools MCP	Selen
Giao thức	CDP (trực tiếp)	WebDriver
Tốc độ	Nhanh hơn (giao thức trực tiếp)	Chậm hơn (chi phí WebDriver)
Tích hợp AI	Bản địa	Không có
Thiết lập	cài đặt npm	Quản lý lái xe
Kiểm tra thời gian thực	Có	Hạn chế
Phân tích hiệu suất	Tích hợp	Công cụ bên ngoài

Chrome DevTools MCP cung cấp thông tin chi tiết về trình duyệt sâu hơn Selenium. Selenium tốt hơn cho thử nghiệm E2E trên nhiều trình duyệt; Chrome DevTools MCP tốt hơn cho việc gỡ lỗi và phát triển.

Cân nhắc về bảo mật #

Tuyên bố từ chối trách nhiệm của Nhóm Chrome #

Dự án cảnh báo rõ ràng:

chrome-devtools-mcp hiển thị nội dung của phiên bản trình duyệt cho máy khách MCP, cho phép họ kiểm tra, gỡ lỗi và sửa đổi bất kỳ dữ liệu nào trong trình duyệt hoặc DevTools. Tránh chia sẻ thông tin cá nhân hoặc nhạy cảm mà bạn không muốn chia sẻ với khách hàng MCP.

Các phương pháp hay nhất #

Sử dụng hồ sơ trình duyệt chuyên dụng — Không sử dụng hồ sơ duyệt web cá nhân của bạn khi bật MCP
Tránh đăng nhập nhạy cảm — Không mở ngân hàng, email hoặc các phiên nhạy cảm khác trong trình duyệt có thể gỡ lỗi
Cách ly cổng gỡ lỗi — Chỉ liên kết với localhost (--remote-debugging-port=9222) để ngăn truy cập từ bên ngoài
Xem xét hành vi của tác nhân — Giám sát những gì tác nhân mã hóa của bạn thực hiện khi truy cập trình duyệt, đặc biệt là trong quy trình làm việc tự động

Hạn chế #

Chỉ Chrome #

chrome-devtools-mcp chính thức chỉ hỗ trợ Google Chrome và Chrome để thử nghiệm. Các trình duyệt dựa trên Chrome khác (Edge, Brave, Arc) có thể hoạt động nhưng không được đảm bảo. Firefox và Safari không được hỗ trợ.

Cần có trình duyệt trực tiếp #

Máy chủ MCP yêu cầu phiên bản trình duyệt Chrome trực tiếp có bật tính năng gỡ lỗi từ xa. Nó không thể phân tích các tệp HTML tĩnh hoặc ảnh chụp màn hình không có giao diện người dùng nếu không có trình duyệt đang chạy.

Phiên bản trình duyệt đơn #

Máy chủ MCP kết nối với một phiên bản Chrome. Để thử nghiệm trên nhiều trình duyệt (Chrome + Firefox), bạn sẽ cần các máy chủ hoặc công cụ MCP riêng biệt như Playwright.

Không đảm bảo sửa đổi trang #

Mặc dù tác nhân có thể sửa đổi DOM và CSS nhưng không có gì đảm bảo về cách trang sẽ phản hồi. Một số trang web sử dụng Shadow DOM, iframe hoặc tiêu đề CSP linh hoạt có thể hạn chế những gì tác nhân có thể thực hiện.

Ý kiến của biên tập viên #

Chrome DevTools MCP là một bước tiến đáng kể trong việc tạo ra các tác nhân mã hóa AI nhận thức trực quan. Cho đến khi công cụ này tồn tại, các tác nhân mã hóa thực sự không biết những thay đổi của họ trông như thế nào trong một trình duyệt thực. Họ có thể đọc mã nguồn HTML và CSS nhưng không thể xem kết quả được hiển thị.

Điều này giống như một nhà thiết kế con người có thể đọc các đặc tả CSS nhưng không thể nhìn vào trang web. Họ có thể viết mã hoàn hảo trên giấy, nhưng họ không có cách nào để xác minh rằng nó thực sự tạo ra kết quả trực quan như mong muốn.

Chrome DevTools MCP thay đổi điều này bằng cách cung cấp cho các tác nhân những con mắt tương đương. Thông qua ảnh chụp màn hình, họ có thể thấy bố cục. Thông qua dấu vết hiệu suất, họ có thể đo tốc độ. Thông qua kiểm tra mạng, họ có thể gỡ lỗi các vấn đề về API. Thông qua quyền truy cập bảng điều khiển, họ có thể đọc thông báo lỗi. Thông qua các truy vấn DOM, họ có thể kiểm tra cấu trúc trang.

Việc đây là một dự án Google Chrome chính thức mang lại sự tin cậy và đảm bảo bảo trì lâu dài. Giao thức Chrome DevTools là tiêu chuẩn vàng để gỡ lỗi trình duyệt và việc hiển thị nó thông qua MCP giúp mọi tác nhân mã hóa AI hỗ trợ giao thức có thể truy cập được.

Đối với các nhà phát triển web sử dụng tác nhân mã hóa AI thì đây là công cụ bắt buộc phải có. Nó đóng vòng phản hồi giữa viết mã và xem kết quả trực quan, cải thiện đáng kể khả năng của tác nhân trong việc tạo ra các ứng dụng web chính xác, bóng bẩy.

##Câu hỏi thường gặp

Hỏi: Chrome-devtools-mcp có hoạt động với Chrome không đầu không? #

Đ: Vâng. Bạn có thể khởi chạy Chrome ở chế độ không đầu (--headless=new) và chrome-devtools-mcp vẫn sẽ kết nối qua CDP. Tuy nhiên, một số tính năng như ảnh chụp màn hình có thể hoạt động khác ở chế độ không đầu.

Hỏi: Tôi có thể sử dụng tính năng này với các trình duyệt không phải Chrome không? #

Đáp: Không chính thức. Dự án hỗ trợ Google Chrome và Chrome để thử nghiệm. Các trình duyệt dựa trên Chrome khác có thể hoạt động nhưng không được đảm bảo. Firefox và Safari yêu cầu các giao thức gỡ lỗi khác nhau.

Hỏi: Điều này ảnh hưởng đến hiệu suất trình duyệt như thế nào? #

Trả lời: Việc bật gỡ lỗi từ xa có tác động tối thiểu đến hiệu suất. Trình duyệt chạy bình thường; cổng gỡ lỗi chỉ hiển thị thông tin chẩn đoán bổ sung. Mong đợi chi phí < 5% trong hầu hết các trường hợp.

Câu hỏi: Nhiều tổng đài viên có thể chia sẻ cùng một phiên bản trình duyệt không? #

Đ: Vâng. Máy chủ MCP quản lý kết nối trình duyệt và nhiều máy khách MCP có thể kết nối đồng thời. Mỗi khách hàng có phiên riêng cho các hành động như điều hướng và thao tác DOM.

Hỏi: Có cách nào để tự động hóa toàn bộ quá trình thiết lập trình duyệt không? #

Đ: Vâng. Sử dụng cờ --auto-launch-chrome khi khởi động máy chủ MCP. Thao tác này sẽ tự động khởi chạy Chrome với cờ gỡ lỗi chính xác và kết nối với máy chủ.

Hỏi: Chrome-devtools-mcp có thể chụp ảnh màn hình của các tệp cục bộ không? #

Đ: Vâng. Điều hướng đến file:///path/to/your/index.html và chụp ảnh màn hình hoặc phân tích trang. Điều này rất hữu ích để thử nghiệm các máy chủ phát triển cục bộ và các trang web tĩnh.

Thông tin khác từ Dibi8 #

Nguồn #

Đã xuất bản: ngày 07 tháng 7 năm 2026 | Cập nhật lần cuối: Ngày 07 tháng 7 năm 2026 | Sao: 46.034 | Giấy phép: Apache-2.0