Chrome DevTools 151–153: resend delle request, preload più chiaro, viewer binario e CSS specificity a portata di hover

Tra le versioni 151 e 153, Chrome DevTools ha ricevuto una serie di miglioramenti piccoli ma molto “day‑to‑day”: meno frizione nel riprodurre richieste di rete, più chiarezza quando lavori con preload e payload binari, strumenti più intelligenti per capire perché una regola CSS non vince, e metriche migliori quando analizzi navigazioni “soft” tipiche delle SPA.

In parallelo, a partire da Chrome 153 il rilascio passa a un ciclo di due settimane su desktop, Android e iOS: in pratica funzionalità e fix arrivano più spesso e con milestone più piccole.

Network panel: riprodurre e modificare le request diventa immediato

Resend: invia di nuovo la stessa richiesta

Nel pannello Network ora trovi nuove opzioni nel menu contestuale (tasto destro su una request):

• Resend: reinvia la richiesta identica, con gli stessi parametri, header e body.

È l’equivalente moderno del vecchio “replay XHR”, ma finalmente pensato per il flusso attuale dominato da Fetch.

Edit and resend as fetch: dalla request al comando fetch() pronto in Console

L’opzione più utile per chi deve “iterare” su una chiamata è:

• Edit and resend as fetch

DevTools inserisce in Console un comando fetch() già precompilato con URL e opzioni. A quel punto puoi:

• ritoccare header (auth, content-type, custom header)
• modificare body o querystring
• cambiare method

…e lanciare la richiesta con Invio. È un flusso perfetto quando devi capire quale singolo dettaglio fa cambiare la risposta.

Nota: rimangono disponibili anche i classici formati nel menu Copy, con esportazione verso curl, PowerShell, fetch e altri.

Performance e caricamento: colonna “Preloaded” e tag pronto da incollare

Colonna “Preloaded”

Per chi lavora sull’ottimizzazione, nel Network panel c’è una nuova colonna Preloaded che ti aiuta a capire se una risorsa è stata caricata tramite preload oppure no. È un dettaglio piccolo, ma accelera molto la diagnosi quando stai cercando di verificare se una strategia di preload sta davvero facendo effetto.

Copia rapida del preload element

Se individui una risorsa che vorresti precaricare, ora puoi:

• tasto destro sulla request
• Copy as preload element

Negli appunti finisce un <link ...> pronto da incollare nell’HTML.

Payload binari: viewer integrato per WebSocket e formati custom

Chi lavora con WebSocket o payload binari sa quanto sia scomodo ispezionare dati “raw”. Ora nella tab Payload c’è un binary viewer integrato che permette di decodificare al volo in:

• Base64
• Hex
• UTF‑8

Senza uscire da DevTools e senza passaggi manuali con tool esterni.

CSS: capire la specificità senza ricorrere a !important

Se ti capita di aggiungere !important solo per “farla vincere”, spesso il problema reale è la specificità.

Tooltip con breakdown della specificità (ABC)

Nel tab Styles, passando il mouse su un selettore, compare un tooltip che mostra come viene calcolato il peso ABC della specificità. È un aiuto concreto quando:

• più regole colpiscono lo stesso elemento
• stai inseguendo override non intenzionali
• vuoi capire perché una regola apparentemente “giusta” viene battuta

CSS nesting: hover sul parent per evidenziare l’elemento

Se usi CSS nesting, ora l’hover su un selettore “parent” dentro una regola annidata evidenzia l’elemento corrispondente nella pagina. Debuggare stili annidati profondi diventa meno “a tentativi”.

Relazioni semantiche cliccabili (es. popover-target)

Gli attributi di relazione per interazioni click/hover (ad esempio quelli che collegano un trigger al suo target) ora creano link interattivi verso i nodi target. È un upgrade di usabilità: meno caccia al DOM, più comprensione immediata delle connessioni tra elementi.

Performance panel: metriche anche per le “soft navigation”

DevTools distingue meglio tra:

• hard navigation: reload completo della pagina
• soft navigation: cambia URL e “pagina” percepita, ma JS e CSS restano vivi (tipico delle SPA, ad esempio con Next.js)

Ora nel Performance panel puoi ottenere metriche anche per queste navigazioni soft: apri il pannello prima di navigare e, dopo il cambio pagina, vedrai i timing aggiornati con un’indicazione che la navigazione è stata riconosciuta come “soft”.

DevTools per agent: debugging memoria più profondo (MCP)

Per chi integra agent di coding con gli strumenti del browser, il server MCP di DevTools amplia le capacità in modo significativo, includendo:

• ispezione di heap snapshot
• analisi mirata per individuare memory leak (ad esempio allocazioni ridondanti di stringhe)
• sperimentazioni su encoding alternativo (GCF) al posto di JSON per ridurre banda quando l’agent deve analizzare grandi quantità di dati

In breve: più osservabilità e più automazione quando la sessione di debug diventa complessa.

Console: esportare console.table() in Markdown o CSV

Se usi spesso console.table() per stampare array/oggetti tabellari, ora puoi:

• tasto destro sulla tabella
• Copy table as Markdown oppure Copy table as CSV

È comodissimo per trasferire dati in issue, documentazione o messaggi di team senza passaggi intermedi.

---

Sintesi: meno attrito, più controllo

Queste release puntano soprattutto a ridurre il tempo tra “ho visto un problema” e “ho una prova ripetibile”:

• le request si reinviano e si trasformano in fetch() modificabile in un attimo
• preload e payload binari diventano più trasparenti
• la specificità CSS si legge al volo (e !important torna a essere l’eccezione)
• le SPA ottengono metriche più pertinenti sulle navigazioni soft

Se lavori quotidianamente tra Network, Styles e Performance, sono miglioramenti che si traducono direttamente in debugging più veloce e decisioni più informate.