Novità di DevTools (Chrome 100)

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 l'ultimo video Novità di DevTools 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 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.

Visualizzare e modificare le regole @supports

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:

  • data-testid
  • 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.

Supporta 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 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]).

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

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

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 fotogrammi con attività del thread principale in ritardo come "fotogrammi persi". Tuttavia, in alcuni casi alcuni frame potrebbero comunque produrre aggiornamenti visivi (ad es. scorrimento) in base al 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.

Frame parzialmente visualizzati nel riquadro Rendimento

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 i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

Novità di DevTools

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