Khóa học
Tìm hiểu kỹ thuật viết lệnh (Prompt Engineering)
1 giờ
240.6K
Để hiểu sâu hơn về tác nhân AI và cách các công cụ như Chrome DevTools MCP phù hợp trong bức tranh tổng thể, hãy khám phá khóa học Introduction to AI Agents của DataCamp hoặc lộ trình kỹ năng AI Agent Fundamentals.
Chrome DevTools MCP là máy chủ Model Context Protocol (MCP) chính thức từ đội Chrome DevTools, cho phép trợ lý lập trình AI điều khiển Chrome bằng ngôn ngữ tự nhiên. Thay vì viết script, bạn chỉ cần nói với trợ lý AI điều bạn muốn (“đi tới trang này và kiểm tra lỗi trong console” hoặc “điền vào biểu mẫu này và chụp ảnh màn hình”), và nó sẽ xử lý các chi tiết kỹ thuật.
Máy chủ cung cấp cho bạn quyền truy cập vào các công cụ mạnh mẽ để tự động hóa trình duyệt và gỡ lỗi. Nó được xây dựng trên Puppeteer, nên đáng tin cậy và chạy hoàn toàn trên máy của bạn. Bạn không phải viết bất kỳ dòng mã Puppeteer nào.
Trong hướng dẫn này, bạn sẽ học cách sử dụng máy chủ MCP này với các trợ lý lập trình AI như Claude, Cursor và Cline. Chúng tôi sẽ đề cập đến cài đặt và cấu hình, sau đó chuyển sang các khả năng cốt lõi: tự động hóa trình duyệt, gỡ lỗi và kiểm tra. Xuyên suốt bài viết, chúng tôi sẽ sử dụng Conduit (demo.realworld.io), một nền tảng blog kiểu Medium, để minh họa các ví dụ thực tế.
Nếu bạn còn mới với Model Context Protocol, tôi khuyên bạn nên xem hướng dẫn MCP toàn diện này để tìm hiểu sâu về cách MCP kết nối các mô hình AI với công cụ bên ngoài. Bạn cũng có thể xem hướng dẫn Claude for Chrome và bài viết về các trình duyệt AI tốt nhất. Để tham khảo một cách tiếp cận khác cho tự động hóa trình duyệt bằng AI, hãy đọc hướng dẫn ChatGPT Atlas.
Tóm tắt nhanh (TL;DR)
-
Chrome DevTools MCP là máy chủ MCP chính thức cho phép trợ lý lập trình AI điều khiển Chrome bằng ngôn ngữ tự nhiên
-
Nó cung cấp 26 công cụ thuộc 6 nhóm: tự động hóa nhập liệu, điều hướng, gỡ lỗi, mạng, hiệu năng và giả lập
-
Cài đặt với
claude mcp add chrome-devtools npx chrome-devtools-mcp@latestcho Claude Code (các client khác có thiết lập tương tự) -
Tự động hóa các tác vụ trình duyệt như điều hướng, điền biểu mẫu và chụp ảnh màn hình mà không cần viết script Puppeteer
-
Gỡ lỗi ứng dụng web bằng cách kiểm tra lỗi trong console, yêu cầu mạng và chạy JavaScript—tất cả thông qua hội thoại
-
Xây dựng frontend theo từng bước bằng cách để AI chụp ảnh màn hình để tự xác minh công việc của mình ở mỗi bước
Chrome DevTools MCP là gì?
Kiến trúc hoạt động bên dưới như sau.
Máy chủ cung cấp 26 công cụ được tổ chức theo 6 nhóm:
- Tự động hóa nhập liệu (7 công cụ): click, drag, fill, fill_form, handle_dialog, hover, upload_file
- Điều hướng (7 công cụ): navigate_page, new_page, list_pages, select_page, close_page, navigate_page_history, wait_for
- Gỡ lỗi (4 công cụ): evaluate_script, list_console_messages, take_screenshot, take_snapshot
- Mạng (2 công cụ): list_network_requests, get_network_request
- Hiệu năng (3 công cụ): performance_start_trace, performance_stop_trace, performance_analyze_insight
- Giả lập (3 công cụ): emulate_cpu, emulate_network, resize_page
Tự động hóa trình duyệt trở nên mang tính hội thoại. Thay vì viết script Puppeteer và gỡ lỗi bộ chọn CSS, bạn mô tả điều mình muốn bằng ngôn ngữ tự nhiên. Trợ lý AI sẽ tìm ra chi tiết kỹ thuật.
Chrome DevTools MCP so với cách làm truyền thống
| Tính năng | Chrome DevTools MCP | DevTools thủ công | Script Puppeteer |
|---|---|---|---|
| Giao diện | Ngôn ngữ tự nhiên | GUI (trỏ và nhấp) | Mã JavaScript |
| Thời gian thiết lập | Một lệnh | Không (tích hợp sẵn trong Chrome) | Thiết lập dự án + phụ thuộc |
| Tích hợp AI | Gốc (giao thức MCP) | Không | Không (phải tự phân tích đầu ra) |
| Tự động hóa | Hội thoại, lặp dần | Chỉ thủ công | Viết script đầy đủ |
| Gỡ lỗi | AI diễn giải lỗi cho bạn | Kiểm tra thủ công | Console output + assertions |
| Độ khó học | Thấp (mô tả điều bạn muốn) | Trung bình (học UI DevTools) | Cao (học API Puppeteer) |
| Khả năng tái lập | Dựa trên phiên | Không tái lập | Script tái lập hoàn toàn |
Với các công cụ này, trợ lý AI có thể giúp bạn:
- Xây dựng frontend theo từng vòng lặp bằng cách cho tác nhân chụp ảnh màn hình ở mỗi bước
- Kiểm thử luồng người dùng end-to-end, như đăng ký, điều hướng qua các tính năng và xác minh từng bước hoạt động
- Gỡ lỗi bằng cách kiểm tra lỗi console và yêu cầu mạng mà không cần tự mở DevTools
- Tự động hóa tài liệu trực quan bằng cách chụp ảnh màn hình các trang hoặc trạng thái ứng dụng khác nhau
- Trích xuất dữ liệu từ trang web bằng cách chạy JavaScript trực tiếp trong ngữ cảnh trang
Tất cả đều được kích hoạt qua lệnh ngôn ngữ tự nhiên thay vì viết script Puppeteer.
Chrome DevTools MCP hoạt động với Claude Desktop, Cursor, Cline và VSCode Copilot. Vì đây là một máy chủ MCP trong số nhiều máy chủ khác, bạn có thể kết hợp với các máy chủ khác—như truy cập hệ thống tệp, công cụ cơ sở dữ liệu và API—để xây dựng quy trình làm việc trải rộng trên nhiều công cụ.
Cài đặt và Thiết lập Chrome DevTools MCP
Bạn sẽ cần vài thứ:
- Đã cài đặt Node.js và npm trên máy của bạn
- Một trợ lý lập trình AI tương thích MCP (chúng tôi sẽ dùng Claude Code trong hướng dẫn này)
- Trình duyệt Chrome (Puppeteer xử lý tự động, bạn không cần cấu hình gì)
Hiểu biết cơ bản về DevTools của trình duyệt sẽ hữu ích, nhưng không bắt buộc.
Cài đặt Chrome DevTools MCP
Chrome DevTools MCP chạy thông qua cấu hình MCP của trợ lý AI của bạn. Thiết lập hơi khác nhau tùy trợ lý lập trình AI bạn dùng. Chúng tôi sẽ hướng dẫn cách cài đặt cho Claude Code, nhưng các trình chỉnh sửa khác như Cursor, Cline và VSCode Copilot có cách tiếp cận tương tự.
Với Claude Code, chạy lệnh này trong terminal:
claude mcp add chrome-devtools npx chrome-devtools-mcp@latestLệnh này đăng ký máy chủ Chrome DevTools MCP với Claude Code. Máy chủ chạy qua npx, tải xuống và thực thi gói mà không cần cài đặt vĩnh viễn. @latest đảm bảo bạn nhận được phiên bản hiện tại.
Sau khi chạy lệnh, hãy khởi động lại Claude Code để nạp máy chủ mới.
Nếu bạn dùng trợ lý lập trình AI khác
Các client MCP khác có phương thức cài đặt tương tự—một số dùng lệnh, số khác dùng tệp cấu hình, hoặc nút cài đặt một chạm. Hãy xem trang GitHub Chrome DevTools MCP để biết hướng dẫn cụ thể cho Cursor, Cline, Gemini CLI, Windsurf và các client được hỗ trợ khác.
Kiểm tra thiết lập
Hãy xác minh mọi thứ hoạt động bằng một lệnh đơn giản:
Navigate to demo.realworld.io and take a screenshotBạn sẽ thấy:
- Chrome khởi chạy (bạn sẽ thấy cửa sổ trình duyệt trừ khi bạn cấu hình chế độ headless)
- Trang chủ Conduit được tải
- Trợ lý AI của bạn chụp và hiển thị ảnh màn hình
Nếu có trục trặc, hãy kiểm tra các vấn đề phổ biến này:
- Phiên bản Node.js: Chrome DevTools MCP yêu cầu Node.js v20.19 trở lên
- Quyền npm: Đảm bảo npm có thể cài đặt gói
- Cần khởi động lại: Trợ lý AI của bạn cần khởi động lại sau khi thay đổi cấu hình
- Vị trí tệp cấu hình: Xác minh bạn đã chỉnh sửa đúng tệp cài đặt MCP của trợ lý
Những điều cơ bản về tự động hóa trình duyệt
Chrome DevTools MCP cung cấp sáu công cụ cốt lõi để tương tác với trang web. Dùng navigate_page để tải URL, click để tương tác với phần tử, fill và fill_form để nhập văn bản, hover để kích hoạt hiệu ứng hover, và take_screenshot để chụp những gì bạn thấy. Những công cụ này bao phủ phần lớn các tác vụ tự động hóa trình duyệt bạn sẽ gặp.
Điều hướng và chụp ảnh màn hình
Hãy tải một trang. Nói với trợ lý AI của bạn:
Navigate to demo.realworld.ioAI sử dụng công cụ navigate_page, Chrome mở ra và trang chủ Conduit được tải. Bạn sẽ thấy cửa sổ trình duyệt trừ khi bạn đã cấu hình chế độ headless.
Để ghi lại những gì bạn thấy, chỉ cần yêu cầu:
Take a screenshot of the homepageAI chụp trang hiện tại bằng take_screenshot và hiển thị kết quả cho bạn. Điều này hữu ích cho tài liệu trực quan hoặc xác minh trang hiển thị đúng.
Tương tác với phần tử
Bạn có thể tương tác với bất kỳ phần tử nào trên trang mà không cần viết bộ chọn CSS hay kiểm tra ID phần tử. Chỉ cần mô tả điều bạn muốn:
Click the Sign in linkAI xác định phần tử bạn đề cập và nhấp vào đó bằng công cụ click. Trang đăng nhập được tải.
Bạn cũng có thể hover qua các phần tử:
Hover over the Sign up linkAI sử dụng công cụ hover. Nếu có tooltip hoặc menu thả xuống, nó sẽ xuất hiện.
Điền biểu mẫu
Biểu mẫu là nơi tự động hóa trình duyệt trở nên tẻ nhạt nếu bạn phải viết script. Với Chrome DevTools MCP, bạn chỉ cần mô tả những gì cần điền.
Fill one field at a time:
Fill in the email field with test@example.com
Fill in the password field with testpass123
Or fill multiple fields at once:
Fill out the sign-in form with email test@example.com and password testpass123AI dùng fill_form để xử lý tất cả các trường trong một lần. Đây là biểu mẫu sau khi điền:
AI xác định đúng các trường nhập dựa trên mô tả của bạn. Bạn không phải động vào HTML.
Gỡ lỗi và kiểm tra
Chrome DevTools MCP cung cấp ba công cụ cốt lõi để gỡ lỗi: list_console_messages để xem đầu ra console, list_network_requests để xem hoạt động mạng, và evaluate_script để chạy JavaScript và trích xuất dữ liệu từ trang.
Khi dùng các công cụ này thông qua trợ lý AI, bạn đang trò chuyện. Bạn hỏi bằng ngôn ngữ tự nhiên, và AI dịch thành các lệnh gọi công cụ MCP phía sau.
Trông sẽ như thế này:
Trợ lý AI hiểu ý định của bạn và thực thi các công cụ Chrome DevTools phù hợp, rồi trình bày kết quả theo cách dễ đọc. Hãy xem chúng hoạt động thực tế ra sao.
Kiểm tra console
Lỗi console thường là nơi đầu tiên cần xem khi có sự cố. Thay vì tự mở DevTools, chỉ cần yêu cầu trợ lý AI của bạn:
Navigate to demo.realworld.io and check the console for any errorsAI tải trang và kiểm tra console bằng list_console_messages. Đây là những gì nó tìm thấy:
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/articles'
from origin 'https://demo.realworld.io' has been blocked by CORS policy
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/tags'
from origin 'https://demo.realworld.io' has been blocked by CORS policyCác lỗi CORS (Cross-Origin Resource Sharing)—là một cơ chế bảo mật của trình duyệt giới hạn trang web gửi yêu cầu đến miền khác—giải thích vì sao trang hiển thị “Loading articles…” và “Loading tags…” thay vì nội dung thực:
Bạn có thể đi sâu hơn bằng cách yêu cầu AI lọc và diễn giải các thông điệp này:
Are there any errors or warnings on this page?AI phân tích đầu ra console và cho bạn biết: “Có, có hai lỗi CORS chặn yêu cầu API cho bài viết và thẻ.”
Điều này cho bạn cái nhìn tức thì về nguyên nhân sự cố mà không cần tự mở bảng console của DevTools.
Tổng quan yêu cầu mạng
Lỗi console thường ám chỉ vấn đề mạng. Để hiểu thực sự điều gì đang xảy ra với các yêu cầu, hãy kiểm tra hoạt động mạng:
Show me what network requests are made on the homepageAI sử dụng list_network_requests và trả về danh sách tất cả yêu cầu. Bạn sẽ thấy các yêu cầu thành công (CSS, phông chữ, tệp JavaScript) và những yêu cầu thất bại:
https://demo.realworld.io/ GET [success - 200]
https://demo.realworld.io/main.css GET [success - 200]
https://demo.realworld.io/main.js GET [success - 200]
https://conduit.productionready.io/api/tags GET [failed - 307]
https://conduit.productionready.io/api/articles?limit=10&offset=0 GET [failed - 307]
https://api.realworld.io/api/tags GET [failed - net::ERR_FAILED]
https://api.realworld.io/api/articles?limit=10&offset=0 GET [failed - net::ERR_FAILED]Hỏi tiếp để đào sâu hơn:
Are there any failed requests?AI lọc danh sách và chỉ ra vấn đề: “Có, bốn yêu cầu API thất bại. Hai yêu cầu trả về chuyển hướng 307, và hai yêu cầu thất bại hoàn toàn với lỗi ERR_FAILED.”
Điều này giúp bạn phát hiện vấn đề nhanh mà không cần tự tay xem tab Network.
Đánh giá JavaScript và Trích xuất Dữ liệu
Ngoài việc xem console và dữ liệu mạng, bạn có thể chạy mã trực tiếp trên trang để kiểm tra trạng thái hoặc trích xuất thông tin. Dùng evaluate_script cho việc này:
Check if any articles are displayed on the homepageAI chạy JavaScript để đếm các phần tử bài viết:
const articles = document.querySelectorAll('.article-preview');
return articles.length;Kết quả: “Có 0 bài viết được hiển thị. Trang cho thấy ‘Loading articles…’ cho thấy các lỗi API đang ngăn nội dung tải.”
Bạn cũng có thể trích xuất dữ liệu phức tạp hơn:
Get the page title and main heading textAI đánh giá:
return {
pageTitle: document.title,
mainHeading: document.querySelector('h1')?.textContent
};Kết quả: {pageTitle: "Home — Conduit", mainHeading: "conduit"}
Điều này cho phép bạn xác minh nội dung trang, trích xuất dữ liệu có cấu trúc, hoặc kiểm tra các phần tử động đã tải đúng chưa. Công cụ take_screenshot và take_snapshot bổ trợ bằng cách ghi lại tài liệu trực quan và cấu trúc khi cần.
Ba khả năng gỡ lỗi này phối hợp tự nhiên. Bắt đầu với thông điệp console để phát hiện lỗi, kiểm tra yêu cầu mạng để hiểu điều gì thất bại, rồi dùng đánh giá JavaScript để xác minh các lỗi đó ảnh hưởng đến trang ra sao—tất cả thông qua hội thoại với trợ lý AI—không cần chuyển đổi công cụ hay viết script kiểm tra.
Xây dựng giao diện website bằng Chrome DevTools MCP
Trợ lý AI có thể xây dựng giao diện web, nhưng chúng không tự nhìn thấy những gì mình tạo ra. Bạn sẽ phải tự chụp ảnh màn hình và yêu cầu chỉnh sửa.
Chrome DevTools MCP thay đổi điều đó. AI tự chụp ảnh màn hình, xác minh bố cục và lặp lại cho đến khi mọi thứ đúng ý.
Hãy xây dựng một bản sao ChatGPT bằng Streamlit. Bạn sẽ cần khóa API OpenAI cho việc này. Cung cấp cho trợ lý AI khi chạy prompt để nó có thể xác minh ứng dụng hoạt động đúng. Đây là prompt:
Build a ChatGPT clone using Streamlit. Create a clean chat interface
with message history, text input, and OpenAI API integration. Include
a sidebar for API key management and chat management features (Clear
Chat, New Chat, message counter). Use Chrome DevTools MCP to verify
the UI at each step.AI tạo ứng dụng với một sidebar và chụp ảnh màn hình để xác minh bố cục ban đầu:
Sidebar bao gồm nhập khóa API, nút Clear Chat và New Chat, cùng bộ đếm tin nhắn ở mức 0. Khi giao diện đã sẵn sàng, hãy kiểm tra chức năng chat.
Kiểm thử bằng một câu hỏi đơn giản:
Chat phản hồi đúng, và bộ đếm hiển thị hai tin nhắn (trong ảnh tiếp theo). Nhưng liệu nó xử lý được hội thoại nhiều lượt?
Kiểm thử ngữ cảnh hội thoại:
AI ghi nhớ trao đổi trước đó. Tiếp theo, chúng ta cần xác minh tính năng Clear Chat.
Nhấp nút Clear Chat:
Chat được xóa thành công, và bộ đếm đặt lại về 0.
Bắt đầu cuộc trò chuyện mới:
Hoàn hảo. AI đã xây dựng một bản sao ChatGPT hoạt động, xác minh giao diện ở mỗi bước và kiểm thử mọi tính năng mà không cần con người can thiệp.
Điều này hoạt động với mọi framework. React, Vue, Svelte, HTML thuần. AI xác minh bố cục, kiểm thử tương tác và bắt lỗi trước khi bạn xem mã.
Kết luận và Bước tiếp theo
Chrome DevTools MCP mang đến tự động hóa trình duyệt thông qua hội thoại. Bạn mô tả điều mình muốn, và trợ lý AI xử lý chi tiết kỹ thuật. Không cần viết script, không cần gỡ lỗi selector.
Xuyên suốt bài viết, chúng tôi đã đề cập những điều cơ bản: cài đặt máy chủ, điều hướng trang, điền biểu mẫu, nhấp phần tử và chụp ảnh màn hình. Sau đó chuyển qua gỡ lỗi với kiểm tra console, giám sát mạng và đánh giá JavaScript. Cuối cùng, chúng ta thấy cách các công cụ này phối hợp để xây dựng frontend nơi AI có thể “nhìn thấy” sản phẩm của mình.
Nên thử gì tiếp theo
Bắt đầu bằng cách điều hướng tới một trang bạn đang làm và yêu cầu AI kiểm tra lỗi console hoặc kiểm tra yêu cầu mạng. Nếu bạn dùng Claude Code, hướng dẫn thực hành tốt nhất cho Claude Code nêu các mẫu nhắc hiệu quả khi dùng công cụ. Chụp ảnh màn hình các trạng thái khác nhau. Kiểm thử gửi biểu mẫu.
Sau đó kết hợp nhiều công cụ: điều hướng đến một trang, điền một biểu mẫu, gửi đi và chụp kết quả. Kiểm tra thông điệp console, liệt kê các yêu cầu mạng thất bại và chạy JavaScript để xác minh trạng thái trang.
Khi đã quen với cơ bản, hãy tạo một thành phần UI nhỏ cùng AI và để nó xác minh bố cục ở mỗi bước. Quan sát cách nó phát hiện vấn đề trực quan trước khi bạn tự kiểm tra.
Đối với công việc hiệu năng, dùng các công cụ hiệu năng (performance_start_trace, performance_stop_trace, performance_analyze_insight) để phân tích thời gian tải trang và xác định nút thắt cổ chai. Dùng công cụ giả lập (emulate_cpu, emulate_network, resize_page) để kiểm thử trong các điều kiện khác nhau.
Chrome DevTools MCP là một máy chủ trong số nhiều máy chủ. Hãy kết hợp với máy chủ hệ thống tệp, công cụ cơ sở dữ liệu hoặc tích hợp API để xây dựng quy trình làm việc trải rộng trên nhiều hệ thống. Để xem thêm ví dụ MCP, hãy xem hướng dẫn Codex CLI MCP và hướng dẫn Google ADK MCP.
Nếu bạn muốn tự xây dựng máy chủ MCP, hãy xem Building an MCP Server and Client with FastMCP 2.0.
