Novità di DevTools (Chrome 101)

Jecelyn Yeen

Importa ed esporta i flussi utente registrati come file JSON

Il riquadro Registratore ora supporta l'importazione e l'esportazione delle registrazioni dei flussi utente come file JSON. Questa aggiunta semplifica la condivisione dei flussi degli utenti e può essere utile per la segnalazione di bug.

Ad esempio, scarica questo file JSON. Puoi importarli con il pulsante di importazione e riprodurre il flusso utente.

Inoltre, puoi esportare anche la registrazione. Dopo aver registrato un flusso utente, fai clic sul pulsante Esporta. Sono disponibili 3 opzioni di esportazione:

  • Esporta come file JSON. Scarica la registrazione come file JSON.
  • Esporta come script @puppeteer/replay. Scarica la registrazione come script Puppeteer Replay.
  • Esporta come script Puppeteer . Scarica la registrazione come script Puppeteer.

Consulta la documentazione per saperne di più sulle differenze tra queste opzioni.

Opzioni di esportazione nel riquadro Registratore

Problema relativo a Chromium: 1257499

Visualizza i livelli a cascata nel riquadro Stili

I livelli in cascata consentono un controllo più esplicito dei file CSS per evitare conflitti di specificità degli stili. Questo è particolarmente utile per codebase di grandi dimensioni, sistemi di design e per la gestione di stili di terze parti nelle applicazioni.

In questo esempio sono stati definiti tre livelli a cascata: page, component e base. Nel riquadro Stili puoi visualizzare ogni livello e i relativi stili.

Fai clic sul nome del livello per visualizzarne l'ordine. Il livello page ha la specificità più elevata, pertanto lo sfondo di box è verde.

Visualizzare i livelli in cascata nel riquadro Stili

Problema di Chromium: 1240596

Supporto per la funzione di colore hwb()

Ora puoi visualizzare e modificare il formato colore HWB in DevTools.

Nel riquadro Stili, tieni premuto il tasto Maiusc e fai clic sull'anteprima di un colore qualsiasi per modificare il formato del colore. È stato aggiunto il formato di colore HWB.

In alternativa, puoi modificare il formato del colore in HWB nel selettore di colori.

Funzione di colore hwb()

È stata migliorata la visualizzazione delle proprietà private

DevTools ora valuta e visualizza correttamente le funzioni di accesso private. In precedenza, non era possibile espandere le classi con accessori privati nel riquadro Console e Origini.

proprietà private nella console

Problemi di Chromium: 1296855, https://crbug.com/1303407

Altri punti salienti

Di seguito sono riportate alcune importanti correzioni di questa release:

  • La cache back-forward ora mostra l'ID estensione che ha bloccato bfcache, se presente.( 1284548)
  • È stato corretto il supporto del completamento automatico per oggetti simili ad array, nomi di classi CSS, map.get e tag HTML. (1297101, 1297491, 1293807, 1296983)
  • Sono stati corretti gli evidenziamenti errati quando si fa doppio clic sulle parole e si annulla il completamento automatico. (1298437, 1298667)
  • È stata corretta la scorciatoia da tastiera dei commenti nel riquadro Origini. (1296535)
  • Riattivazione del supporto per l'utilizzo del tasto Alt (Opzioni) per la selezione multipla nel riquadro Origini. (1304070)

[Sperimentale] Nuova modalità di intervallo di tempo e snapshot nel riquadro Lighthouse

Oltre alla modalità Navigazione esistente, il riquadro Lighthouse ora supporta altre due modalità per la misurazione dei flussi utente: Periodo di tempo e Snapshot.

Ad esempio, puoi utilizzare i report relativi al periodo di tempo per analizzare le interazioni degli utenti. Apri questa pagina demo. Seleziona la modalità Periodo di tempo e fai clic su Intervallo di tempo. Nella pagina, fai clic su una tazza di caffè e termina l'intervallo di tempo. Leggi il report per scoprire il tempo di blocco totale e lo spostamento cumulativo del layout causati dall'interazione.

Ogni modalità ha casi d'uso, vantaggi e limitazioni unici. Per saperne di più, consulta la documentazione di Lighthouse.

Periodo di tempo e modalità snapshot nella casa di pannelli Lighthouse

Problema di Chromium: 772558

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