Sblocca approfondimenti sul runtime: introduzione di strumenti per sviluppatori di terze parti per Chrome DevTools per gli agenti

Wolfgang Beyer

Pubblicato il 18 giugno 2026

Per eseguire il debug efficace di un'applicazione web moderna, un agente AI ha bisogno di più del semplice codice sorgente: deve capire come si comporta l'applicazione in fase di runtime.

Siamo felici di presentare gli strumenti per sviluppatori di terze parti per Chrome DevTools per gli agenti. Ora, le tue app e i tuoi framework possono fornire agli agenti AI una visione diretta del loro stato interno. In questo modo, gli agenti possono collegare ciò che accade sullo schermo alla logica in esecuzione in background.

L'obiettivo: oltre l'analisi statica

Lo sviluppo web moderno si basa su astrazioni: framework come Angular, React o Vue; piattaforme CMS come WordPress o Shopify; e librerie per CSS, grafica 3D o animazioni. Sebbene DevTools abbia accesso diretto al DOM di rendering finale, la "verità" di un'applicazione spesso risiede nello stato interno del framework: gerarchie dei componenti, indicatori JavaScript o stato del backend.

Il nostro obiettivo con gli strumenti per sviluppatori di terze parti è fornire un percorso per consentire a qualsiasi libreria di condividere questo contesto ricco e utilizzabile con gli agenti AI. In questo modo, gli agenti possono eseguire il debug di problemi che in precedenza erano "invisibili", ad esempio:

• Gerarchie dei componenti: mappa un elemento DOM nella pagina direttamente al componente del framework e allo stato interno corrispondenti.
• Ispezione dello stato interno: accedi allo stato lato server o ai contenuti del database direttamente all'interno della sessione di debug.

Come funziona: l'API Discovery

Gli strumenti per sviluppatori di terze parti utilizzano un'API JavaScript basata su eventi. Il server MCP di Chrome DevTools rileva questi strumenti inviando un evento devtoolstooldiscovery all'oggetto window globale. L'evento devtoolstooldiscovery viene inviato automaticamente a ogni navigazione della pagina o se la pagina selezionata viene modificata e può essere inviato in modo esplicito utilizzando lo strumento MCP list_3p_developer_tools.

Implementa i tuoi strumenti

Per esporre gli strumenti dalla libreria o dall'applicazione, devi ascoltare questo evento di rilevamento e rispondere con un 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);
        }
      }
    ]
  });
});

L'implementazione è la seguente:

1. Definisci lo schema: utilizza lo schema JSON per definire l'input previsto dallo strumento.
2. Gestisci la logica: implementa una funzione execute che viene eseguita nel contesto della pagina e restituisce dati serializzabili.
3. Elementi DOM: gli oggetti non serializzabili non possono essere inviati tra la pagina e DevTools per gli agenti. Gli elementi DOM sono un'eccezione. Quando gli strumenti restituiscono elementi DOM, DevTools per gli agenti li mappa automaticamente agli stessi UID utilizzati dallo strumento take_snapshot. In questo modo, l'agente può interagire con tutti gli elementi della pagina (che provengano da un framework o da uno snapshot della pagina) nello stesso modo.

Interagisci con gli strumenti utilizzando MCP

Una volta registrati gli strumenti, l'agente di codifica può interagire con loro tramite DevTools per gli agenti. Lo strumento MCP list_3p_developer_tools restituisce le descrizioni degli strumenti di terze parti disponibili nella pagina. Inoltre, quando la pagina selezionata cambia (ad esempio, dopo la navigazione), DevTools aggiunge un elenco di strumenti disponibili alla risposta dello strumento MCP.

Per utilizzare questi strumenti, l'agente chiama execute_3p_developer_tool. DevTools convalida automaticamente i parametri di input per assicurarsi che corrispondano alla definizione dello strumento.

Puoi anche richiamare gli strumenti utilizzando lo strumento MCP evaluate_script. L'agente fornisce uno snippet JavaScript che DevTools esegue nella pagina. Questo snippet può chiamare strumenti per sviluppatori di terze parti e utilizzare immediatamente il loro output per ulteriori calcoli.

L'utilizzo di evaluate_script è efficace per il debug complesso perché consente agli agenti di:

• Comporre operazioni: combina più passaggi in una singola esecuzione.
• Gestire valori non serializzabili: elabora oggetti o indicatori specifici del framework direttamente nel contesto della pagina.
• Ottimizzare le prestazioni: riduci al minimo l'overhead di serializzazione ed evita più round trip tra l'agente e il browser.

Successo iniziale: integrazione di Angular

Abbiamo collaborato con il team di Angular, che ha implementato due strumenti per sviluppatori di terze parti:

1. Strumento Grafico degli indicatori: consente agli agenti di visualizzare le relazioni tra lo stato e la visualizzazione, aiutandoli a identificare le dipendenze che causano loop infiniti o aggiornamenti non riusciti.
2. Strumento Grafico di inserimento delle dipendenze (DI): espone gli iniettori di elementi, consentendo agli agenti di vedere esattamente dove viene fornito un servizio o dove manca. Poiché il grafico DI di Angular è un costrutto solo in fase di runtime, la sola analisi statica non può eseguire il debug degli errori del provider.

Anche il team di React ha iniziato a sperimentare con gli strumenti per sviluppatori di terze parti.

Crea con noi il futuro del debug agentico

Questa funzionalità sperimentale è disponibile in Chrome DevTools per gli agenti a partire dalla versione 0.25.0. Per abilitarla, utilizza il flag della riga di comando --categoryExperimentalThirdParty.

Se gestisci un framework, una libreria o uno strumento e vuoi migliorare l'esperienza di debug per gli agenti di codifica, saremo felici di collaborare:

• Esplora la documentazione: Guida tecnica su GitHub.
• Contattaci: stiamo cercando partner per iterare su queste API e contribuire a definire il futuro del debug web basato sull'AI. Puoi creare un problema nel repository GitHub per contattarci.

Unisciti a noi per creare insieme il futuro dello sviluppo web agentico.