Novità di DevTools (Chrome 117)

Miglioramenti al riquadro Network

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

La funzionalità override locali è ora semplificata, così puoi simulare facilmente le intestazioni delle risposte e i contenuti web delle 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 gli override locali ma li hai disattivati, DevTools li attiva. Se non li hai ancora configurati, DevTools ti chiede di farlo nella barra delle azioni in alto. Seleziona una cartella in cui archiviare gli override e consenti l'accesso a DevTools.

Una volta configurate le sostituzioni, DevTools ti indirizza a Sources (Origini) > Overrides (Sostituzioni) > 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 vedere cosa è stato ignorato.

Problemi di Chromium: 1465785, 1470532, 1469359.

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

Ora puoi sostituire il contenuto delle richieste XHR e fetch, oltre alle intestazioni delle risposte. Con questi override, puoi simulare le risposte dell'API per eseguire il debug della tua pagina web anche se il backend e l'API non sono ancora pronti.

Attualmente DevTools supporta gli override dei contenuti per i seguenti tipi di richieste: immagini (ad esempio avif, png), caratteri, recupero e XHR, script (css e js) e documenti (html). DevTools ora disattiva l'opzione Override content per i tipi non supportati.

Problemi di Chromium: 792101, 1469776.

Nascondere le richieste di estensioni di Chrome

Per aiutarti a concentrarti sul codice che crei e a filtrare le richieste irrilevanti inviate dalle estensioni che potresti aver installato in Chrome, il riquadro Rete riceve un nuovo filtro.

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

Problemi di Chromium: 1257885, 1458803.

Codici di stato HTTP leggibili

Il codice di stato nell'intestazione della richiesta ora mostra un testo leggibile accanto ai codici di stato HTTP, in modo da poter capire più rapidamente cosa è successo alla richiesta.

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

Problema di Chromium: 1153956.

Formattare le risposte per i sottotipi JSON

La scheda Risposta per 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 formattarla.

Problema di Chromium: 406900.

Rendimento: visualizza le modifiche alla 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é solo la 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 Ottimizzare il caricamento delle risorse con l'API Fetch Priority.

Inoltre, puoi trovare le stesse informazioni nella colonna Priorità del riquadro Rete, con l'impostazione Righe di richieste di grandi dimensioni attivata.

Problemi di Chromium: 1463901, 1380964.

Impostazioni delle origini attivate per impostazione predefinita: ripiegamento del codice e visualizzazione automatica dei file

L'opzione Impostazioni > Preferenze > Raggruppamento del codice è ora attiva per impostazione predefinita. Questa opzione consente di comprimere i blocchi di codice.

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

Inoltre, l'opzione Impostazioni > Preferenze > Mostra automaticamente i file nella barra laterale è ora abilitata per impostazione predefinita.

Questa impostazione fa sì che l'albero dei file in Origini > Pagina selezioni il file corrente aperto nell'Editor quando cambi scheda.

Problemi di Chromium: 1459193, 1336599.

Debug migliorato dei problemi relativi ai cookie di terze parti

Nel tentativo di contribuire a creare un web più privato e parallelamente agli aggiornamenti di altri browser, Chrome ha introdotto l'iniziativa Privacy Sandbox. Questa iniziativa migliora radicalmente la privacy sul web e può sostenere un web sano supportato dalla pubblicità in modo da rendere obsoleti i cookie di terze parti. Privacy Sandbox ha una cronologia di ritiro 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 scoprire cosa fa questo flag, consulta Debug dei cookie.

Indipendentemente dal modo in cui esegui Chrome (con o senza il flag), la scheda Problemi ora ha la casella di controllo Includi problemi relativi ai cookie di terze parti attivata per impostazione predefinita per tutti i nuovi utenti di Chrome e, di conseguenza, segnala:

• Un avviso di modifica che causa interruzioni relativo al ritiro imminente.
• Problemi relativi ai cookie di terze parti.

Se vuoi visualizzare gli avvisi relativi ai cookie in merito all'imminente ritiro in qualità di utente Chrome esistente, assicurati di selezionare questa casella di controllo.

Per eseguire il test, esamina i cookie in questa pagina demo.

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

