Novità di DevTools (Chrome 117)

Miglioramenti al riquadro Rete

Sostituisci i contenuti web in locale ancora più velocemente

La funzionalità di sostituzione locale è ora semplificata, quindi puoi simulare facilmente le intestazioni di risposta e i contenuti web delle risorse remote dal riquadro Rete senza accedervi.

Per sostituire i contenuti web, apri il riquadro Rete, fai clic con il tasto destro del mouse su una richiesta e seleziona Sostituisci contenuti.

Se hai configurato le sostituzioni locali, ma sono disattivate, DevTools le attiva. Se non li hai ancora configurati, DevTools ti chiederà di farlo nell'apposita barra in alto. Seleziona una cartella in cui archiviare le sostituzioni e consenti a DevTools di accedervi.

Una volta configurate le sostituzioni, DevTools ti reindirizza a Origini > Sostituzioni > Editor per consentirti di sostituire i contenuti web.

Tieni presente che le risorse sostituite sono indicate con nel riquadro Rete. Passa il mouse sopra l'icona per vedere cosa viene sostituito.

Problemi di Chromium: 1465785, 1470532, 1469359.

Sostituire i contenuti delle richieste XHR e fetch

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

Attualmente DevTools supporta le sostituzioni dei contenuti per i seguenti tipi di richieste: immagini (ad esempio avif, png), caratteri, fetch e XHR, script (CSS e JS) e documenti (HTML). Ora DevTools rende in grigio l'opzione Sostituisci contenuti per i tipi non supportati.

Problemi di Chromium: 792101, 1469776.

Nascondere le richieste di estensioni di Chrome

Per aiutarti a concentrarti sul codice che scrivi e filtrare le richieste irrilevanti inviate dalle estensioni che potresti aver installato in Chrome, il riquadro Rete dispone di 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 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.

Stampa in un formato leggibile delle 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 renderla più leggibile.

Problema di Chromium: 406900.

Prestazioni: 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 nel canale Rete: Priorità iniziale e Priorità (finale), anziché solo la singola 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 abilitate per impostazione predefinita: Compilazione del codice e Visualizzazione automatica dei file

L'opzione Impostazioni > Preferenze > Compilazione del codice è ora attiva per impostazione predefinita. Questa opzione ti 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 chiusura . Fai clic su {...} per espandere di nuovo il blocco.

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

Questa impostazione consente alla struttura ad albero dei file in Origini > Pagina di selezionare il file corrente aperto nell'Editor quando cambi scheda.

Problemi di Chromium: 1459193, 1336599.

Miglioramento del debug dei problemi relativi ai cookie di terze parti

Nell'intento di contribuire a creare un web più privato e in parallelo con gli aggiornamenti di altri browser, Chrome ha introdotto l'iniziativa Privacy Sandbox. Questa iniziativa migliora in modo fondamentale 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 prevede una tempistica graduale di ritiro per consentirti di adattarti facilmente 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 la funzione di questo flag, consulta Cookie di debug.

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

• Un avviso relativo a una modifica che comporta un interruzione del servizio e che verrà ritirata a breve.
• Problemi relativi ai cookie di terze parti.

Se vuoi visualizzare gli avvisi sui cookie relativi al ritiro imminente in qualità di utente Chrome esistente, assicurati di selezionare questa casella di controllo.

Per eseguire il test, controlla i cookie in questa pagina dimostrativa.

Inoltre, il filtro Cookie di risposta bloccati nel riquadro Rete è stato riformulato per chiarire 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 reintegrando il prerendering completo delle pagine future che un utente potrebbe visitare. Per consentirti di eseguire il debug, DevTools aggiunge la sezione Precaricamento al riquadro Applicazione. Il nuovo pre-caricamento e il pre-rendering (noti collettivamente come "pre-caricamento della navigazione") utilizzano l'API Speculation Rules anziché i suggerimenti sulle risorse basati su link.

