{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreidogkvp2m7qal3nj6es3ogmmnyldnpi3ngsw77kplbxo5hp24xaci",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mp6ob72vnbw2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreihtzfkrdyr5gcdzgfnz7ui2xk4qzr73hrb7f7ossh7lchvsmig7py"
    },
    "mimeType": "image/webp",
    "size": 84894
  },
  "path": "/frontendfacile/chrome-devtools-148-150-agent-ai-assistance-e-nuove-utility-per-debugging-e-accessibilita-4afj",
  "publishedAt": "2026-06-26T09:12:01.000Z",
  "site": "https://dev.to",
  "tags": [
    "devtoolsforagents",
    "aiassistance",
    "lighthouseaudit",
    "contrastoapca",
    "https://frontendfacile.it/blog/chrome-devtools-148-150-agent-ai-assistance-e-nuove-utility-per-debugging-e-acce"
  ],
  "textContent": "> DevTools for Agents 1.0, pannello AI più operativo, APCA per il contrasto, strumenti WebMCP e piccole migliorie che accelerano il lavoro quotidiano.\n\nTra le versioni 148 e 150, Chrome DevTools porta un pacchetto di aggiornamenti che ruota attorno a tre assi: flussi “agentici” più maturi, un pannello di assistenza AI più orientato all’azione e una serie di miglioramenti mirati per performance, accessibilità e produttività.\n\nDi seguito, le novità più utili da conoscere (e da provare subito) se lavori ogni giorno con DevTools.\n\n##  DevTools for Agents 1.0: workflow più affidabili (e verificabili)\n\nChrome DevTools for Agents raggiunge la **prima release stabile (1.0)** , e il salto di qualità è soprattutto nella **capacità di chiudere il ciclo di feedback** : l’agente non deve “immaginare” l’effetto dei cambiamenti, perché può osservare e verificare direttamente in un browser reale.\n\n###  Lighthouse dentro il flusso di lavoro dell’agente\n\nLa novità più pratica è la possibilità per gli agenti di eseguire **audit completi Lighthouse** direttamente nel loro workflow. Questo serve a intercettare e correggere:\n\n  * regressioni di **accessibilità**\n  * problemi **SEO**\n  * violazioni delle **best practice**\n\n\n\nPer la performance, restano disponibili gli strumenti più specializzati (ad esempio i tracing), ma il punto è chiaro: con Lighthouse integrato diventa più semplice automatizzare controlli “da checklist” che spesso si saltano nelle iterazioni rapide.\n\n###  Una categoria Lighthouse pensata per l’agentic browsing\n\nDevTools for Agents supporta anche una nuova categoria di audit legata all’**agentic browsing** , con verifiche su:\n\n  * tool WebMCP\n  * accessibilità per agenti\n  * presenza di un potenziale file **LLMS.txt**\n\n\n\n###  Debug anche delle estensioni Chrome\n\nUn’aggiunta interessante: l’agente può ora **debuggare estensioni** , ispezionando pagine e script specifici a runtime. Per chi lavora su architetture di estensioni non banali (content script, service worker, pagine di opzioni, ecc.) è un abilitatore notevole.\n\n###  Tool custom esposti dalla pagina (JavaScript) e riconosciuti dall’agente\n\nPagine e framework possono esporre **strumenti custom basati su JavaScript** disponibili a runtime. DevTools for Agents li rileva e li rende utilizzabili, permettendo un debugging più diretto di comportamenti complessi (soprattutto quando l’osservabilità “standard” non basta).\n\n##  Modern Web Guidance: baseline e feature moderne senza sorprese\n\nAccanto agli strumenti, entra in gioco anche una guida operativa: **Modern Web Guidance** , un set di competenze “verificate” pensate per aiutare gli agenti a costruire soluzioni usando le funzionalità più moderne della piattaforma web, **rispettando il baseline target**.\n\nSe stai sperimentando coding agent nel team, questo tipo di riferimento riduce ambiguità del tipo: “possiamo usare questa API in produzione?”\n\n##  AI Assistance: risposte più concise, widget in chat e Lighthouse integrato\n\nIl pannello di **AI Assistance** viene ripensato per essere più operativo: l’obiettivo non è solo avere testo in chat, ma **collegare direttamente suggerimenti e dati dentro DevTools**.\n\n###  Walkthrough con widget (non solo markdown)\n\nInvece di una conversazione fatta solo di testo, i nuovi walkthrough possono renderizzare **widget specializzati** direttamente nel pannello: ad esempio per **Core Web Vitals** , breakdown dell’**LCP** e altri indicatori. Un dettaglio utile: con un click su “reveal” si arriva alla **fonte dati** dentro DevTools, riducendo il rischio di “consigli generici”.\n\n###  Accesso diretto a Lighthouse per analisi mirate\n\nAI Assistance può usare Lighthouse per un’analisi più completa e poi produrre indicazioni più puntuali su accessibilità e performance, basate su evidenze reali raccolte sulla pagina.\n\n###  “Copy to Coding Agent”: portare l’investigazione nel codice\n\nQuando hai finito l’analisi, puoi trasferire i risultati al tuo agente di coding con **Copy to Coding Agent** :\n\n  * copiando la conversazione “verbatim”, oppure\n  * generando un **prompt riassuntivo** pronto per un task operativo\n\n\n\nQuesto è uno dei passaggi più sensati per trasformare DevTools da strumento di investigazione a ponte verso la remediation.\n\n##  Aggiornamenti di produttività: piccoli dettagli, grande impatto\n\nTra 148 e 150 arrivano anche diverse migliorie “da tutti i giorni”.\n\n###  Speculative loads: filtri più pratici\n\nNel pannello **Application** è possibile filtrare le **speculation rules** usando tag o chiavi come **URL** e **status**. Utile quando stai validando strategie di prerender/prefetch e vuoi isolare rapidamente cosa sta succedendo.\n\n###  Network: colonna opzionale “request number”\n\nNel pannello **Network** compare una colonna opzionale con il **numero della richiesta** (ordine cronologico assoluto di avvio). È sortable: un’aggiunta piccola, ma molto comoda quando devi ricostruire sequenze reali in pagine con molte richieste concorrenti.\n\n##  Accessibilità: APCA esce dall’“experimental” e migliora l’analisi del contrasto\n\nL’**APCA contrast calculator** esce dalla fase sperimentale. APCA (Accessible Perceptual Contrast Algorithm) sostituisce le linee guida AA/AAA “classiche” con un modello percettivo più adatto ai display moderni.\n\nSe vuoi usarlo come default:\n**Settings → Preferences → Elements → Enable APCA contrast guidelines**\n\nSempre lato accessibilità, il toggle dell’**Accessibility Tree** viene spostato: da pulsante flottante a controllo dedicato nella sidebar della tab **Accessibility** dentro **Elements**. Meno “nascosto”, più coerente.\n\n##  WebMCP: strumenti di debugging per tool esposti agli agenti\n\nWebMCP è una proposta di standard che permette ai siti di esporre tool specializzati direttamente agli agenti AI in visita. DevTools introduce strumenti dedicati (ancora sperimentali) per debuggarli dentro **Application** , in una nuova sezione **WebMCP**.\n\nQui puoi:\n\n  * vedere la lista dei tool definiti\n  * tracciare invocazioni dell’agente in tempo reale\n  * eseguire manualmente i tool per verificare output in sicurezza\n\n\n\nPer provarli servono flag sperimentali:\n\n  * abilitare il supporto DevTools WebMCP\n  * abilitare i flag di testing WebMCP\n\n\n\n##  Suggerimenti di codice per CSS: assistenza “smart” nello Styles pane\n\nQuando modifichi CSS nello **Styles** tab, arrivano suggerimenti assistiti utili per valori complessi (gradienti, ombre, ecc.). Si attivano in:\n**DevTools Settings → AI innovations**\n\nNon è una feature “core”, ma può ridurre l’attrito nelle iterazioni visive dove spesso si perde tempo su sintassi e combinazioni.\n\n##  Sintesi: cosa cambia davvero nel lavoro quotidiano\n\nQueste release rendono DevTools più “chiudiciclo”: dall’analisi (AI Assistance con dati e widget) alla verifica (Lighthouse integrato anche nei flussi agentici) fino al passaggio all’azione (Copy to Coding Agent). In parallelo, migliorano aspetti pratici—Network ordering, filtri, contrasto APCA—che incidono direttamente sul tempo speso a diagnosticare e correggere.\n\nL’implicazione più concreta è questa: se stai adottando agenti nel workflow, ora hai più strumenti per farli lavorare con evidenze reali e guardrail misurabili, riducendo iterazioni “a tentativi” e regressioni difficili da notare.\n\nArticolo originale: https://frontendfacile.it/blog/chrome-devtools-148-150-agent-ai-assistance-e-nuove-utility-per-debugging-e-acce",
  "title": "Chrome DevTools 148–150: agent, AI Assistance e nuove utility per debugging e accessibilità"
}