Novità di DevTools (Chrome 103)

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

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

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

In questo esempio, avvia una registrazione e prova a eseguire 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 come Registratore 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à 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à Periodo di tempo e Snapshot nel riquadro Lighthouse

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

  • I report Navigazione analizzano il caricamento di una singola pagina. La navigazione è il tipo di report più comune. Tutti i report Lighthouse precedenti alla versione attuale sono report di navigazione.
  • I report Periodi di tempo analizzano un periodo di tempo arbitrario, generalmente durante il quale ci sono state interazioni degli utenti.
  • I report Snapshot analizzano la pagina in un determinato stato, generalmente dopo l'interazione dell'utente.

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

Modalità intervallo di tempo

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

Problema di Chromium: 1291284

Aggiornamenti delle informazioni sul rendimento

Controllo dello zoom migliorato nel riquadro Informazioni sulle prestazioni

Ora DevTools esegue 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 ed eseguire subito lo zoom in sull'area desiderata.

Consulta Approfondimenti sul rendimento per scoprire come ottenere approfondimenti strategici e migliorare il rendimento del tuo sito web con il pannello.

Problema di Chromium: 1313382

Confermare l'eliminazione di una registrazione delle prestazioni

Ora DevTools mostra una finestra di dialogo di conferma prima di eliminare una registrazione delle prestazioni.

Confermare l'eliminazione di una registrazione delle prestazioni

Problema di Chromium: 1318087

Riordinare i riquadri nel riquadro Elementi

Ora puoi riordinare i riquadri nel pannello 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 dei 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 del colore per aprire un selettore di colori. Usa il contagocce per scegliere un colore ovunque.

Scegliere un colore al di fuori del browser

Problema di Chromium: 1245191

Miglioramento dell'anteprima dei valori in linea 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.

Miglioramento dell'anteprima dei valori in linea durante il debug

Problema di 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 attivarlo solo per gli autenticatori con protocollo ctap2 che supportano le chiavi residenti.

 Supporta blob di grandi dimensioni per gli autenticatori virtuali

Problema di Chromium: 1321803

Nuove scorciatoie da tastiera nel riquadro Risorse

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

  • Attiva/disattiva la barra laterale di navigazione (a sinistra) con Controllo/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 delle mappe di origine

In precedenza, gli sviluppatori riscontravano errori casuali durante:

  • Debug con l'esempio di Codepen
  • Identificazione della posizione di origine dei problemi di rendimento in un esempio di Codepen
  • Scheda Componente mancante quando React DevTools è abilitato

Ecco alcune correzioni alle mappe di origine per migliorare l'esperienza di debug complessiva:

  • Mappatura corretta tra posizione e offset per script incorporati e posizione di origine
  • Utilizzare le informazioni di fallback per la posizione del testo del frame
  • Risolvi correttamente gli URL relativi con l'URL del frame

Problemi di 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 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.