Novità di DevTools (Chrome 117)

Miglioramenti al riquadro Rete

Esegui l'override dei contenuti web a livello locale ancora più velocemente

La funzionalità degli override locali è ora semplificata, in modo da poter simulare facilmente le intestazioni delle risposte e i contenuti web di risorse remote dal riquadro Rete senza accedervi.

Per eseguire l'override dei contenuti web, apri il riquadro Rete, fai clic con il tasto destro del mouse su una richiesta e seleziona Esegui l'override dei contenuti.

Se hai configurato degli override locali ma sono disattivati, DevTools li abilita. Se non li hai ancora configurati, DevTools ti chiede nella barra delle azioni in alto. Seleziona una cartella in cui archiviare gli override e consentire a DevTools di accedervi.

Una volta configurati gli override, DevTools ti rimanda a Origini > Override > Editor per consentirti di eseguire l'override dei contenuti web.

Tieni presente che le risorse sottoposte a override sono indicate con nel riquadro Rete. Passa il mouse sopra l'icona per visualizzare gli elementi sostituiti.

Problemi relativi a Chromium: 1465785, 1470532, 1469359.

Esegui l'override dei contenuti di XHR e delle richieste di recupero

Ora puoi eseguire l'override dei contenuti di XHR e delle richieste di recupero oltre alle relative intestazioni di risposta. Con questi override, puoi simulare le risposte dell'API per eseguire il debug della pagina web anche se il backend e l'API non sono ancora pronti.

Al momento DevTools supporta l'override dei contenuti per i seguenti tipi di richieste: immagini (ad esempio avif, png), caratteri, fetch e XHR, script (css e js) e documenti (html). DevTools ora rende non selezionabile l'opzione Esegui l'override dei contenuti per i tipi non supportati.

Problemi relativi a Chromium: 792101, 1469776.

Nascondi le richieste di estensioni di Chrome

Per aiutarti a concentrarti sul codice che hai creato ed escludere le richieste non pertinenti inviate dalle estensioni che potresti aver installato in Chrome, il riquadro Rete utilizza un nuovo filtro.

Per filtrare tutte le richieste inviate a chrome-extension:// URL, consulta Nascondi URL delle estensioni.

Problemi relativi a Chromium: 1257885, 1458803.

Codici di stato HTTP leggibili

Il Codice di stato nell'intestazione della richiesta ora mostra del testo leggibile accanto ai codici di stato HTTP, per consentirti di capire più rapidamente cosa è successo alla richiesta.

Puoi anche passare il mouse sopra il codice di stato nella tabella della richiesta per visualizzare lo stesso testo.

Problema relativo a Chromium: 1153956.

Formatta le risposte per i sottotipi JSON

La scheda Risposta di una richiesta con un sottotipo MIME application/[subtype]+json (ad esempio ld+json, hal+json e altri) ora analizza correttamente la risposta e ti consente di prezzarla.

Problema relativo a Chromium: 406900.

Rendimento: visualizza le modifiche nella priorità di recupero per gli eventi di rete

Il riquadro Rendimento ora mostra due campi di priorità nel Riepilogo di un evento nella traccia Rete: Priorità iniziale e Priorità (finale), anziché la sola Priorità. Con questo campo aggiuntivo ora puoi vedere se la priorità di recupero dell'evento cambia e modificare l'ordine dei download. Per ulteriori informazioni, consulta la sezione Ottimizzare il caricamento delle risorse con l'API Fetch Priority.

Le stesse informazioni sono inoltre disponibili nella colonna Priority (Priorità) del riquadro Network (Rete), con l'impostazione Big request rows abilitata.

Problemi relativi a Chromium: 1463901, 1380964.

Impostazioni relative alle fonti attivate per impostazione predefinita: piegatura del codice e visualizzazione automatica dei file

Le Impostazioni di > Preferenze > L'opzione Modifica del codice è ora attivata per impostazione predefinita. Questa opzione ti consente di eseguire il folding di blocchi di codice.

