Novità di DevTools (Chrome 105)

Jecelyn Yeen

Riproduzione passo passo nel Registratore

Ora puoi impostare un punto di interruzione e riprodurre passo passo un flusso utente nel riquadro Registratore.

Per impostare un punto di interruzione, fai clic sul punto blu accanto a un passaggio. Riproduci di nuovo il flusso utente. La riproduzione verrà messa in pausa prima di eseguire il passaggio. Da qui puoi continuare la riproduzione, eseguire un passaggio o annullarla.

Con questa funzionalità puoi visualizzare e eseguire il debug del flusso utente in tutta semplicità.

Per ulteriori informazioni, consulta le Informazioni di riferimento sulle funzionalità di Registratore.

Riproduzione passo passo nel Registratore

Problema di Chromium: 1257499

Supporto dell'evento di passaggio del mouse nel riquadro Registratore

L'app Registratore ora supporta l'aggiunta manuale di un passaggio con passaggio del mouse (tasto di scorrimento) in una registrazione.

Questa demo mostra un menu popup al passaggio del mouse. Prova a registrare un flusso utente e fai clic su un elemento del menu.

Se riproduci di nuovo il flusso utente ora, non andrà a buon fine perché Recorder non acquisisce automaticamente gli eventi di passaggio del mouse durante la registrazione. Per risolvere il problema, aggiungi un passaggio manualmente passando il mouse sopra il selettore prima di fare clic sulla voce del menu.

Supporto dell'evento di passaggio del mouse nel Registratore

Problema di Chromium: 1257499

Largest Contentful Paint (LCP) nel riquadro Approfondimenti sulle prestazioni

L'LCP è un'importante metrica incentrata sull'utente per misurare la velocità di caricamento percepita. Ora puoi scoprire i percorsi critici e le cause principali di un Largest Contentful Paint (LCP).

In una registrazione del rendimento, fai clic sul badge LCP nella Cronologia. Nel riquadro Dettagli, puoi visualizzare il punteggio LCP, scoprire come correggere le risorse che rallentano l'LCP e vedere il percorso critico per la risorsa LCP.

Consulta Approfondimenti sul rendimento per scoprire come ottenere informazioni strategiche e migliorare il rendimento del tuo sito web con il riquadro.

LCP nel riquadro Approfondimenti sul rendimento

Problema di Chromium: 1326481

Identificare i lampi di testo (FOIT, FOUT) come potenziali cause principali dei cambiamenti di layout

Il riquadro Approfondimenti sul rendimento ora rileva il lampo di testo invisibile (FOIT) e il lampo di testo non formattato (FOUT) come potenziali cause principali delle variazioni del layout.

Per visualizzare le potenziali cause principali di una variazione del layout, fai clic su uno screenshot nel canale Variazioni del layout.

Consulta l'articolo Ottimizzare il caricamento e il rendering di WebFont per scoprire la tecnica per impedire le variazioni del layout.

FOUT nel riquadro Informazioni sulle prestazioni

Problemi di Chromium: 1334628, 1328873

Gestori di protocollo nel riquadro Manifest

Ora puoi utilizzare DevTools per testare la registrazione del gestore di protocollo URL per le app web progressive (PWA).

La registrazione del gestore di protocollo URL consente alle PWA installate di gestire i link che utilizzano un protocollo specifico (ad es. magnet, web+example) per un'esperienza più integrata.

Vai alla sezione Protocol Handlers (Gestione protocolli) tramite il riquadro Application (Applicazione) > Manifest (Manifesto). Puoi visualizzare e testare tutti i protocolli disponibili qui.

Ad esempio, installa questa PWA dimostrativa. Nella sezione Gestori di protocollo, digita "caffè americano" e fai clic su Testa protocollo per aprire la pagina del caffè nella PWA.

Gestori di protocollo nel riquadro Manifest

Problemi di Chromium: 1300613

Badge del livello superiore nel riquadro Elementi

Utilizza il badge del livello superiore per comprendere il concetto di livello superiore e visualizzare la modifica dei contenuti del livello superiore.

L'elemento <dialog> è diventato di recente stabile su tutti i browser. Quando apri una finestra di dialogo, questa viene inserita in un livello superiore. I contenuti di primo livello vengono visualizzati sopra tutti gli altri contenuti.

In questa demo, fai clic su Apri finestra di dialogo.

