Novità di DevTools (Chrome 105)

Jecelyn Yeen

Ripetizione passo passo nel Registratore

Ora puoi impostare un punto di interruzione e riprodurre di nuovo 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 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 annullare la riproduzione.

Con questa funzionalità, puoi visualizzare ed eseguire il debug completamente e con facilità del flusso utente.

Per ulteriori informazioni, consulta la sezione Riferimento alle funzionalità del Registratore.

Ripetizione passo passo nel Registratore

Problema relativo a Chromium: 1257499

Supporta l'evento mouse over nel riquadro Registratore

L'Registratore ora supporta l'aggiunta manuale di un passaggio del mouse sopra a una registrazione.

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

Se riproduci di nuovo il flusso utente ora, l'operazione non riuscirà perché il Registratore non acquisisce automaticamente gli eventi del mouse sopra durante la registrazione. Per risolvere il problema, aggiungi un passaggio manualmente passando il mouse sopra il selettore prima di fare clic sulla voce di menu.

Supporto dell'evento mouseover nel Registratore

Problema relativo a Chromium: 1257499

Largest Contentful Paint (LCP) nel riquadro Informazioni sul rendimento

La metrica 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 una visualizzazione elemento più grande (LCP).

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

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

LCP nel riquadro Informazioni sul rendimento

Problema relativo a Chromium: 1326481

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

Il riquadro Informazioni sul rendimento ora rileva il flash di testo invisibile (FOIT) e il flash di testo senza stile (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 nella traccia Variazioni del layout.

Consulta Ottimizzare il caricamento e il rendering dei caratteri web per apprendere la tecnica per evitare variazioni del layout.

FOUT nel riquadro Informazioni sulle prestazioni

Problemi relativi a Chromium: 1334628, 1328873

Gestori di protocollo nel riquadro Manifest

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

La registrazione del gestore del protocollo degli 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 di protocollo tramite Applicazione > Riquadro Manifest. Puoi visualizzare e testare tutti i protocolli disponibili qui.

Ad esempio, installa questa PWA demo. Nella sezione Protocol Gestori, digita "americano" e fai clic su Test Protocol (Testa il protocollo) per aprire la pagina Coffee nella PWA.

Gestori di protocollo nel riquadro Manifest

Problemi relativi a Chromium: 1300613

Badge del livello superiore nel riquadro Elementi

Utilizza il badge del livello superiore per comprendere il concetto del livello superiore e visualizzare come cambiano i contenuti del livello superiore.

L'elemento <dialog> è recentemente diventato 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 a tutti gli altri contenuti.

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

Per aiutare a visualizzare gli elementi del livello superiore, DevTools aggiunge un container di 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 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 livello superiore per passare al contenitore del livello superiore.

Badge del livello superiore nel riquadro Elementi

Problema relativo a Chromium: 1313690

Collega informazioni di debug di Wasm in fase di esecuzione

Ora puoi collegare le informazioni di debug di DWARF per wasm durante il runtime. In precedenza, il riquadro Origini supportava l'aggiunta di mappe di origine solo a file JavaScript e Wasm.

Apri un file Wasm nel riquadro Origini. Fai clic con il pulsante destro del mouse sull'editor e seleziona Aggiungi informazioni di debug DWARF... per allegare informazioni di debug on demand.

ALT_TEXT_HERE

Problema relativo a 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 ripristina la funzionalità di riavvio del frame. Tuttavia, non sei riuscito a modificare la funzione in cui sei attualmente in pausa. Capita spesso che gli sviluppatori interrompano una funzione e la modifichino mentre è in pausa.

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

  • Mentre è in pausa, solo la funzione più in alto può essere modificata
  • Nessuna chiamata ricorsiva sulla stessa funzione più in basso nello stack

modifica in tempo reale durante il debug

Problema relativo a Chromium: 1334484

Visualizza e modifica @scope in corrispondenza delle regole nel riquadro Stili

Ora puoi visualizzare e modificare le regole at-rules di @scope del CSS nel riquadro Stili.

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

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

@scope in corrispondenza delle regole nel riquadro Stili

Problema relativo a Chromium: 1337777

Miglioramenti alla mappa di origine

Di seguito sono riportate alcune correzioni alle mappe del codice sorgente per migliorare l'esperienza di debug generale:

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

Problema relativo a Chromium: 1335338, 1333411

Varie in evidenza

Di seguito sono riportate alcune importanti correzioni di questa release:

  • Rimuovi correttamente una coppia chiave-valore di archiviazione locale dalla tabella in Applicazione > Local Storage quando viene eliminato. (1339280)
  • Le anteprime dei colori vengono ora visualizzate correttamente durante la visualizzazione dei file CSS nel riquadro Origini. In precedenza, le loro posizioni erano smarrite. (1340062)
  • Visualizza in modo coerente gli elementi CSS Flex e della griglia nel riquadro Layout, oltre a mostrarli come badge nel riquadro Elementi. In precedenza, gli elementi flessibili e a griglia mancavano in modo casuale in entrambe le posizioni. (1340441, 1273992)
  • Un nuovo link allo Script dell'annuncio del creator è disponibile per i frame degli annunci se DevTools ha trovato lo script che ha determinato l'etichettatura del frame come annuncio. Puoi aprire un frame tramite Applicazione > Cornici. (1217041)

Scaricare i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema di DevTools utilizzando Altre opzioni   Altro > Guida > Segnala un problema di DevTools in DevTools.
  • Invia un tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

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