Ngày xuất bản: 23 tháng 9 năm 2025
Hôm nay, chúng tôi ra mắt bản dùng thử công khai cho máy chủ Giao thức ngữ cảnh mô hình (MCP) mới của Công cụ của Chrome cho nhà phát triển, mang sức mạnh của Công cụ của Chrome cho nhà phát triển đến các trợ lý viết mã AI.
Các tác nhân viết mã gặp phải một vấn đề cơ bản: họ không thể biết mã mà họ tạo thực sự làm gì khi chạy trong trình duyệt. Họ đang lập trình mà không nhìn thấy gì.
Máy chủ MCP của Công cụ cho nhà phát triển Chrome sẽ thay đổi điều này. Trợ lý lập trình AI có thể gỡ lỗi các trang web ngay trong Chrome, đồng thời tận dụng các chức năng gỡ lỗi và thông tin chi tiết về hiệu suất của DevTools. Điều này giúp cải thiện độ chính xác khi xác định và khắc phục vấn đề.
Hãy tự mình xem cách hoạt động của tính năng này:
Giao thức ngữ cảnh mô hình (MCP) là gì?
Giao thức ngữ cảnh mô hình (MCP) là một tiêu chuẩn nguồn mở để kết nối các mô hình ngôn ngữ lớn (LLM) với các công cụ và nguồn dữ liệu bên ngoài. Máy chủ MCP của Công cụ cho nhà phát triển của Chrome sẽ thêm các chức năng gỡ lỗi vào tác nhân AI của bạn.
Ví dụ: máy chủ MCP của Công cụ của Chrome cho nhà phát triển cung cấp một công cụ có tên là performance_start_trace. Khi được giao nhiệm vụ điều tra hiệu suất của trang web, LLM có thể sử dụng công cụ này để khởi động Chrome, mở trang web của bạn và sử dụng Công cụ cho nhà phát triển của Chrome để ghi lại dấu vết hiệu suất. Sau đó, LLM có thể phân tích dấu vết hiệu suất để đề xuất những điểm cải thiện tiềm năng. Bằng cách sử dụng giao thức MCP, máy chủ MCP của Chrome DevTools có thể mang đến các khả năng gỡ lỗi mới cho tác nhân mã hoá của bạn để giúp tác nhân này xây dựng trang web hiệu quả hơn.
Nếu bạn muốn tìm hiểu thêm về cách hoạt động của MCP, hãy xem tài liệu về MCP.
Bạn có thể dùng tính năng này để làm gì?
Sau đây là một số câu lệnh ví dụ mà bạn có thể thử trong trợ lý AI mà bạn chọn, chẳng hạn như Gemini CLI.
Xác minh các thay đổi về mã theo thời gian thực
Tạo một bản sửa lỗi bằng tác nhân AI, sau đó tự động xác minh rằng giải pháp hoạt động như dự kiến bằng MCP của Chrome DevTools.
Câu lệnh bạn có thể thử:
Verify in the browser that your change works as expected.
Chẩn đoán lỗi mạng và lỗi bảng điều khiển
Cho phép tác nhân của bạn phân tích các yêu cầu mạng để phát hiện các vấn đề về CORS hoặc kiểm tra nhật ký bảng điều khiển để tìm hiểu lý do một tính năng không hoạt động như mong đợi.
Câu lệnh bạn có thể thử:
A few images on localhost:8080 are not loading. What's happening?
Mô phỏng hành vi của người dùng
Di chuyển, điền vào biểu mẫu và nhấp vào các nút để tái hiện lỗi và kiểm thử các quy trình phức tạp của người dùng – tất cả đều diễn ra trong khi kiểm tra môi trường thời gian chạy.
Câu lệnh bạn có thể thử:
Why does submitting the form fail after entering an email address?
Gỡ lỗi các vấn đề về bố cục và kiểu trực tiếp
Yêu cầu tác nhân AI kết nối với một trang đang hoạt động, kiểm tra DOM và CSS, đồng thời đưa ra các đề xuất cụ thể để khắc phục các vấn đề phức tạp về bố cục (chẳng hạn như các phần tử tràn) dựa trên dữ liệu trực tiếp từ trình duyệt.
Câu lệnh bạn có thể thử:
The page on localhost:8080 looks strange and off. Check what's happening there.
Tự động hoá quy trình kiểm tra hiệu suất
Hướng dẫn cho tác nhân AI chạy một dấu vết hiệu suất, phân tích kết quả và điều tra các vấn đề cụ thể về hiệu suất, chẳng hạn như chỉ số LCP cao.
Câu lệnh bạn có thể thử:
Localhost:8080 is loading slowly. Make it load faster.
Hãy xem tài liệu tham khảo về công cụ của chúng tôi để biết danh sách tất cả các công cụ hiện có.
Bắt đầu
Để thử tính năng này, hãy thêm mục cấu hình sau vào ứng dụng MCP của bạn:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Để kiểm tra xem có hoạt động hay không, hãy chạy câu lệnh sau trong tác nhân lập trình:
Please check the LCP of web.dev.
Để biết thêm thông tin chi tiết, hãy xem tài liệu MCP của Công cụ của Chrome cho nhà phát triển trên GitHub.
Tham gia
Chúng tôi đang xây dựng MCP của Chrome DevTools theo từng bước, bắt đầu từ phiên bản xem trước công khai mà chúng tôi phát hành hôm nay. Chúng tôi đang tích cực thu thập ý kiến phản hồi của bạn và cộng đồng về những tính năng mà chúng tôi nên thêm tiếp theo. Cho dù bạn là nhà phát triển sử dụng trợ lý lập trình AI hay là nhà cung cấp đang xây dựng thế hệ tiếp theo của các công cụ phát triển AI, thông tin chi tiết của bạn sẽ vô cùng quý giá. Nếu có nội dung bị thiếu hoặc không hoạt động, vui lòng báo cáo vấn đề trên GitHub.