Novità di DevTools (Chrome 101)

Jecelyn Yeen

Importare ed esportare i flussi utente registrati come file JSON

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

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

A parte questo, puoi anche esportare la registrazione. Dopo aver registrato un flusso utente, fai clic sul pulsante di esportazione. Sono disponibili tre 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 di Recorder

Problema di Chromium: 1257499

Visualizzare i livelli a cascata nel riquadro Stili

I livelli a cascata consentono un controllo più esplicito dei file CSS per evitare conflitti di specificità dello stile. Ciò è particolarmente utile per codebase di grandi dimensioni, sistemi di progettazione e quando si gestiscono stili di terze parti nelle applicazioni.

In questo esempio, sono 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 visualizzare l'ordine dei livelli. Il layer page ha la specificità più elevata, pertanto lo sfondo box è verde.

Visualizzare i livelli a cascata nel riquadro Stili

Problema di Chromium: 1240596

Supporto della 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 su un'anteprima del colore 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()

Miglioramento della visualizzazione delle proprietà private

Ora DevTools valuta e mostra correttamente gli accessor privati. In precedenza, non era possibile espandere le classi con funzioni di accesso private nel pannello Console e Origini.

proprietà private nella console

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

Punti salienti vari

Di seguito sono riportate alcune correzioni degne di nota in 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)
  • Corrette le evidenziazioni errate quando si fa doppio clic sulle parole e si annulla il completamento automatico. (1298437, 1298667)
  • È stata corretta la scorciatoia da tastiera per i commenti nel riquadro Fonti. (1296535)
  • Riattiva il supporto per l'utilizzo del tasto Alt (Opzioni) per la selezione multipla nel riquadro Fonti. (1304070)

[Sperimentale] Nuova modalità Periodo di tempo e Snapshot nel riquadro Lighthouse

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

Ad esempio, puoi utilizzare i report intervallo di tempo per analizzare le interazioni degli utenti. Apri questa pagina demo. Seleziona la modalità Intervallo di tempo e fai clic su Avvia intervallo di tempo. Nella pagina, fai clic su un caffè e termina l'intervallo di tempo. Leggi il report per scoprire il Total Blocking Time e il Cumulative Layout Shift causati dall'interazione.

Ogni modalità ha i suoi casi d'uso, vantaggi e limitazioni unici. Per ulteriori informazioni, consulta la documentazione di Lighthouse.

Modalità Periodo di tempo e Snapshot nel pannello 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, 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.