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 del flusso 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 importarla con il pulsante di importazione e riprodurre di nuovo il flusso utente.

In più, puoi anche esportare 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 scoprire di più sulle differenze tra queste opzioni.

Problema relativo a Chromium: 1257499

Visualizza i livelli a cascata nel riquadro Stili

I livelli a cascata consentono un controllo più esplicito dei file CSS per evitare conflitti tra le specifiche degli stili. 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 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 visualizzare l'ordine dei livelli. Il livello page ha la specificità più elevata, pertanto lo sfondo box è verde.

Problema relativo a Chromium: 1240596

Supporto per la funzione 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. Viene aggiunto il formato colore HWB.

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

Visualizzazione delle proprietà private migliorata

DevTools ora valuta e visualizza correttamente le funzioni di accesso private. In precedenza, non era possibile espandere i corsi con funzioni di accesso private nella console e nel riquadro Origini.

Problemi relativi a Chromium: 1296855, https://crbug.com/1303407

Varie in evidenza

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 di tipo array, nomi di classi CSS, map.get e tag HTML. (1297101, 1297491, 1293807, 1296983)
• Sono stati corretti gli errori di evidenziazione durante il doppio clic sulle parole e l'annullamento del completamento automatico. (1298437, 1298667)
• È stata corretta la scorciatoia da tastiera dei commenti nel riquadro Origini. (1296535)
• Riattiva il supporto dell'utilizzo del tasto Alt (Opzioni) per la selezione multipla nel riquadro Origini. (1304070)

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

Oltre alla modalità di navigazione esistente, il riquadro Lighthouse ora supporta altre due modalità per la misurazione dei flussi utente: durata e snapshot.

Ad esempio, puoi utilizzare i report 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 un caffè e termina l'intervallo di tempo. Leggi il report per individuare il tempo di blocco totale e la variazione layout cumulativa causati dall'interazione.

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

Problema relativo a 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 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   > 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.