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.

Opzioni di esportazione nel riquadro Registratore

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.

Visualizza i livelli a cascata nel riquadro Stili

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.

Funzione colore hwb()

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.

proprietà private nella console

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

Periodo di tempo e modalità snapshot nel pannello di controllo 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 di anteprima ti consentono di accedere alle ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando Altre opzioni   Altre   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome - Guida introduttiva

Chrome - Guida introduttiva

Guida introduttiva di Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59