Novità di DevTools (Chrome 100)

Jecelyn Yeen

Chrome 100

Ecco a te la 100° versione di Chrome. Chrome DevTools continuerà a fornire strumenti affidabili per lo sviluppo sul web. Dai un'occhiata alla scheda Novità per festeggiare i traguardi raggiunti.

Come sempre, puoi guardare il video sulle novità di DevTools più recente facendo clic sull'immagine.

Visualizzare e modificare le regole @supports nel riquadro Stili

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

Problemi di Chromium: 1222574, 1222573

Miglioramenti al pannello di Registratore

Supporta i selettori comuni per impostazione predefinita

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

• IDtest-dati
• data-test
• data-qa
• data-cy
• data-test-id
• data-qa-id
• data-testing

Gli attributi sopra indicati 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 anziché gli 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 di dimostrazione utilizza l'attributo data-automate come selettore. Avvia una nuova registrazione e inserisci data-automate come attributo 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.

Visualizzare 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 visualizzare l'anteprima delle relative proprietà. In precedenza, veniva mostrato solo il nome della funzione e un link alla relativa posizione nel codice sorgente.

Problema di Chromium: 1049947

Frame parzialmente visualizzati nel riquadro Rendimento

La registrazione del rendimento ora mostra una nuova categoria di frame "Frame parzialmente visualizzati" 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.

Ciò genera confusione negli utenti perché gli screenshot di questi "Frame persi" riflettono ancora gli aggiornamenti visivi.

Il nuovo stato "Frame parzialmente visualizzato" ha lo scopo di indicare in modo più intuitivo che, anche se alcuni contenuti non vengono presentati tempestivamente nel frame, il problema non è così grave da bloccare del tutto gli aggiornamenti visivi.

Problema di Chromium: 1261130

Altri punti salienti

Di seguito sono riportate alcune correzioni importanti di questa release:

• Sono state aggiornate le stringhe user agent di 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 lo snippet direttamente come file JavaScript. In precedenza, era necessario 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 mostrava i nomi delle variabili di ambito minimizzate nonostante fosse stata fornita la mappa di origine. (1294682)
• Il riquadro Origini ora ripristina correttamente la posizione di scorrimento al caricamento della pagina. In precedenza, la posizione non veniva ripristinata correttamente, causando disagi durante il debug. (1294422)

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare 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.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia commenti sulle novità nei video di YouTube di DevTools o sui video di YouTube con i suggerimenti per gli strumenti per sviluppatori.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.