Novità di DevTools (Chrome 115)

Sofia Emelianova
Sofia Emelianova

Miglioramenti degli elementi

Nuovo badge della griglia secondaria CSS

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

Per esaminare ed eseguire il debug di una griglia nidificata che è una sottogriglia e che quindi eredita il numero e le dimensioni delle tracce dalla griglia principale, fai clic sul badge. Attiva/disattiva una sovrapposizione che mostra colonne, righe e i relativi numeri sopra l'elemento nel riquadro di visualizzazione.

Il badge della sottogriglia e l'overlay nella visualizzazione.

Per l'elenco di tutti i badge nel riquadro Elementi, consulta il riferimento ai badge.

Problema di Chromium: 1442536.

Specificità del selettore nelle descrizioni comando

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

Una descrizione comando con il peso di specificità di un selettore.

Problema di 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 di DevTools desidera esprimere la propria gratitudine a 一丝 e Suyan per aver implementato questo miglioramento.

Problema di Chromium: 1380779.

Miglioramenti alle fonti

Evidenziazione della sintassi CSS

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

Miglioramento dell'evidenziazione della sintassi CSS e del supporto degli editor inline in Sources.

Problemi di Chromium: 1302261, 1392085.

Scorciatoia per impostare punti di interruzione condizionali

Ora puoi impostare punti di interruzione condizionali più rapidamente con 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 a sinistra e la finestra di dialogo del punto di interruzione.

Problema di Chromium: 1405767.

Applicazione > Mitigazioni del monitoraggio del rimbalzo

L'esperimento Bounce Tracking Mitigations in Chrome ti consente di identificare ed eliminare lo stato dei siti che sembrano eseguire il monitoraggio cross-site utilizzando la tecnica di monitoraggio del rimbalzo. Il riquadro Applicazione > Servizi in background presenta una nuova scheda Mitigazioni del monitoraggio dei rimbalzi 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. Vai a Menu con tre puntini. > Impostazioni > Sicurezza Privacy e sicurezza > Cookie e altri dati dei siti > Pulsante di opzione selezionato. Blocca cookie di terze parti e attivala.
  2. In chrome://flags, imposta l'esperimento Mitigazioni del monitoraggio del rimbalzo su Attivato con eliminazione.
  3. Ispeziona 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 Esegui forzatamente per eliminare immediatamente lo stato.

Mitigazioni del monitoraggio del rimbalzo elenca un'eliminazione dello stato.

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

Problema di Chromium: 1432303.

Lighthouse 10.2.0

Il riquadro Lighthouse ora esegue Lighthouse 10.2.0. In particolare, il controllo Largest Contentful Paint mostra 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 scoprire le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Problema di Chromium: 772558.

Ignorare gli script di contenuti per impostazione predefinita

L'opzione Impostazioni. Impostazioni > Elenco Ignora > Casella di controllo. Script di contenuti inseriti da estensioni è ora attivata per impostazione predefinita.

Con questa impostazione attiva:

  • Il Debugger ignora questi script e non si interrompe in corrispondenza delle eccezioni che hanno generato.
  • Il riquadro Origini > Call Stack ignora i frame ignorati. Per disattivare il salto qui, seleziona Casella di controllo. Mostra frame nell'elenco di elementi da ignorare.
  • La console comprime i frame ignorati nelle analisi dello stack. Fai clic su Mostra altri N fotogrammi per espandere e su Mostra meno per comprimere di nuovo.

Gli script di contenuti inseriti dalle estensioni sono attivati per impostazione predefinita. Per trovarla, vai a Impostazioni, poi Elenco ignorati.

Inoltre, le caselle di controllo in Elenco ignorati hanno un testo più chiaro.

Problemi di Chromium: 1440958, 1364501.

Rete > Formattazione avanzata della risposta per impostazione predefinita

Il riquadro Rete > Risposta ora stampa in modo leggibile i corpi delle risposte minimizzati per impostazione predefinita, in modo simile al riquadro Origini.

È stata attivata la stampa in formato leggibile nella finestra Risposta della scheda Rete.

Inoltre, i file SVG vengono evidenziati con la sintassi.

Evidenziazione della sintassi SVG.

Problemi di Chromium: 1382752, 1385374.

Punti salienti vari

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

  • Impostazioni. Impostazioni > Dispositivi: è stato aggiunto Facebook per Android v407 su Pixel 6 all'elenco delle stringhe dell'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 sulle prestazioni (1414773).
  • I fogli di stile che non sono stati caricati sono ora nascosti nell'albero del navigatore (1386059).
  • Rendimento: è stato corretto il rendering errato della traccia espandibile Interazioni (1432510).
  • Elementi: i fogli di stile che non sono stati caricati ora sono sottolineati con linee ondulate (1440626).
  • Il Debugger non interviene automaticamente in WebAssembly quando non è presente alcun plug-in per la lingua corrispondente (1443342).
  • La scorciatoia che sposta il cursore di una parola alla volta è stata 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 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.

Novità di DevTools

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