Novità di DevTools (Chrome 115)

Sofia Emelianova
Sofia Emelianova

Miglioramenti agli elementi

Nuovo badge griglia secondaria CSS

Il riquadro Elementi riceve un nuovo badge subgrid per subgrid. Questa funzionalità è attualmente sperimentale in Chrome Canary.

Per ispezionare ed eseguire il debug di una griglia nidificata che è una griglia secondaria, che eredita quindi il numero e le dimensioni delle tracce da quella principale, fai clic sul badge. Attiva/disattiva un overlay che mostra colonne, righe e i relativi numeri sopra l'elemento nell'area visibile.

Il badge della griglia secondaria e l'overlay nell'area visibile.

Per l'elenco di tutti i badge nel riquadro Elementi, consulta la documentazione di riferimento per i badge.

Problema relativo a Chromium: 1442536.

Specificità del selettore nelle descrizioni comando

In Elementi > Stili, passa il mouse sopra il nome di un selettore per visualizzarne la ponderazione di specificità in una descrizione comando.

Una descrizione comando con ponderazione per la specificità di un selettore.

Problema relativo a Chromium: 1204932.

Valori delle proprietà CSS personalizzate nelle descrizioni comando

In Elementi > Stili, passa il mouse sopra il nome di una proprietà CSS personalizzata per visualizzarne il valore in una descrizione comando.

La descrizione comando con un valore della proprietà CSS personalizzata.

Il team DevTools vorrebbe esprimere la propria gratitudine a Fare 丝 e Suyan per aver ottenuto questo miglioramento.

Problema relativo a Chromium: 1380779.

Miglioramenti alle fonti

Evidenziazione della sintassi CSS

Il riquadro Origini riporta quanto segue per i file CSS pre-elaborati, come SASS, SCSS e LESS:

  • Evidenziazione della sintassi.
  • Supporto per gli editor in linea. Questi editor sono simili a quelli presenti in Elementi > Stili, ad esempio Selettore colori ed Editor Easing.

Miglioramento dell'evidenziazione della sintassi CSS e supporto degli editor incorporati nelle origini.

Problemi relativi a Chromium: 1302261, 1392085.

Scorciatoia per impostare punti di interruzione condizionali

Ora puoi impostare punti di interruzione condizionali più velocemente grazie a una scorciatoia. Per aprire la finestra di dialogo del punto di interruzione, tieni premuto Comando (MacOS) o Controllo (Windows / Linux) e fai clic sul numero di riga nella colonna a sinistra di Origini > Editor.

Il numero di riga nella colonna di sinistra e la finestra di dialogo del punto di interruzione.

Problema relativo a Chromium: 1405767.

Applicazione > Mitigazioni del monitoraggio del rimbalzo

L'esperimento Mitigazioni del monitoraggio del rimbalzo in Chrome ti consente di identificare ed eliminare lo stato dei siti che sembrano eseguire il monitoraggio tra siti utilizzando la tecnica di monitoraggio del rimbalzo. Il riquadro Applicazione > Servizi in background include una nuova scheda Mitigazioni del monitoraggio del rimbalzo, che consente di forzare manualmente le mitigazioni del monitoraggio ed elenca i siti i cui stati sono stati eliminati.

Dai un'occhiata a questa funzionalità di sicurezza:

  1. Blocca i cookie di terze parti in Chrome. Seleziona e attiva Menu con tre puntini. > Impostazioni > Sicurezza Privacy e sicurezza > Cookie e altri dati dei siti > Pulsante di opzione selezionato. Blocca cookie di terze parti.
  2. In chrome://flags, imposta l'esperimento Mitigazioni del monitoraggio del rimbalzo su Attivato con l'eliminazione.
  3. Esamina questa pagina demo, apri Applicazione > Servizi in background > Mitigazioni del monitoraggio del rimbalzo, fai clic su un link di rimbalzo nella pagina, attendi (10 secondi) che Chrome registri il rimbalzo e fai clic su Forza esecuzione per eliminare immediatamente lo stato.

La mitigazione del monitoraggio del rimbalzo elenca un'eliminazione dello stato.

Inoltre, la scheda Problemi ti avvisa dell'imminente eliminazione dello stato.

Problema relativo a Chromium: 1432303.

Lighthouse 10.2.0

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 10.2.0. In particolare, il controllo Largest Contentful Paint, genera una tabella con i calcoli delle fasi per la limitazione simulata e di DevTools. Consulta anche l'elenco completo delle modifiche.

La tabella delle fasi LCP.

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.

Ignora gli script di contenuti per impostazione predefinita

Impostazioni. Impostazioni > Elenco di utenti ignorati > Casella di controllo. Script di contenuti inseriti dalle estensioni ora è attivata per impostazione predefinita.

Con questa impostazione attivata:

  • Il Debugger ignora questi script e non si ferma in caso di eccezioni da essi generate.
  • Il riquadro Origini > Stack di chiamate ignora i frame ignorati. Per disattivare questa opzione, seleziona Casella di controllo. Mostra frame inclusi nell'elenco di elementi da ignorare.
  • La console comprime i frame ignorati nelle analisi dello stack. Fai clic su Mostra altri N frame per espandere e su Mostra meno per comprimerlo di nuovo.

Script di contenuti inseriti da estensioni attivate per impostazione predefinita. Per trovarlo, vai a Impostazioni e seleziona Elenco Ignora.

Inoltre, le caselle di controllo in Elenco di persone da ignorare hanno ottenuto un testo più chiaro.

Problemi relativi a Chromium: 1440958, 1364501.

Rete > Risposta in tempo reale per impostazione predefinita

Per impostazione predefinita, il riquadro Rete > Risposta ora stampa abbastanza corpi di risposta minimizzati, come nel riquadro Origini.

È stata attivata la creazione di abbastanza stampate nella finestra di risposta della scheda Rete.

Inoltre, i file SVG sono dotati di evidenziazione della sintassi.

Evidenziazione della sintassi SVG.

Problemi relativi a Chromium: 1382752, 1385374.

Varie in evidenza

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

  • Impostazioni. Impostazioni > Dispositivi: è stato aggiunto Facebook per Android v407 su Pixel 6 all'elenco di stringhe agente.
  • Rete: è stata aggiunta la scorciatoia Cancella log di rete (1444991):
    • MacOS: Comando + K
    • Windows/Linux: Ctrl + L
  • È stata rimossa l'opzione del menu a discesa Registratore > Registrazione N > Riquadro Informazioni sul rendimento (1414773).
  • I fogli di stile che non sono stati caricati vengono ora nascosti nell'albero del navigatore (1386059).
  • Rendimento: è stata corretta la visualizzazione errata della traccia Interactions espandibile (1432510).
  • Elementi: i fogli di stile che non sono stati caricati vengono ora sottolineati con linee ondulate (1440626).
  • Il Debugger non esegue automaticamente un passaggio in WebAssembly se non è presente alcun plug-in per il rispettivo linguaggio (1443342).
  • La scorciatoia che sposta il cursore di una parola alla volta viene ripristinata per i file CSS in Origini > Editor (1241848):
    • MacOS: Alt + Freccia
    • Windows/Linux: Ctrl + Freccia

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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando Altre opzioni   Altre   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome - Guida introduttiva

Chrome - Guida introduttiva

Guida introduttiva di Chrome

Chrome 100

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 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome 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 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59