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 e che quindi eredita il numero e le dimensioni delle tracce dalla griglia 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 in Elementi > Stili, ad esempio Selettore colori ed Easing Editor.

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 della sezione 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. L'Applicazione > Il riquadro Servizi in background presenta una nuova scheda Mitigazioni del monitoraggio del rimbalzo che ti 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. Vai a 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. Controlla 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

La funzionalità Impostazioni. Impostazioni > Elenco di persone da ignorare > Casella di controllo. Gli script di contenuti inseriti dalle estensioni ora sono attivati per impostazione predefinita.

Con questa impostazione attivata:

  • Il Debugger ignora questi script e non si ferma in caso di eccezioni da essi generate.
  • Nella sezione Fonti > Il riquadro 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 molto stampata per impostazione predefinita

La Rete > Il riquadro Risposta ora stampa i corpi di risposta minimizzati per impostazione predefinita, 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 delle stringhe agente.
  • Rete: è stata aggiunta la scorciatoia Cancella log di rete (1444991):
    • MacOS: Comando + K
    • Windows/Linux: Ctrl + L
  • Hai rimosso il Registratore > Registrazione N > Opzione del menu a discesa 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 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   Altro > 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.