Novità di DevTools (Chrome 105)

Jecelyn Yeen

Riproduzione passo passo in Registratore

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

Per impostare un punto di interruzione, fai clic sul punto blu accanto a un passaggio. Riproduci il flusso utente. La riproduzione si interromperà prima dell'esecuzione del passaggio. Da qui, puoi continuare la riproduzione, eseguire un passaggio o annullarla.

Con questa funzionalità, puoi visualizzare ed eseguire il debug del flusso degli utenti in modo semplice.

Per ulteriori informazioni, consulta la sezione Funzionalità del registratore.

Riproduzione passo passo in Registratore

Problema di Chromium: 1257499

Supporto del passaggio del mouse sopra un evento nel riquadro Registratore

Registratore ora supporta l'aggiunta manuale di un passaggio al passaggio del mouse (hover) in una registrazione.

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

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

Supporto del passaggio del mouse sopra un evento nel Registratore

Problema di Chromium: 1257499

Largest Contentful Paint (LCP) nel riquadro Informazioni sulle prestazioni

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 visualizzare il percorso critico per la risorsa LCP.

Consulta Approfondimenti sul rendimento per scoprire come ottenere approfondimenti strategici e migliorare il rendimento del tuo sito web con il pannello.

LCP nel riquadro Informazioni sulle prestazioni

Problema di Chromium: 1326481

Identificare i lampi di testo (FOIT, FOUT) come potenziali cause principali delle variazioni del layout

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

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

Consulta Ottimizzare il caricamento e il rendering dei webfont per scoprire la tecnica per evitare 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 Gestori protocolli tramite il riquadro Applicazione > Manifest. Puoi visualizzare e testare tutti i protocolli disponibili qui.

Ad esempio, installa questa PWA demo. Nella sezione Gestori di protocollo, digita "americano" e fai clic su Test 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 come cambiano i contenuti del livello superiore.

L'elemento <dialog> è diventato stabile di recente 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 visualizzare meglio gli 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 albero del livello superiore, fai clic sul pulsante Mostra accanto all'elemento o al relativo 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 top-layer per passare al contenitore del livello superiore.

Badge del livello superiore nel riquadro Elementi

Problema di Chromium: 1313690

Allegare informazioni di debug di Wasm in fase di runtime

Ora puoi allegare le informazioni di debug DWARF per wasm durante l'esecuzione. In precedenza, il riquadro Origini supportava solo l'allegato di mappe di origine a 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

Supporto della 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 reintroduce la funzionalità Riavvia frame. Tuttavia, non hai potuto modificare la funzione in cui è attualmente in pausa. È prassi comune per gli sviluppatori interrompere una funzione e poi modificarla mentre è in pausa.

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

  • Durante la pausa, è possibile modificare solo la funzione più in alto
  • Nessuna chiamata ricorsiva alla stessa funzione più in basso nello stack

Modifica in tempo reale durante il debug

Problema di Chromium: 1334484

Visualizzare e modificare @scope nelle regole nel riquadro Stili

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

La regola @scope fa 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 demo ed esamina il collegamento ipertestuale all'interno dell'elemento <div class=”dark-theme”>. Nel riquadro Stili, visualizza le regole @@scope. Fai clic sulla dichiarazione della regola per modificarla.

@scope nelle regole nel riquadro Stili

Problema di Chromium: 1337777

Miglioramenti alla mappa di origine

Ecco alcune correzioni alle mappe di origine per migliorare l'esperienza di debug complessiva:

  • DevTools ora risolve correttamente gli identificatori della mappa di origine con punteggiatura. Alcuni minificatori moderni (ad esempio esbuild) producono mappe delle origini che uniscono gli identificatori con la punteggiatura successiva (virgola, parentesi, punto e virgola).
  • Ora DevTools 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 delle origini per gli URL canonici duplicati. In precedenza, i punti di interruzione non venivano attivati in alcuni file a causa di URL canonici duplicati.

Problema di Chromium: 1335338, 1333411

Punti salienti vari

Di seguito sono riportate alcune correzioni degne di nota in questa release:

  • Rimuovi correttamente una coppia chiave-valore di archiviazione locale dalla tabella nel riquadro Applicazione > Archiviazione locale quando viene eliminata. (1339280)
  • Ora le anteprime dei colori vengono visualizzate correttamente quando si visualizzano i file CSS nel riquadro Origini. In precedenza, le loro posizioni erano errate. (1340062)
  • Visualizza in modo coerente gli elementi flex e griglia CSS nel riquadro Layout e visualizzali come badge nel riquadro Elementi. In precedenza, gli elementi flessibili e della griglia mancavano in modo casuale in entrambi i punti. (1340441, 1273992)
  • È disponibile un nuovo link Script annuncio del creator per i frame dell'annuncio 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 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.