Novità di DevTools (Chrome 117)

Sofia Emelianova
Sofia Emelianova

Miglioramenti al riquadro Network

Esegui l'override dei contenuti web localmente ancora più velocemente

La funzionalità di override locali ora è semplificata, in modo da poter 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.

Le opzioni di override nel menu a discesa di una richiesta.

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

Seleziona una cartella e consenti l'accesso alla cartella nella barra delle azioni in alto.

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

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

Un'icona di override accanto a una richiesta nel riquadro Rete.

Problemi di Chromium: 1465785, 1470532, 1469359.

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

Ora puoi eseguire l'override dei contenuti delle richieste XHR e 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.

DevTools al momento 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 disattiva l'opzione Esegui l'override dei contenuti per i tipi non supportati.

Problemi di Chromium: 792101, 1469776.

Nascondi le richieste di estensioni di Chrome

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

Per filtrare tutte le richieste inviate a chrome-extension:// URL, seleziona Casella di controllo. Nascondi URL delle estensioni.

URL delle estensioni nascosti nella tabella delle richieste.

Problemi di Chromium: 1257885, 1458803.

Codici di stato HTTP leggibili da persone

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

I codici di stato HTTP leggibili prima e dopo visualizzati.

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

Problema di Chromium: 1153956.

Formatta le risposte per i sottotipi JSON

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

Il prima e il dopo l'analisi di un sottotipo di applicazione/json in un'anteprima della risposta di rete.

Problema di Chromium: 406900.

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

Il riquadro Prestazioni ora mostra due campi di priorità nel Riepilogo di un evento nella traccia Rete: Priorità iniziale e (finale) Priorità, anziché solo 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, vedi Ottimizzazione del caricamento delle risorse con l'API Fetch Priority.

Prima e dopo la visualizzazione delle modifiche alla priorità di recupero.

Inoltre, puoi trovare le stesse informazioni nella colonna Priority (Priorità) del riquadro Network, con l'impostazione Casella di controllo. Righe di richieste richieste abilitata.

La colonna Priorità nel riquadro Rete.

Problemi di Chromium: 1463901, 1380964.

Impostazioni delle origini abilitate per impostazione predefinita: piegatura del codice e rivelazione automatica dei file

L'opzione Impostazioni. Impostazioni > Preferenze > Casella di controllo. Ripiegamento del codice è ora attivata per impostazione predefinita. Questa opzione consente di comprimere 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 Comprimi.. Fai clic su {...} per espandere nuovamente il blocco.

Inoltre, Impostazioni. Impostazioni > Preferenze > Casella di controllo. Mostra automaticamente i file nella barra laterale è ora attivata per impostazione predefinita.

Con questa impostazione, la struttura dei file in Origini > Pagina selezionerà il file corrente aperto in 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 in parallelo con gli aggiornamenti di altri browser, Chrome ha introdotto l'iniziativa Privacy Sandbox. Questa iniziativa migliora sostanzialmente la privacy sul web e può sostenere un web sano e con pubblicità in modo da rendere obsoleti i cookie di terze parti. Privacy Sandbox ha una sequenza temporale graduale di eliminazione graduale per consentirti di adattarti comodamente ai cambiamenti.

Puoi già verificare il comportamento di Chrome dopo la graduale eliminazione dei cookie di terze parti. Per farlo, esegui Chrome dalla riga di comando con il flag --test-third-party-cookies-phaseout. Per informazioni sulla 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 Casella di controllo. Includi problemi di cookie di terze parti è attivata per impostazione predefinita per tutti i nuovi utenti di 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 relativi ai cookie relativi all'imminente ritiro graduale come utente Chrome esistente, assicurati di selezionare questa casella di controllo.

Per verificare, controlla i cookie in questa pagina demo.

Problemi relativi ai cookie di terze parti segnalati nella scheda Problemi.

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

La casella di controllo è abilitata e mostra solo le richieste con cookie di risposta bloccati.

Problemi di Chromium: 1458839, 1462693, 1466310.

Precaricamento di debug nel riquadro Applicazione

Il team di Chrome sta restituendo il prerendering completo delle pagine future che è probabile che un utente visiti. Per consentirti di eseguire il debug, DevTools aggiunge la sezione Precaricamento al riquadro Applicazione. Il nuovo precaricamento e il prerendering (noti collettivamente come "precaricamento di navigazione") utilizzano l'API Speculation Rules anziché gli suggerimenti delle risorse basati 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 che elenca tutti gli URL precaricati e sottoposti a prerendering provenienti dalle serie di regole.
  • Questa pagina, che elenca lo stato sottoposto a prerendering della pagina corrente.

Per saperne di più, consulta il post dedicato sul debug delle regole di speculazione.

Problema di Chromium: 1410709.

Nuovi colori

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

Il prima e dopo l'applicazione di nuovi colori.

Questa versione (117) introduce ulteriori miglioramenti dell'esperienza utente in DevTools, già menzionati e ulteriormente elencati, 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, in questa versione sono stati aggiunti nuovi controlli dell'accessibilità per i seguenti elementi:

Ad esempio:

Impossibile verificare il colore dei link che li rende indistinguibili.

Vedi 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 di Chromium: 772558.

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

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

Scopri come creare, eseguire e testare l'estensione e contribuire liberamente.

Problema di Chromium: 1410709.

Varie in evidenza

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

  • Nesting CSS: il riquadro Elementi ora mostra l'intera catena di selettore per gli elementi secondari nidificati (1172985).
  • In Applicazione > Manifest è ora disponibile la sezione Overlay dei controlli finestra che verifica se nel manifest è presente un valore display_override e fornisce i link alla documentazione pertinente.
  • L'albero Origini > Pagina ora esegue le seguenti operazioni, incluso, a titolo esemplificativo, (1442863):
    • Disattiva le cartelle se tutti i relativi contenuti sono inclusi nell'elenco degli 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).
  • Origini > Editor ha ripristinato il comportamento Ctrl + Freccia (Win) e Opzione + Freccia (MacO) (1468208).
  • Il pulsante di attivazione/disattivazione Animazioni > Metti in pausa tutto ora mantiene il proprio stato nei vari caricamenti pagina (1446046).
  • Applicazione > Spazio di archiviazione > Spazio di archiviazione cache spostato in Applicazione > Spazio di archiviazione > Sezione Cache (1462622).
  • Alcuni testi e descrizioni comando dell'interfaccia utente sono stati migliorati: descrizione comando contemporaneità hardware, testi dei filtri di rete e un'opzione di menu principale, lettere maiuscole nella visualizzazione ad albero delle applicazioni, Rete > Testi intestazioni, Origini > Testi del file system e override.

Nuove funzionalità sperimentali

Nuova emulazione del rendering: prefers-reduced-transparency

Gli utenti del tuo sito web possono iniziare ad attivare sui propri dispositivi la nuova funzionalità multimediale CSS prefers-reduced-transparency sperimentale per indicare la loro preferenza di ridurre gli effetti trasparenti. Ti consigliamo di 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 di Chromium: 1424879.

Monitoraggio protocollo avanzato

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

Monitoraggio 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, DevTools te li suggerirà.

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

Specifica e invia un comando CDP.

Problema di Chromium: 1469345.

Scarica 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à di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema DevTools utilizzando Altre opzioni   Altre   > Guida > Segnala i problemi di DevTools in DevTools.
  • Tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.

Novità di DevTools

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

Chrome 123

Chrome 122

Guida introduttiva di Chrome

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Versione 115 di Chrome

Chrome 114

Chrome 113

Chrome 112

Guida introduttiva di Chrome

Versione 110 di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome versione 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome versione 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome versione 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59