Ngày xuất bản: 18 tháng 6 năm 2026
Để gỡ lỗi hiệu quả cho một ứng dụng web hiện đại, một tác nhân AI cần nhiều hơn là chỉ mã nguồn của bạn; tác nhân này cần hiểu cách ứng dụng hoạt động trong thời gian chạy.
Chúng tôi rất vui mừng ra mắt các công cụ dành cho nhà phát triển bên thứ ba cho các tác nhân trong Chrome DevTools. Giờ đây, các ứng dụng và khung của bạn có thể cho tác nhân AI xem trực tiếp trạng thái nội bộ của chúng. Điều này giúp các tác nhân kết nối các điểm giữa những gì đang diễn ra trên màn hình và logic chạy ở chế độ nền.
Mục tiêu: Không chỉ phân tích tĩnh
Quá trình phát triển web hiện đại được xây dựng dựa trên các lớp trừu tượng – các khung như Angular, React hoặc Vue; các nền tảng CMS như WordPress hoặc Shopify; và các thư viện cho CSS, đồ hoạ 3D hoặc ảnh động. Mặc dù Công cụ cho nhà phát triển có quyền truy cập trực tiếp vào DOM được kết xuất cuối cùng, nhưng "sự thật" của một ứng dụng thường nằm trong trạng thái nội bộ của khung: hệ phân cấp thành phần, tín hiệu JavaScript hoặc trạng thái phụ trợ.
Mục tiêu của chúng tôi với các công cụ dành cho nhà phát triển bên thứ ba là cung cấp một đường dẫn để mọi thư viện chia sẻ ngữ cảnh phong phú, có thể thực hiện được này với các tác nhân AI. Bằng cách đó, điều này cho phép các tác nhân gỡ lỗi các vấn đề mà trước đây họ "không nhìn thấy", ví dụ:
- Hệ phân cấp thành phần: Trực tiếp ánh xạ một phần tử DOM trên trang với thành phần khung và trạng thái nội bộ tương ứng.
- Kiểm tra trạng thái nội bộ: Truy cập trực tiếp vào trạng thái phía máy chủ hoặc nội dung cơ sở dữ liệu trong phiên gỡ lỗi.
Cách hoạt động: Discovery API
Các công cụ dành cho nhà phát triển bên thứ ba sử dụng API JavaScript dựa trên sự kiện. Máy chủ MCP của Công cụ cho nhà phát triển Chrome phát hiện các công cụ này bằng cách gửi sự kiện devtoolstooldiscovery trên đối tượng window chung. Sự kiện devtoolstooldiscovery sẽ tự động được gửi trên mọi thao tác điều hướng trang hoặc nếu trang đã chọn bị thay đổi và có thể được gửi một cách rõ ràng bằng công cụ MCP list_3p_developer_tools.
Triển khai các công cụ của riêng bạn
Để hiển thị các công cụ từ thư viện hoặc ứng dụng của bạn, bạn cần theo dõi sự kiện phát hiện này và phản hồi bằng ToolGroup.
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: "My Library Tools",
description: "Tools for inspecting internal library state",
tools: [
{
name: "getInternalState",
description: "Returns the current internal state of the framework.",
inputSchema: {
type: "object",
properties: {
componentId: { type: "string" }
}
},
execute: async (input) => {
// Access your framework's internal registry
return myFramework.getState(input.componentId);
}
}
]
});
});
Cách triển khai như sau:
- Xác định giản đồ: Sử dụng Giản đồ JSON để xác định dữ liệu đầu vào mà công cụ của bạn mong đợi.
- Xử lý logic: Triển khai hàm
executechạy trong ngữ cảnh của trang và trả về dữ liệu có thể tuần tự hoá. - Phần tử DOM: Không thể gửi các đối tượng không tuần tự hoá giữa trang và Công cụ cho nhà phát triển cho các tác nhân. Phần tử DOM là một ngoại lệ. Khi các công cụ của bạn
trả về các phần tử DOM, Công cụ cho nhà phát triển cho các tác nhân sẽ tự động ánh xạ chúng với cùng một
UID mà công cụ
take_snapshotsử dụng. Điều này cho phép tác nhân của bạn tương tác với tất cả các phần tử trên trang (cho dù chúng đến từ một khung hay từ ảnh chụp nhanh trang) theo cùng một cách.
Tương tác với các công cụ bằng MCP
Sau khi bạn đăng ký các công cụ, tác nhân mã hoá có thể tương tác với chúng thông qua Công cụ cho nhà phát triển cho các tác nhân. Công cụ MCP list_3p_developer_tools trả về nội dung mô tả về các công cụ bên thứ ba có trên trang. Ngoài ra, khi trang đã chọn thay đổi (ví dụ: sau khi điều hướng), ứng dụng Công cụ cho nhà phát triển sẽ thêm danh sách các công cụ có sẵn vào phản hồi của công cụ MCP.
Để sử dụng các công cụ này, tác nhân của bạn sẽ gọi execute_3p_developer_tool. Công cụ cho nhà phát triển sẽ tự động xác thực các tham số đầu vào để đảm bảo chúng khớp với định nghĩa của công cụ.
Bạn cũng có thể gọi các công cụ bằng công cụ MCP evaluate_script. Tác nhân của bạn cung cấp một đoạn mã JavaScript mà Công cụ cho nhà phát triển thực thi trên trang. Đoạn mã này có thể gọi các công cụ dành cho nhà phát triển bên thứ ba và sử dụng ngay đầu ra của chúng để tính toán thêm.
Việc sử dụng evaluate_script sẽ hiệu quả cho việc gỡ lỗi phức tạp vì nó cho phép các tác nhân:
- Soạn các thao tác: Kết hợp nhiều bước thành một lần thực thi.
- Xử lý các giá trị không tuần tự hoá: Xử lý các đối tượng hoặc tín hiệu dành riêng cho khung trực tiếp trong ngữ cảnh của trang.
- Tối ưu hoá hiệu suất: Giảm thiểu chi phí tuần tự hoá và tránh nhiều chuyến khứ hồi giữa tác nhân và trình duyệt.
Thành công ban đầu: Tích hợp Angular
Chúng tôi đã hợp tác với nhóm Angular, những người đã triển khai 2 công cụ dành cho nhà phát triển bên thứ ba:
- Công cụ Biểu đồ tín hiệu: Cho phép các tác nhân hình dung mối quan hệ giữa trạng thái và chế độ xem, giúp họ xác định các phần phụ thuộc gây ra vòng lặp vô hạn hoặc cập nhật không thành công.
- Công cụ Biểu đồ chèn phần phụ thuộc (DI): Hiển thị các trình chèn phần tử, cho phép các tác nhân xem chính xác vị trí cung cấp dịch vụ hoặc vị trí thiếu dịch vụ. Vì biểu đồ DI của Angular chỉ là một cấu trúc trong thời gian chạy, nên chỉ phân tích tĩnh không thể gỡ lỗi các lỗi của nhà cung cấp.
Nhóm React cũng đã bắt đầu thử nghiệm các công cụ dành cho nhà phát triển bên thứ ba.
Cùng chúng tôi xây dựng tương lai của việc gỡ lỗi bằng tác nhân
Tính năng thử nghiệm này có trong Chrome DevTools cho các tác nhân bắt đầu từ phiên bản 0.25.0. Để bật tính năng này, hãy sử dụng cờ dòng lệnh --categoryExperimentalThirdParty.
Nếu bạn duy trì một khung, thư viện hoặc công cụ và muốn cải thiện trải nghiệm gỡ lỗi cho các tác nhân mã hoá, chúng tôi rất mong được hợp tác:
- Khám phá tài liệu: Hướng dẫn kỹ thuật trên GitHub.
- Liên hệ: Chúng tôi đang tìm kiếm các đối tác để lặp lại các API này và giúp xác định tương lai của việc gỡ lỗi web bằng AI. Bạn có thể tạo một vấn đề trong kho lưu trữ GitHub để liên hệ.
Hãy cùng chúng tôi xây dựng tương lai của quá trình phát triển web bằng tác nhân!