Novità di DevTools (Chrome 103)

Acquisisci gli eventi di doppio clic e clic con il tasto destro del mouse nel riquadro Registratore

Il pannello Registratore ora può acquisire gli eventi di doppio clic e clic con il tasto destro del mouse.

Acquisisci gli eventi di doppio clic e clic con il tasto destro del mouse nel riquadro Registratore

In questo esempio, avvia una registrazione e prova a svolgere i seguenti passaggi:

  • Fai doppio clic sulla scheda per ingrandirla
  • Fai clic con il tasto destro del mouse sulla scheda e seleziona un'azione dal menu contestuale.

Per capire in che modo Recorder ha acquisito questi eventi, espandi i passaggi:

  • Il doppio clic viene acquisito come type: doubleClick.
  • L'evento Fai clic con il tasto destro del mouse viene acquisito come type: click, ma la proprietà button è impostata su secondary. Il valore button di un normale clic del mouse è primary.

Problemi di Chromium: 1300839, 1322879, 1299701, 1323688

Nuova modalità di periodo di tempo e snapshot nel riquadro Lighthouse

Ora puoi utilizzare Lighthouse per misurare il rendimento del tuo sito web oltre il caricamento della pagina.

Nuova modalità di periodo di tempo e snapshot nel riquadro Lighthouse

Il riquadro Lighthouse ora supporta tre modalità di misurazione del flusso utente:

  • I report Navigazione analizzano un singolo caricamento di pagina. La navigazione è il tipo di report più comune. Tutti i report di Lighthouse precedenti alla versione corrente sono report sulla navigazione.
  • I report Periodi di tempo analizzano un periodo di tempo arbitrario, generalmente contenente interazioni degli utenti.
  • I report Istantanee analizzano la pagina in uno stato specifico, generalmente dopo che l'utente ha interagito con essa.

Ad esempio, misuriamo il rendimento dell'aggiunta di articoli al carrello in questa pagina demo. Seleziona la modalità Periodo di tempo e fai clic su Inizia periodo di tempo. Scorri e aggiungi alcuni articoli al carrello. Al termine, fai clic su Fine intervallo di tempo per generare un report Lighthouse sulle interazioni degli utenti.

Modalità Periodo di tempo

Consulta la sezione Fluidi utente in Lighthouse per scoprire i casi d'uso, i vantaggi e le limitazioni unici di ogni modalità.

Problema di Chromium: 1291284

Aggiornamenti di Informazioni sul rendimento

Controllo dello zoom migliorato nel riquadro Informazioni sulle prestazioni

Ora DevTools aumenta lo zoom in base al cursore del mouse anziché alla posizione del cursore di riproduzione.Con l'ultimo zoom basato sul cursore, puoi spostare il mouse in un punto qualsiasi della traccia e aumentare lo zoom nell'area desiderata immediatamente.

Consulta Approfondimenti sul rendimento per scoprire come ottenere informazioni strategiche e migliorare il rendimento del tuo sito web con il riquadro.

Problema di Chromium: 1313382

Confermare l'eliminazione di una registrazione di un'esibizione

Ora DevTools mostra una finestra di dialogo di conferma prima di eliminare una registrazione del rendimento.

Confermare l'eliminazione di una registrazione di un'esibizione

Problema di Chromium: 1318087

Riordinare i riquadri nel riquadro Elementi

Ora puoi riordinare i riquadri nel riquadro Elementi in base alle tue preferenze.

Ad esempio, quando apri DevTools su uno schermo stretto, il riquadro Accessibilità è nascosto sotto il pulsante Mostra altro. Se esegui spesso il debug di problemi di accessibilità, ora puoi trascinare il riquadro in primo piano per accedervi più facilmente.

Riordinare i riquadri nel riquadro Elementi

Problema di Chromium: 1146146

Scegliere un colore al di fuori del browser

DevTools ora supporta la scelta di un colore al di fuori del browser. In precedenza, potevi scegliere un colore solo all'interno del browser.

Nel riquadro Stili, fai clic su un'anteprima di colore per aprire un selettore di colori. Usa il contagocce per scegliere un colore da qualsiasi punto.

Scegliere un colore al di fuori del browser

Problema di Chromium: 1245191

Anteprima del valore in linea migliorata durante il debug

Il debugger ora mostra correttamente l'anteprima dei valori in linea.

In questo esempio, la funzione double ha un parametro di input a e una variabile x. Inserisci un punto di interruzione nella riga return ed esegui il codice. L'anteprima in linea mostra correttamente i valori a e x. In precedenza, il debugger non mostrava il valore x nell'anteprima in linea.

Anteprima del valore in linea migliorata durante il debug

Problema di Chromium: 1316340

Supporto di blob di grandi dimensioni per gli autenticatori virtuali

La scheda WebAuthn ora include la nuova casella di controllo Supporta blob di grandi dimensioni per gli autenticatori virtuali.

Questa casella di controllo è disattivata per impostazione predefinita. Puoi attivarla solo per gli autenticatori con protocollo ctap2 che supportano le chiavi residenti.

 Supporto di blob di grandi dimensioni per gli autenticatori virtuali

Problema di Chromium: 1321803

Nuove scorciatoie da tastiera nel riquadro Risorse

Nel riquadro Origini sono ora disponibili due nuove scorciatoie da tastiera:

  • Attiva/disattiva la barra laterale di navigazione (a sinistra) con Control/Comando + Maiusc + Y
  • Attiva/disattiva la barra laterale del debugger (a destra) con Control/Command + Maiusc + H

Nuove scorciatoie da tastiera per il riquadro Origini

Problemi di Chromium: 1226363

Miglioramenti alle mappe di origine

In precedenza, gli sviluppatori riscontravano errori casuali durante:

  • Esempio di debug con Codepen
  • Individuare la posizione dell'origine dei problemi di rendimento in un esempio Codepen
  • Manca la scheda Componente quando React DevTools è attivato

Di seguito sono riportate alcune correzioni alle mappe di origine per migliorare l'esperienza di debug complessiva:

  • Mappatura corretta tra posizione e offset per gli script in linea e la posizione di origine
  • Utilizzare le informazioni di riserva per la posizione del testo del frame
  • Risolvere correttamente gli URL relativi con l'URL del frame

Problemi di Chromium: 1319828, 1318635, 1305475

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.