Novità di DevTools (Chrome 100)

Jecelyn Yeen

Chrome 100

Un brindisi alla 100ª versione di Chrome. Chrome DevTools continuerà a fornire strumenti affidabili agli sviluppatori per creare contenuti sul web. Dai un'occhiata alla scheda Novità per celebrare i traguardi.

Come di consueto, puoi guardare l'ultimo video Novità di DevTools facendo clic sull'immagine.

Visualizzare e modificare @supports nelle regole nel riquadro Stili

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

Visualizzare e modificare le regole @supports

Problemi di Chromium: 1222574, 1222573

Miglioramenti al riquadro di Registratore

Supportare i selettori comuni per impostazione predefinita

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

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

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

Ad esempio, avvia una nuova registrazione con questa pagina demo. Compila 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.

Supportare i selettori comuni per impostazione predefinita

Personalizzare 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 selettore. Inserisci un indirizzo email e osserva il valore del selettore ([data-automate=email-address]).

Personalizzare il selettore della registrazione

Il risultato della selezione del selettore personalizzato

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.

Rinominare una 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 visualizzarne le proprietà. In precedenza, mostrava solo il nome della funzione e un link alla sua posizione nel codice sorgente.

Visualizzare l&#39;anteprima delle proprietà di classi/funzioni al passaggio del mouse

Problema di Chromium: 1049947

Frame parziali nel riquadro Prestazioni

La registrazione del rendimento ora mostra una nuova categoria di frame "Frame presentati parzialmente" nella sequenza temporale Frame.

In precedenza, la sequenza temporale Frame visualizzava tutti i frame con lavoro del thread principale ritardato come "frame eliminati". Tuttavia, ci sono casi in cui alcuni frame possono comunque produrre aggiornamenti visivi (ad es. lo scorrimento) gestiti dal thread del compositore.

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

Il nuovo stato "Frame presentati parzialmente" ha lo scopo di indicare in modo più intuitivo che, sebbene alcuni contenuti non vengano presentati in modo tempestivo nel frame, il problema non è così grave da bloccare completamente gli aggiornamenti visivi.

Frame parziali nel riquadro Prestazioni

Problema di Chromium: 1261130

Punti salienti vari

Di seguito sono riportate alcune correzioni degne di nota in questa release:

  • Sono state aggiornate le stringhe user agent per 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 delle origini. In precedenza, il riquadro Origini mostrava i nomi delle variabili di ambito minimizzati 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 problemi di 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 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.