Novità di DevTools (Chrome 103)

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

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

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

In questo esempio, avvia una registrazione e prova a eseguire questi 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 Registratore ha acquisito questi eventi, espandi i passaggi:

  • Il doppio clic viene acquisito come type: doubleClick.
  • L'evento 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 relativi a Chromium: 1300839, 1322879, 1299701, 1323688

Nuovo intervallo di tempo e modalità snapshot nel riquadro Lighthouse

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

Nuovo intervallo di tempo e modalità snapshot nel riquadro Lighthouse

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

  • I report di navigazione analizzano un singolo caricamento pagina. La navigazione è il tipo di report più comune. Tutti i report Lighthouse precedenti alla versione attuale sono report di navigazione.
  • I report Intervalli di tempo analizzano un periodo di tempo arbitrario, generalmente contenente interazioni degli utenti.
  • I report Snapshot analizzano la pagina in un determinato stato, in genere dopo che l'utente ha interagito con la pagina.

Ad esempio, misuriamo il rendimento dell'aggiunta di articoli al carrello in questa pagina demo. Seleziona la modalità Durata e fai clic su Avvia periodo di tempo. Scorri e aggiungi alcuni articoli al carrello. Quando hai finito, fai clic su Fine intervallo di tempo per generare un report Lighthouse delle interazioni degli utenti.

Modalità periodo di tempo

Consulta Flussi di utenti in Lighthouse per scoprire i casi d'uso unici, i vantaggi e i limiti di ogni modalità.

Problema relativo a Chromium: 1291284

Aggiornamenti sulle informazioni sul rendimento

Controllo dello zoom migliorato nel riquadro Informazioni sulle prestazioni

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

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

Problema relativo a Chromium: 1313382

Conferma per eliminare una registrazione dell'esibizione

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

Conferma per eliminare una registrazione dell'esibizione

Problema relativo a 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 facilitare l'accesso.

Riordinare i riquadri nel riquadro Elementi

Problema relativo a Chromium: 1146146

Scelta di un colore all'esterno del browser

DevTools ora supporta la selezione di un colore all'esterno del browser. In precedenza, potevi selezionare un colore solo all'interno del browser.

Nel riquadro Stili, fai clic sull'anteprima di un colore qualsiasi per aprire un selettore colori. Usa il contagocce per scegliere il colore ovunque ti trovi.

Scelta di un colore all'esterno del browser

Problema relativo a Chromium: 1245191

Anteprima del valore in linea migliorata durante il debug

Il debugger ora mostra correttamente l'anteprima dei valori incorporati.

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

Anteprima del valore in linea migliorata durante il debug

Problema relativo a Chromium: 1316340

Supporta 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 abilitarlo solo per gli autenticatori con il protocollo ctap2 che supportano le chiavi residenti.

 Supporta BLOB di grandi dimensioni per gli autenticatori virtuali

Problema relativo a Chromium: 1321803

Nuove scorciatoie da tastiera nel riquadro Origini

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

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

Nuove scorciatoie da tastiera per il riquadro Origini

Problemi relativi a Chromium: 1226363

Miglioramenti alle mappe di origine

In precedenza, gli sviluppatori riscontravano errori casuali durante:

  • Esempio di debug con Codepen
  • Identificazione della posizione di origine dei problemi di prestazioni in un esempio di Codepen
  • Manca la scheda Componente quando React DevTools è abilitato

Di seguito sono riportate alcune correzioni alle mappe del codice sorgente per migliorare l'esperienza di debug generale:

  • Correzione della mappatura tra posizione e offset per gli script in linea e posizione di origine
  • Usa le informazioni di riserva per la posizione del testo del frame
  • Risolvi correttamente gli URL relativi con l'URL del frame

Problemi relativi a Chromium: 1319828, 1318635, 1305475

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   Altro > 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.