Novità di DevTools (Chrome 100)

Jecelyn Yeen

Chrome 100

Siamo arrivati alla 100a versione di Chrome! Chrome DevTools continuerà a fornire strumenti affidabili agli sviluppatori per creare sul web. Fai clic sulla scheda Novità per festeggiare i traguardi raggiunti.

Come sempre, puoi guardare l'ultimo video sulle novità di DevTools facendo clic sull'immagine.

Visualizzazione e modifica delle @supports in corrispondenza delle regole nel riquadro Stili

Ora puoi visualizzare e modificare le regole at-rule di @supports CSS nel riquadro Stili. Queste modifiche semplificano la sperimentazione delle regole at-rule in tempo reale. Apri questa pagina dimostrativa, inspect l'elemento <div class=”box”>, visualizza le regole at-rule di @supports nel riquadro Stili. Fai clic sulla dichiarazione della regola per modificarla.

Problemi relativi a Chromium: 1222574, 1222573

Miglioramenti al riquadro Registratore

Supporta selettori comuni per impostazione predefinita

Quando si determina un selettore univoco durante la registrazione, ora il riquadro Registratore preferisce automaticamente gli elementi con i seguenti attributi:

• data-testid
• data-test
• data-qa
• data-cy
• data-test-id
• data-qa-id
• test-dati

Gli attributi sopra riportati sono selettori comuni utilizzati nell'automazione dei test.

Ad esempio, avvia una nuova registrazione con questa pagina demo. Inserisci un indirizzo email e osserva il valore del selettore.

Poiché l'elemento email ha data-testid definito, viene utilizzato automaticamente come selettore al posto degli attributi id o class.

Personalizza il selettore della registrazione

Puoi personalizzare il selettore di una registrazione se non utilizzi i selettori comuni.

Ad esempio, questa pagina demo utilizza l'attributo data-automate come selettore. avvia una nuova registrazione e inserisci data-automate come attributo del selettore. Inserisci un indirizzo email e osserva il valore del selettore ([data-automate=email-address]).

Rinominare una registrazione

Ora puoi rinominare una registrazione nel riquadro Registratore con il pulsante di modifica (icona a forma di matita) accanto al titolo della registrazione.

Visualizza l'anteprima delle proprietà di classi/funzioni al passaggio del mouse

Ora puoi passare il mouse sopra una classe o una funzione nel riquadro Origini durante il debug per visualizzarne l'anteprima delle proprietà. In precedenza, mostrava solo il nome della funzione e un link alla sua posizione nel codice sorgente.

Problema relativo a Chromium: 1049947

Frame presentati parzialmente nel riquadro Prestazioni

La registrazione delle prestazioni ora mostra una nuova categoria di frame "Fotogrammi parzialmente presentati" nella sequenza temporale Frame.

In precedenza, la sequenza temporale Frame mostrava tutti i frame con il lavoro del thread principale ritardato come "frame persi". Tuttavia, ci sono casi in cui alcuni frame potrebbero comunque produrre aggiornamenti visivi (ad esempio lo scorrimento) guidati dal thread del compositore.

Questo crea confusione negli utenti perché gli screenshot di questi "frame interrotti" riflettono ancora gli aggiornamenti visivi.

La nuova funzionalità "Fotogrammi parzialmente presentati" punta a indicare in modo più intuitivo che, sebbene alcuni contenuti non vengano presentati tempestivamente nell'inquadratura, ma il problema non sia così grave da bloccare del tutto gli aggiornamenti visivi.

Problema relativo a Chromium: 1261130

Varie in evidenza

Di seguito sono riportate alcune importanti correzioni di questa release:

• Sono state aggiornate le stringhe dello user agent iPhone per i dispositivi emulati. Tutte le versioni di iPhone successive alla 5 hanno una stringa user agent con iPhone OS 13_2_3. (1289553)
• Ora puoi salvare uno snippet direttamente come file JavaScript. In precedenza, dovevi aggiungere manualmente l'estensione del file .js. (1137218)
• Il riquadro Origini ora mostra correttamente i nomi delle variabili di ambito durante il debug con la mappa di origine. In precedenza, il riquadro Origini mostra i nomi delle variabili di ambito minimizzati nonostante la mappa di origine fosse fornita. (1294682)
• Il riquadro Origini ora ripristina la posizione di scorrimento corretta durante il caricamento della pagina. In precedenza, la posizione non veniva ripristinata correttamente, causando disagi nel debug. (1294422)

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.