Novità di DevTools (Chrome 115)

Miglioramenti degli elementi

Nuovo badge CSS subgrid

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 dal relativo elemento principale, fai clic sul badge. Attiva/disattiva una sovrapposizione che mostra colonne, righe e i relativi numeri sopra l'elemento nel riquadro di 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.

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.

Il team di DevTools desidera esprimere la propria gratitudine a 一丝 e Suyan per aver implementato questo miglioramento.

Problema di Chromium: 1380779.

Miglioramenti delle fonti

Evidenziazione della sintassi CSS

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

• Evidenziazione della sintassi.
• Supporto degli editor in linea. Questi editor sono simili a quelli in Elementi > Stili, ad esempio Selettore colore e Editor di interpolazione.

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 Command (macOS) o Control (Windows / Linux) e fai clic sul numero di riga nella colonna a sinistra di Sources (Origini) > Editor.

Problema di 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 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 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 > Impostazioni > Privacy e sicurezza > Cookie e altri dati dei siti > 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.

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 ottiene una tabella con i calcoli delle fasi per la limitazione simulata e di DevTools. Consulta anche l'elenco completo delle modifiche.

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 > Elenco Ignora > 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 Mostra frame nell'elenco di elementi da ignorare.
• La console comprime i frame ignorati negli stack trace. Fai clic su Mostra altri N fotogrammi per espandere e su Mostra meno per comprimere di nuovo.

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

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.

Inoltre, i file SVG vengono evidenziati con la sintassi.

Problemi di Chromium: 1382752, 1385374.

Punti salienti vari

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

• 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.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet a @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

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