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 działa w czasie wykonywania.

Z przyjemnością wprowadzamy narzędzia deweloperów zewnętrznych do Narzędzi deweloperskich w Chrome dla agentów. Teraz aplikacje i platformy mogą bezpośrednio udostępniać agentom AI informacje o swoim stanie wewnętrznym. Ułatwia to pracownikom obsługi klienta powiązanie tego, co dzieje się na ekranie, z logiką działania w tle.

Cel: wyjście poza analizę statyczną

Nowoczesne tworzenie stron internetowych opiera się na abstrakcjach – frameworkach 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 wyrenderowanego DOM, ale „prawda” o aplikacji często znajduje się w wewnętrznym stanie frameworka: hierarchiach komponentów, sygnałach JavaScriptu lub stanie backendu.

Naszym celem w przypadku narzędzi deweloperów zewnętrznych jest umożliwienie każdej bibliotece udostępniania agentom AI tych bogatych, przydatnych informacji. Dzięki temu agenci mogą rozwiązywać problemy, które wcześniej były dla nich „niewidoczne”, np.:

  • Hierarchie komponentów: mapuj element 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 deweloperów 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 w globalnym obiekcie window. Zdarzenie devtoolstooldiscovery jest automatycznie wysyłane przy każdej nawigacji po stronie lub po zmianie wybranej strony. Można je też wysyłać jawnie za pomocą narzędzia list_3p_developer_tools MCP.

Wdrażanie 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ługa logiki: zaimplementuj funkcję execute, która działa w kontekście strony i zwraca dane, które można serializować.
  3. Elementy DOM: nie można przesyłać między stroną a Narzędziami deweloperskimi obiektów, których nie można serializować. Wyjątek stanowią elementy DOM. Gdy narzędzia zwracają elementy DOM, Narzędzia deweloperskie dla agentów automatycznie mapują je na te same identyfikatory UID, których używa take_snapshotnarzędzie. Dzięki temu agent może wchodzić w interakcję ze wszystkimi elementami strony (niezależnie od tego, czy pochodzą z frameworka czy z migawki strony) w ten sam sposób.

Korzystanie z narzędzi za pomocą MCP

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

Aby korzystać z tych narzędzi, agent dzwoni pod numer execute_3p_developer_tool. Narzędzia deweloperskie automatycznie sprawdzają parametry wejściowe, aby upewnić się, że są zgodne z definicją narzędzia.

Narzędzia możesz też wywoływać za pomocą evaluate_scriptnarzędzia MCP. Agent dostarcza fragment kodu JavaScript, który Narzędzia deweloperskie wykonują na stronie. Ten fragment kodu może wywoływać narzędzia deweloperów 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:

  • Operacje tworzenia: łączenie wielu kroków w jedno wykonanie.
  • Obsługa wartości, których nie można serializować: przetwarzaj obiekty lub sygnały specyficzne dla platformy bezpośrednio w kontekście strony.
  • Optymalizacja wydajności: zminimalizuj narzut serializacji i unikaj wielokrotnych podróży w obie strony między agentem a przeglądarką.

Wczesny sukces: integracja z Angular

Współpracowaliśmy z zespołem Angulara, który wdrożył 2 narzędzia dla programistów innych firm:

  1. Narzędzie Signal Graph: umożliwia agentom wizualizację relacji między stanem a widokiem, co pomaga im identyfikować zależności, które powodują nieskończone pętle lub nieudane aktualizacje.
  2. Narzędzie do tworzenia wykresów wstrzykiwania zależności: udostępnia wstrzykiwacze elementów, dzięki czemu pracownicy obsługi klienta mogą dokładnie sprawdzić, gdzie usługa jest świadczona lub gdzie jej brakuje. Graf DI Angulara jest konstrukcją działającą tylko w czasie działania programu, więc sama analiza statyczna nie wystarczy do debugowania błędów dostawcy.
Screencast przedstawiający agenta AI korzystającego z narzędzia Angular Signal Graph do debugowania pętli reaktywnej.

Zespół Reacta zaczął też eksperymentować z narzędziami deweloperskimi innych firm.

Twórz z nami przyszłość debugowania opartego na agentach

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

Jeśli utrzymujesz framework, bibliotekę lub narzędzie i chcesz ulepszyć debugowanie w przypadku agentów do kodowania, chętnie nawiążemy z Tobą współpracę:

Dołącz do nas i razem z nami twórz przyszłość rozwoju stron internetowych opartego na możliwościach agentowych.