Khai thác thông tin chi tiết về thời gian chạy: Ra mắt công cụ dành cho nhà phát triển bên thứ ba cho Chrome DevTools cho các tác nhân

Wolfgang Beyer
Wolfgang Beyer
X GitHub

Xuất bản: Ngày 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 thứ hơn là chỉ mã nguồn của bạn; tác nhân đó 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 Chrome DevTools dành cho các tác nhân. Giờ đây, các ứng dụng và khung của bạn có thể cho phép các 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 nhân viên hỗ trợ 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: Vượt xa phân tích tĩnh

Hoạt động phát triển web hiện đại được xây dựng dựa trên các trừu tượng hoá – 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ù DevTools 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ệ thống 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 khi sử dụng 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 đều có thể chia sẻ ngữ cảnh phong phú, có thể hành động này với các tác nhân AI. Bằng cách này, các nhân viên hỗ trợ có thể gỡ lỗi cho những vấn đề mà trước đây họ không thấy được, chẳng hạn như:

  • Hệ thống phân cấp thành phần: Ánh xạ trực tiếp 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 một API JavaScript dựa trên sự kiện. Máy chủ MCP của Chrome DevTools phát hiện các công cụ này bằng cách gửi một sự kiện devtoolstooldiscovery trên đối tượng window chung. Sự kiện devtoolstooldiscovery sẽ tự động được gửi trong mỗi lần đ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ụ list_3p_developer_tools MCP.

Triển khai các công cụ của riêng bạn

Để hiển thị các công cụ trong thư viện hoặc ứng dụng, bạn cần theo dõi sự kiện khám phá này và phản hồi bằng một 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:

  1. 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.
  2. Xử lý logic: Triển khai một hàm execute chạy trong ngữ cảnh của trang và trả về dữ liệu có thể chuyển đổi tuần tự.
  3. 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. Các phần tử DOM là một trường hợp ngoại lệ. Khi các công cụ của bạn trả về các phần tử DOM, DevTools cho các tác nhân sẽ tự động liên kết các phần tử đó với cùng một UID mà công cụ take_snapshot sử 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 lập trình của bạn có thể tương tác với các công cụ đó thông qua Công cụ cho nhà phát triển cho tác nhân. Công cụ list_3p_developer_tools MCP trả về nội dung mô tả về các công cụ của 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. DevTools 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ụ evaluate_script MCP. 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 các công cụ đó để tính toán thêm.

Việc sử dụng evaluate_script rất hiệu quả cho việc gỡ lỗi phức tạp vì cho phép các tác nhân:

  • Thao tác tạo: Kết hợp nhiều bước thành một lần thực thi duy nhất.
  • Xử lý các giá trị không thể chuyển đổi tuần tự: 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 trang.
  • Tối ưu hoá hiệu suất: Giảm thiểu chi phí chung của quá trình chuyển đổi tuần tự 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 đã cộng tác với nhóm Angular, nhóm này đã triển khai 2 công cụ dành cho nhà phát triển bên thứ ba:

  1. 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à khung hiển thị, 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 không cập nhật được.
  2. Công cụ biểu đồ Tiêm phần phụ thuộc (DI): Hiển thị các trình tiêm phần tử, cho phép các tác nhân biết chính xác nơi cung cấp dịch vụ hoặc nơi thiếu dịch vụ. Vì biểu đồ DI của Angular chỉ là một cấu trúc thời gian chạy, nên chỉ phân tích tĩnh không thể gỡ lỗi nhà cung cấp.
Bản ghi màn hình cho thấy một tác nhân AI đang sử dụng công cụ Biểu đồ tín hiệu Angular để gỡ lỗi một vòng lặp phản ứng.

Nhóm React cũng đã bắt đầu thử nghiệm với các công cụ dành cho nhà phát triển của bên thứ ba.

Cùng chúng tôi xây dựng tương lai của tính năng gỡ lỗi dựa trên 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 dùng cờ hiệu 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 với bạn:

Hãy cùng chúng tôi xây dựng tương lai của hoạt động phát triển web dựa trên tác nhân!