Per piegare un blocco di codice, passa il mouse sopra il numero della riga accanto all'inizio del blocco e fai clic sull'icona di compressione . Fai clic su {...} per espandere nuovamente il blocco.

Inoltre, in Impostazioni > Preferenze > Ora anche la funzionalità Rivela automaticamente i file nella barra laterale è abilitata per impostazione predefinita.

Questa impostazione imposta la struttura dei file in Origini > Pagina: seleziona il file attualmente aperto nell'Editor quando cambi scheda.

Problemi relativi a Chromium: 1459193, 1336599.

Miglioramento del debug dei problemi relativi ai cookie di terze parti

Nel tentativo di contribuire alla creazione di un web più privato e, in parallelo agli aggiornamenti da parte di altri browser, Chrome ha introdotto l'iniziativa Privacy Sandbox. Questa iniziativa migliora sostanzialmente la privacy sul web e può supportare un web sano e con pubblicità in modo da rendere obsoleti i cookie di terze parti. Privacy Sandbox ha una cronologia di eliminazione graduale per consentirti di adattarti comodamente ai cambiamenti.

Puoi già testare il comportamento di Chrome dopo l'eliminazione graduale dei cookie di terze parti. Per farlo, esegui Chrome dalla riga di comando con il flag --test-third-party-cookies-phaseout. Per conoscere la funzione di questo flag, consulta Debug dei cookie.

Indipendentemente dalla modalità di esecuzione di Chrome (con o senza il flag), nella scheda Problemi ora la casella di controllo Includi problemi di cookie di terze parti è attivata per impostazione predefinita per tutti i nuovi utenti Chrome e, di conseguenza, genera report:

• Un avviso di modifica che provoca un errore relativo all'imminente eliminazione graduale.
• Problemi relativi ai cookie di terze parti.

Se vuoi visualizzare avvisi sui cookie relativi all'imminente eliminazione graduale come utente esistente di Chrome, seleziona questa casella di controllo.

Per verificarlo, esamina i cookie in questa pagina demo.

Inoltre, il filtro Cookie di risposta bloccati nel riquadro Rete è stato riformulato per chiarire che mostra solo i cookie di risposta bloccati.

Problemi relativi a Chromium: 1458839, 1462693, 1466310.

Esegui il debug del precaricamento nel riquadro Applicazione

Il team di Chrome sta ripristinando il prerendering completo delle pagine future che potrebbero essere visitate da un utente. Per consentirti di eseguire il debug, DevTools aggiunge la sezione Precaricamento al riquadro Applicazione. I nuovi sistemi di precaricamento e prerendering (noti collettivamente come "precaricamento navigazione") utilizzano l'API Speculation Rules anziché gli hint delle risorse basate su link.

In questa pagina demo, nella sezione Applicazione > Precaricamento, puoi controllare:

• Regole di speculazione, che elenca tutte le serie di regole trovate nella pagina corrente.
• Precaricamenti, in cui sono elencati tutti gli URL precaricati e sottoposti a prerendering dalle serie di regole.
• Questa pagina che elenca lo stato della pagina corrente sottoposta a prerendering.

Per ulteriori informazioni, consulta il post dedicato sul debug delle regole di speculazione.

Problema relativo a Chromium: 1410709.

Nuovi colori

Potresti aver già notato che ora DevTools ha un aspetto aggiornato che si adatta meglio a Chrome. Un fattore determinante è la nuova combinazione di colori.

Questa versione (117) introduce ulteriori miglioramenti dell'esperienza utente in DevTools, già menzionati e elencati ulteriormente, tra cui una serie di testi dell'interfaccia utente migliorati.

Problema relativo a Chromium: 1456677.

Lighthouse 10.4.0

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 10.4.0. In particolare, questa versione aggiunge nuovi controlli sull'accessibilità per quanto segue:

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

Ad esempio:

Consulta anche l'elenco completo delle modifiche. Per apprendere le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Problema relativo a Chromium: 772558.

L'estensione di debug C/C++ WebAssembly per DevTools è ora open source