In questa pagina di demo, nella sezione Application > Preloading, puoi controllare:

• Regole di speculazione, che elenca tutti i set di regole trovati nella pagina corrente.
• Precaricamenti che elencano tutti gli URL prerecuperati e pre-visualizzati dagli insiemi di regole.
• Questa pagina, che elenca lo stato di prerendering della pagina corrente.

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

Problema di Chromium: 1410709.

Nuovi colori

Potresti aver già notato che DevTools ora ha un aspetto rinnovato più in linea con Chrome. Un fattore che contribuisce è la nuova combinazione di colori.

Questa versione (117) introduce ulteriori miglioramenti all'esperienza utente di DevTools, sia quelli già menzionati che 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 conoscere 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 di WebAssembly C/C++ per DevTools è ora open source

L'estensione di debug di WebAssembly C/C++ per DevTools è ora open source e si trova nel repository frontend di DevTools. Questa estensione abilita le funzionalità di debug in DevTools per i programmi C++ compilati in WebAssembly. Per ulteriori informazioni, consulta Eseguire il debug di WebAssembly C/C++.

Scopri come creare, eseguire e testare l'estensione e non esitare a dare il tuo contributo.

Problema di Chromium: 1410709.

Altri punti salienti

Di seguito sono riportate alcune correzioni e miglioramenti significativi di questa release:

• Nidificazione CSS: il riquadro Elementi ora mostra l'intera catena di selettori per gli elementi secondari nidificati (1172985).
• Application > Manifest ora contiene una sezione Window Controls Overlay (Overlay dei controlli della finestra) che verifica se nel file manifest è presente un valore display_override e fornisce link alla documentazione pertinente.
• L'albero Origini > Pagina ora esegue le seguenti operazioni, tra cui, a titolo esemplificativo (1442863):
  • Le cartelle vengono visualizzate in grigio se tutti i relativi contenuti sono inclusi nell'elenco di elementi da ignorare.
  • Colora le cartelle in arancione se tutti i contenuti provengono da una mappa delle origini.
• Prestazioni: le Impostazioni di acquisizione ora si nascondono automaticamente quando avvii la registrazione (1455498).
• Origini > Editor è stato ripristinato il comportamento Ctrl + Freccia (Windows) e Alt + Freccia (macOS) (1468208).
• L'opzione di attivazione/disattivazione Animazioni > Metti in pausa tutto ora mantiene il proprio stato durante i caricamenti della pagina (1446046).
• Applicazione > Spazio di archiviazione > Spazio di archiviazione della cache spostato in Applicazione > Spazio di archiviazione > Sezione Cache (1462622).
• Sono stati migliorati alcuni testi e descrizioni comando dell'interfaccia utente: descrizione comando della concorrenza hardware, testi dei filtri di rete e un'opzione del menu principale, lettere maiuscole nella visualizzazione ad albero delle applicazioni, testi di Rete > Intestazioni, testi di Origini > Sostituzioni e Sistema file.

Nuove funzionalità sperimentali

Nuova emulazione di rendering: prefers-reduced-transparency

Gli utenti del tuo sito web potrebbero iniziare ad attivare la nuova prefers-reduced-transparency funzionalità multimediale CSS sperimentale sui propri dispositivi per indicare la loro preferenza per la riduzione degli effetti trasparenti. 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 realizzare il prototipo di una soluzione e testare il comportamento del tuo sito web in questo caso.

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

Problema di Chromium: 1424879.

Monitor di Protocol avanzato

Chrome DevTools utilizza il Chrome DevTools Protocol (CDP) per eseguire l'instrumentazione, l'ispezione, il debug e il profiling dei browser Chrome. Se sei uno sviluppatore di Chromium o DevTools, Protocol Monitor 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 più cercare i comandi e i relativi parametri nella documentazione, perché DevTools te li suggerisce.

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

Problema di Chromium: 1469345.

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

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

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

Novità di DevTools

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