Per facilitare la visualizzazione degli elementi del livello superiore, DevTools aggiunge un contenitore del livello superiore (#top-layer) all'albero DOM. Si trova dopo il tag di chiusura </html>.

Per passare dall'elemento contenitore del livello superiore all'elemento dell'albero del livello superiore, fai clic sul pulsante Mostra accanto all'elemento o al suo sfondo nel contenitore del livello superiore.

Accanto all'elemento dell'albero del livello superiore (ad esempio l'elemento della finestra di dialogo), fai clic sul badge livello-superiore per passare al contenitore del livello superiore.

Badge del livello superiore nel riquadro Elementi

Problema di Chromium: 1313690

Allega le informazioni di debug di Wasm in fase di runtime

Ora puoi allegare informazioni di debug DWARF per wasm durante l'esecuzione. In precedenza, il riquadro Origini supportava solo l'attacco delle mappe di origine ai file JavaScript e Wasm.

Apri un file Wasm nel riquadro Origini. Fai clic con il tasto destro del mouse nell'editor e seleziona Aggiungi informazioni di debug DWARF… per allegare le informazioni di debug su richiesta.

ALT_TEXT_HERE

Problema di Chromium: 1341255

Supporta la modifica in tempo reale durante il debug

Ora puoi modificare la funzione più in alto nello stack senza riavviare il debugger.

In Chrome 104, DevTools restituisce la funzionalità di riavvio del frame. Tuttavia, non è stato possibile modificare la funzione in cui è attualmente attiva la sospensione. È normale che gli sviluppatori interrompano una funzione e la modifichino in pausa.

Con questo aggiornamento, il debugger riavvia automaticamente la funzione con le seguenti limitazioni:

  • Solo la funzione più alta può essere modificata in pausa
  • Nessuna chiamata ricorsiva della stessa funzione più avanti nello stack

Modifica in tempo reale durante il debug

Problema di Chromium: 1334484

Visualizzare e modificare le regole @scope at nel riquadro Stili

Ora puoi visualizzare e modificare le regole at @scope CSS nel riquadro Stili.

Le regole at @scope fanno parte della specifica CSS Cascading and Inheritance Level 6. Queste regole consentono agli sviluppatori di definire l'ambito delle regole di stile in CSS.

Apri questa pagina di demo ed esamina il link ipertestuale all'interno dell'elemento <div class=”dark-theme”>. Nel riquadro Stili, visualizza le regole at @scope. Fai clic sulla dichiarazione della regola per modificarla.

Regole @scope at nel riquadro Stili

Problema di Chromium: 1337777

Miglioramenti alla mappa di origine

Di seguito sono riportate alcune correzioni alle mappe di origine per migliorare l'esperienza di debug complessiva:

  • DevTools ora risolve correttamente gli identificatori delle mappe di origine con punteggiatura. Alcuni minificatori moderni (ad esempio esbuild) producono mappe sorgente che uniscono gli identificatori con i segni di punteggiatura successivi (virgola, parentesi, punto e virgola).
  • DevTools ora risolve i nomi delle mappe di origine per i costruttori con una chiamata super. ALT_TEXT_HERE
  • È stata corretta l'indicizzazione degli URL delle mappe di origine per gli URL canonici duplicati. In precedenza, le interruzioni non venivano attivate in alcuni file a causa di URL canonici duplicati.

Problema di Chromium: 1335338, 1333411

Altri punti salienti

Di seguito sono riportate alcune correzioni importanti di questa release:

  • Rimuovi correttamente una coppia chiave-valore di archiviazione locale dalla tabella nel riquadro Applicazione > Archiviazione locale quando viene eliminata. (1339280)
  • Le anteprime dei colori ora vengono visualizzate correttamente quando si visualizzano i file CSS nel riquadro Origini. In precedenza, le loro posizioni erano sbagliate. (1340062)
  • Mostrare in modo coerente gli elementi CSS flex e grid nel riquadro Layout, nonché come badge nel riquadro Elementi. In precedenza, gli elementi flex e grid mancavano in modo casuale in entrambi i casi. (1340441, 1273992)
  • Per i frame degli annunci è disponibile un nuovo link Script annuncio del creator se DevTools ha trovato lo script che ha causato l'etichettatura del frame come annuncio. Puoi aprire un frame tramite Applicazione > Frame. (1217041)

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