Odblokowywanie statystyk czasu działania: wprowadzenie narzędzi deweloperskich innych firm w Narzędziach deweloperskich w Chrome dla agentów

Wolfgang Beyer
Wolfgang Beyer
X GitHub

Opublikowano: 18 czerwca 2026 r.

Aby skutecznie debugować nowoczesną aplikację internetową, agent AI potrzebuje nie tylko kodu źródłowego, ale też informacji o tym, jak aplikacja zachowuje się w czasie działania.

Z przyjemnością przedstawiamy narzędzia deweloperskie innych firm dla Narzędzi deweloperskich w Chrome dla agentów. Teraz Twoje aplikacje i platformy mogą bezpośrednio informować agentów AI o swoim stanie wewnętrznym. Dzięki temu agenci mogą łączyć to, co dzieje się na ekranie, z logiką działającą w tle.

Cel: wyjście poza analizę statyczną

Nowoczesne tworzenie stron internetowych opiera się na abstrakcjach – platformach takich jak Angular, React czy Vue, platformach CMS takich jak WordPress czy Shopify oraz bibliotekach CSS, grafiki 3D czy animacji. Narzędzia deweloperskie mają bezpośredni dostęp do ostatecznie renderowanego DOM, ale „prawda” o aplikacji często znajduje się w stanie wewnętrznym platformy: hierarchii komponentów, sygnałach JavaScript lub stanie backendu.

Naszym celem w przypadku narzędzi deweloperskich innych firm jest umożliwienie każdej bibliotece udostępniania agentom AI tego bogatego, praktycznego kontekstu. Dzięki temu agenci mogą debugować problemy, które wcześniej były dla nich „niewidoczne”, np.:

  • Hierarchie komponentów: mapowanie elementu DOM na stronie bezpośrednio na odpowiadający mu komponent platformy i stan wewnętrzny.
  • Sprawdzanie stanu wewnętrznego: dostęp do stanu po stronie serwera lub zawartości bazy danych bezpośrednio w sesji debugowania.

Jak to działa: interfejs Discovery API

Narzędzia deweloperskie innych firm korzystają z interfejsu JavaScript API opartego na zdarzeniach. Serwer MCP Narzędzi deweloperskich w Chrome wykrywa te narzędzia, wysyłając zdarzenie devtoolstooldiscovery do globalnego obiektu window. Zdarzenie devtoolstooldiscovery jest automatycznie wysyłane przy każdej nawigacji po stronie lub zmianie wybranej strony. Można je też wysłać bezpośrednio za pomocą narzędzia MCP list_3p_developer_tools.

Implementowanie własnych narzędzi

Aby udostępnić narzędzia z biblioteki lub aplikacji, musisz nasłuchiwać tego zdarzenia wykrywania i odpowiadać za pomocą 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);
        }
      }
    ]
  });
});

Implementacja wygląda tak:

  1. Zdefiniuj schemat: użyj schematu JSON, aby zdefiniować dane wejściowe, których oczekuje Twoje narzędzie.
  2. Obsłuż logikę: zaimplementuj funkcję execute, która działa w kontekście strony i zwraca dane, które można serializować.
  3. Elementy DOM: obiektów, których nie można serializować, nie można przesyłać między stroną a Narzędziami deweloperskimi w Chrome dla agentów. Wyjątek stanowią elementy DOM. Gdy narzędzia zwracają elementy DOM, Narzędzia deweloperskie w Chrome dla agentów automatycznie mapują je na te same identyfikatory UID, których używa narzędzie take_snapshot . Dzięki temu agent może w ten sam sposób wchodzić w interakcję ze wszystkimi elementami strony (niezależnie od tego, czy pochodzą z platformy, czy ze zrzutu strony).

Interakcja z narzędziami za pomocą MCP

Po zarejestrowaniu narzędzi agent kodujący może wchodzić z nimi w interakcję za pomocą Narzędzi deweloperskich w Chrome dla agentów. Narzędzie MCP list_3p_developer_tools zwraca opisy narzędzi innych firm dostępnych na stronie. Dodatkowo, gdy wybrana strona się zmieni (np. po nawigacji), Narzędzia deweloperskie w Chrome dołączają do odpowiedzi narzędzia MCP listę dostępnych narzędzi.

Aby używać tych narzędzi, agent wywołuje execute_3p_developer_tool. Narzędzia deweloperskie w Chrome automatycznie sprawdzają parametry wejściowe, aby upewnić się, że są zgodne z definicją narzędzia.

Narzędzia można też wywoływać za pomocą narzędzia MCP evaluate_script. Agent podaje fragment kodu JavaScript, który Narzędzia deweloperskie w Chrome wykonują na stronie. Ten fragment kodu może wywoływać narzędzia deweloperskie innych firm i natychmiast wykorzystywać ich dane wyjściowe do dalszych obliczeń.

Używanie evaluate_script jest skuteczne w przypadku złożonego debugowania, ponieważ umożliwia agentom:

  • Tworzenie operacji: łączenie wielu kroków w jedno wykonanie.
  • Obsługiwanie wartości, których nie można serializować: przetwarzanie obiektów lub sygnałów specyficznych dla platformy bezpośrednio w kontekście strony.
  • Optymalizowanie wydajności: minimalizowanie obciążenia związanego z serializacją i unikanie wielokrotnych podróży w obie strony między agentem a przeglądarką.

Wczesny sukces: integracja z Angular

Współpracujemy z zespołem Angular, który zaimplementował 2 narzędzia deweloperskie innych firm:

  1. Narzędzie Signal Graph: umożliwia agentom wizualizację relacji między stanem a widokiem, co pomaga im identyfikować zależności powodujące nieskończone pętle lub nieudane aktualizacje.
  2. Narzędzie Dependency Injection (DI) Graph: udostępnia wstrzykiwacze elementów, dzięki czemu agenci mogą dokładnie sprawdzić, gdzie usługa jest dostępna lub gdzie jej brakuje. Ponieważ wykres DI Angular jest konstrukcją tylko w czasie działania, sama analiza statyczna nie może debugować błędów dostawcy.
Screencast przedstawiający agenta AI, który używa narzędzia Angular Signal Graph do debugowania pętli reaktywnej.

Zespół React również zaczął eksperymentować z narzędziami deweloperskimi innych firm.

Twórz z nami przyszłość debugowania agentowego

Ta eksperymentalna funkcja jest dostępna w Narzędziach deweloperskich w Chrome dla agentów od wersji 0.25.0. Aby ją włączyć, użyj flagi wiersza polecenia --categoryExperimentalThirdParty.

Jeśli utrzymujesz platformę, bibliotekę lub narzędzie i chcesz poprawić debugowanie dla agentów kodujących, chętnie nawiążemy współpracę:

Dołącz do nas i wspólnie twórzmy przyszłość agentowego tworzenia stron internetowych.