Problemi di Chromium: 1458839, 1462693, 1466310.

Eseguire il debug del precaricamento nel riquadro dell'applicazione

Il team di Chrome sta reintroducendo il prerendering completo delle pagine future che un utente probabilmente visiterà. Per consentirti di eseguire il debug, DevTools aggiunge la sezione Precaricamento al riquadro Applicazione. Il nuovo prefetching e prerendering (noti collettivamente come "precaricamento della navigazione") utilizza l'API Speculation Rules anziché i suggerimenti per le risorse basati sui link.

In questa pagina demo di prerendering, nella sezione Applicazione > Precaricamento, puoi esaminare:

• Regole di speculazione che elenca tutti i set di regole trovati nella pagina corrente.
• Precaricamenti che elenca tutti gli URL precaricati e prerenderizzati dai set di regole.
• Questa pagina che elenca lo stato di prerendering della pagina corrente.

Per saperne di più, consulta il post dedicato al debug delle regole di esecuzione speculativa.

Problema di Chromium: 1410709.

Nuovi colori

Potresti aver già notato che DevTools ha un nuovo look più in linea con Chrome. Uno dei fattori che contribuiscono a questo risultato è la nuova combinazione di colori.

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

Problema di Chromium: 1456677.

Lighthouse 10.4.0

Il riquadro Lighthouse ora esegue Lighthouse 10.4.0. In particolare, questa versione aggiunge nuovi controlli di accessibilità per:

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

Ad esempio:

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

Problema di Chromium: 772558.

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

L'estensione di debug WebAssembly C/C++ per DevTools è ora open source e si trova nel repository del frontend di DevTools. Questa estensione abilita le funzionalità di debug in DevTools per i programmi C++ compilati in WebAssembly. Per saperne di più, consulta Debug di C/C++ WebAssembly.

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

Problema di Chromium: 1410709.

Punti salienti vari

Di seguito sono riportati alcuni miglioramenti e correzioni 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 > Manifest ora ha una sezione Overlay dei controlli della finestra che verifica se nel manifest è presente un valore display_override e fornisce link alla documentazione pertinente.
• L'albero Origini > Pagina ora esegue le seguenti operazioni, incluse, a titolo esemplificativo (1442863):
  • Le cartelle vengono visualizzate in grigio se tutti i loro contenuti sono inclusi nell'elenco degli elementi da ignorare.
  • Colora le cartelle in arancione se tutti i loro contenuti provengono da una mappa delle fonti.
• Rendimento: le impostazioni di acquisizione ora vengono nascoste automaticamente quando avvii la registrazione (1455498).
• Fonti > Editor ha ripristinato il comportamento di Ctrl + Freccia (Windows) e Opzione + Freccia (macOS) (1468208).
• L'opzione di attivazione/disattivazione Animazioni > Sospendi tutto ora mantiene il suo stato durante i caricamenti di pagina (1446046).
• Applicazione > Spazio di archiviazione > Spazio di archiviazione cache spostato nella sezione Applicazione > Spazio di archiviazione > Cache (1462622).
• Alcuni testi e suggerimenti dell'interfaccia utente sono stati migliorati: suggerimento Concorrenza hardware, testi del filtro di rete e un'opzione del menu principale, uso delle maiuscole nella visualizzazione ad albero dell'applicazione, testi di Rete > Intestazioni, testi di Origini > Override e 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 dei media CSS prefers-reduced-transparency sui loro dispositivi per indicare la loro preferenza di ridurre gli effetti di trasparenza. Ti consigliamo di prendere in considerazione questa preferenza per aumentare l'accessibilità del tuo sito web. Per aiutarti, la scheda del riquadro Rendering ora può emulare l'impostazione prefers-reduced-transparency: reduce, in modo da poter prototipare una soluzione e testare il comportamento del tuo sito web in questo caso.

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

Problema di Chromium: 1424879.

Monitor di Protocol migliorato

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

Il monitor del protocollo ha una nuova interfaccia che ti consente di creare e inviare più facilmente i comandi CDP. Ora non devi cercare i comandi e i relativi parametri nella documentazione, DevTools te li suggerirà.

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

Problema di 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 di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altro argomento relativo a DevTools.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet a @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.