Novità di DevTools (Chrome 115)

Sofia Emelianova
Sofia Emelianova
GitHub

Miglioramenti agli elementi

Nuovo badge per la griglia secondaria CSS

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

Per ispezionare e 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 un overlay che mostra colonne, righe e relativi numeri sopra l'elemento nel viewport.

Il badge della sottogriglia e l'overlay nel viewport.

Per l'elenco di tutti i badge nel riquadro Elementi, consulta la sezione Informazioni di riferimento sui 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 specifico in una descrizione comando.

Una descrizione comando con il peso specifico 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 vuole esprimere la propria gratitudine a 一丝 e Suyan per aver implementato questo miglioramento.

Problema di Chromium: 1380779.

Miglioramenti alle origini

Evidenziazione della sintassi CSS

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

Miglioramento dell'evidenziazione della sintassi CSS e del supporto degli editor in linea nelle origini.

Problemi di Chromium: 1302261, 1392085.

Scorciatoia per impostare i punti di interruzione condizionali

Ora puoi impostare più velocemente i breakpoint condizionali con una scorciatoia. Per aprire la finestra di dialogo del punto di interruzione, tieni premuto Comando (macOS) o Control (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 Mitigazioni del monitoraggio dei tassi di abbandono in Chrome ti consente di identificare ed eliminare lo stato dei siti che sembrano eseguire il monitoraggio tra siti utilizzando la tecnica di monitoraggio dei tassi di abbandono. Il riquadro Applicazione > Servizi in background include una nuova scheda Mitigazioni del monitoraggio dei rilanci che consente di forzare manualmente le mitigazioni del monitoraggio e di elencare 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 attiva l'opzione.
  2. In chrome://flags, imposta l'esperimento Mitigazioni del monitoraggio del rimbalzo su Attivato con eliminazione.
  3. Esamina questa pagina di demo, apri Applicazione > Servizi in background > Mitigazioni del monitoraggio dei giri a vuoto, fai clic su un link di abbandono nella pagina, attendi 10 secondi affinché Chrome registri il ribaltamento e fai clic su Esegui forzatamente per eliminare immediatamente lo stato.

La pagina Mitigazioni del monitoraggio del rimbalzo elenca un'eliminazione di stato.

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

Problema di Chromium: 1432303.

Lighthouse 10.2.0

Il pannello Lighthouse ora esegue Lighthouse 10.2.0. In particolare, il controllo Largest Contentful Paint restituisce una tabella con i calcoli delle fasi per il throttling simulato e di DevTools. Consulta anche l'elenco completo delle modifiche.

La tabella della fase LCP.

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.

Ignorare gli script di contenuti per impostazione predefinita

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

Con questa impostazione attivata:

  • Il debugger ignora questi script e non si interrompe in corrispondenza delle eccezioni che hanno generato.
  • Il riquadro Origini > Pila chiamate salta 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 tracce dello stack. Fai clic su Mostra altri N fotogrammi per espandere e su Mostra meno per comprimere di nuovo.

Script di contenuti inseriti da estensioni attivati per impostazione predefinita. Per trovarla, vai a Impostazioni e poi a Elenco ignorati.

Inoltre, le caselle di controllo in Elenco di ignorati sono state rese più chiare.

Problemi di Chromium: 1440958, 1364501.

Rete > Stampa in formato leggibile della risposta per impostazione predefinita

Il riquadro Rete > Risposta ora stampa in un formato leggibile i corpi delle risposte minimizzate 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 in base alla sintassi.

Evidenziazione della sintassi SVG.

Problemi di Chromium: 1382752, 1385374.

Altri punti salienti

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

  • Impostazioni. Impostazioni > Dispositivi: è stata aggiunta Facebook per Android v407 su Pixel 6 all'elenco delle stringhe dell'agente.
  • Rete: è stata aggiunta la scorciatoia Svuota 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 ora sono nascosti nella struttura del navigatore (1386059).
  • Rendimento: è stata corretta la visualizzazione errata del canale Interazioni espandibile (1432510).
  • Elements: gli stili non caricati sono ora sottolineati con linee ondulate (1440626).
  • Il debugger non esegue automaticamente il passaggio in WebAssembly quando non è presente un plug-in per la rispettiva lingua (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 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.

Novità di DevTools

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