L'estensione di debug C/C++ WebAssembly per DevTools è ora open source e si trova nel repository frontend DevTools. Questa estensione attiva le funzionalità di debug in DevTools per i programmi C++ compilati in WebAssembly. Per maggiori informazioni, vedi Debug C/C++ WebAssembly.

Scopri come creare, eseguire e testare l'estensione e non esitare a contribuire.

Problema relativo a Chromium: 1410709.

Varie in evidenza

Di seguito sono riportate alcune correzioni e miglioramenti degni di nota in questa release:

• Nesting CSS: il riquadro Elementi ora mostra l'intera catena di selettori per gli elementi secondari nidificati (1172985).
• Applicazione > Nel file manifest è ora disponibile una sezione Overlay dei controlli delle finestre che verifica se è presente un valore display_override nel file manifest e fornisce link alla documentazione pertinente.
• Nella sezione Fonti > La struttura ad albero della pagina ora esegue le seguenti operazioni, inclusi, a titolo esemplificativo (1442863):
  • Disattiva le cartelle se tutti i relativi contenuti sono nell'elenco di elementi da ignorare.
  • Colora le cartelle in arancione se tutti i relativi contenuti provengono da una mappa di origine.
• Prestazioni: le impostazioni di acquisizione ora vengono nascoste automaticamente quando avvii la registrazione (1455498).
• Fonti > Editor ha ripristinato il comportamento Ctrl + Freccia (Win) e Opzione + Freccia (MacO) (1468208).
• Animazioni > L'opzione Metti in pausa tutto ora mantiene il suo stato tra i caricamenti pagina (1446046).
• Applicazione > Spazio di archiviazione > Spazio di archiviazione della cache spostato in Applicazione > Spazio di archiviazione > Sezione Cache (1462622).
• Alcuni testi dell'interfaccia utente e descrizioni comando sono stati migliorati: descrizione comando contemporaneità hardware, testi del filtro di rete e un'opzione del menu principale, lettere maiuscole nella visualizzazione ad albero delle applicazioni, Rete > Testi delle intestazioni, Fonti > Override e testi del file system.

Nuove funzionalità sperimentali

Nuova emulazione del rendering: prefers-reduced-transparency

Gli utenti del tuo sito web potrebbero iniziare ad attivare la nuova funzionalità sperimentale CSS prefers-reduced-transparency sui propri dispositivi per indicare la loro preferenza di ridurre gli effetti trasparenti. Valuta se prendere in considerazione questa preferenza per migliorare l'accessibilità del tuo sito web. Per aiutarti, la scheda del riquadro a scomparsa Rendering ora può emulare l'impostazione prefers-reduced-transparency: reduce, così puoi prototipare una soluzione e testare il comportamento del tuo sito web in questo caso.

Per testare questa funzionalità in Chrome, attiva le funzionalità sperimentali della piattaforma web in chrome://flags.

Problema relativo a Chromium: 1424879.

Monitoraggio protocollo avanzato

Chrome DevTools utilizza il protocollo DevTools (CDP) di Chrome per analizzare, ispezionare, eseguire il debug e profilare i browser Chrome. Se sei uno sviluppatore Chromium o DevTools, il Monitor di protocollo ti consente di visualizzare tutte le richieste e le risposte CDP effettuate da DevTools e inviare i comandi CDP.

Protocol Monitor ha una nuova interfaccia per consentirti di creare e inviare più facilmente i comandi CDP. Ora non devi più cercare i comandi e i relativi parametri nella documentazione, grazie a DevTools te li suggerisce.

Nell'angolo in basso a destra della scheda a scomparsa Protocol monitor, fai clic su Mostra editor di comandi CDP, seleziona una destinazione, inizia a digitare un comando, seleziona uno dei suggerimenti suggeriti (se necessario), specifica i valori dei parametri e fai clic su Invia comando (Ctrl/Cmd + Invio).

Problema relativo a Chromium: 1469345.

Scaricare i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

• Inviaci un suggerimento o un feedback tramite crbug.com.
• Segnala un problema di DevTools utilizzando Altre opzioni   > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet all'indirizzo @ChromeDevTools.
• Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.