Novità in DevTools (Chrome 109)

Jecelyn Yeen

Registratore: opzioni Copia come per i passaggi, riproduzione in pagina, menu contestuale del passaggio

Nuove opzioni di copia nel riquadro Registratore.

Apri un flusso utente esistente nel Registratore. In precedenza, quando riproducevi il flusso utente, DevTools iniziava sempre la riproduzione navigando o ricaricando la pagina.

Con gli ultimi aggiornamenti, il Registratore mostra il passaggio di navigazione separatamente. Puoi fare clic con il tasto destro del mouse e rimuoverlo per eseguire la riproduzione nella pagina.

A parte questo, puoi fare clic con il tasto destro del mouse su un passaggio e copiarlo negli appunti nel riquadro *Registratore anziché esportare l'intero flusso utente. Funziona anche con le estensioni. Ad esempio, prova a copiare un passaggio come script Nightwatch Test. Con questa funzionalità, puoi aggiornare facilmente qualsiasi script esistente.

In precedenza, potevi accedere al menu dei passaggi solo tramite il pulsante con tre puntini. Ora puoi fare clic con il tasto destro del mouse in un punto qualsiasi del passaggio per accedere al menu.

Problemi di Chromium: 1322313, 1351649, 1322313, 1339767

Mostrare i nomi effettivi delle funzioni nelle registrazioni delle esecuzioni

Il riquadro Rendimento ora mostra i nomi effettivi delle funzioni e le relative origini nella traccia se è presente una mappa delle origini.

Mostra il confronto prima e dopo della visualizzazione dei nomi delle funzioni nel pannello Rendimento.

In questo esempio, un file di origine viene compresso durante la produzione. Ad esempio, la funzione sayHi viene ridotta a n e la funzione takeABreak viene ridotta a o in questa demo.

Mostra i file prima e dopo la minificazione.

In precedenza, quando registravi una traccia nel riquadro Rendimento, la traccia mostrava solo i nomi delle funzioni ridotti. Ciò ha reso più difficile il debug.

Con le ultime modifiche, DevTools ora legge la mappa di origine e mostra i nomi delle funzioni e la posizione dell'origine effettivi.

Problemi di Chromium: 1364601, 1364601

Nuove scorciatoie da tastiera nel riquadro Console e Origini

Puoi passare da una scheda all'altra nel riquadro Fonti utilizzando: Su macOS, Funzione + Comando + Freccia su e giù Su Windows e Linux, Control + Pagina su o giù

Inoltre, puoi navigare tra i suggerimenti di completamento automatico con Ctrl + N e Ctrl + P su macOS, in modo simile a Emacs. Ad esempio, puoi digitare window. in Console e utilizzare queste scorciatoie per navigare.

Inoltre, DevTools ora accetta Freccia destra per il completamento automatico solo alla fine della riga. Ad esempio, viene visualizzata una finestra di dialogo di completamento automatico quando modifichi qualcosa al centro del codice. Quando premi il tasto Freccia destra, molto probabilmente vuoi impostare il cursore sulla posizione successiva anziché sul completamento automatico. Questa modifica dell'esperienza utente si allinea meglio al tuo flusso di lavoro di creazione.

Problema di Chromium: 1167965, 1172535, 1371585. 1369503

Debug JavaScript migliorato

Ecco alcuni miglioramenti del debug JavaScript in questa release:

  • new.target è una meta-proprietà che consente di rilevare se una funzione o un costruttore è stato chiamato utilizzando l'operatore new. Ora puoi registrare new.target nella console per verificarne il valore durante il debug. In precedenza, restituiva errori quando inserivi new.target. Mostra il confronto prima e dopo del debug della valutazione di new.target.
  • Un oggetto WeakRef consente di mantenere un riferimento debole a un altro oggetto, senza impedirne la garbage collection. Ora DevTools mostra un'anteprima in linea del valore e valuta il riferimento debole direttamente nella console durante il debug. In precedenza, dovevi chiamare esplicitamente "deref" per risolvere il problema. Mostra il confronto prima e dopo della valutazione di WeakRef durante il debug.
  • È stata corretta l'anteprima in linea per la variabile ombreggiata. In precedenza, il valore visualizzato non era corretto. Mostra l'anteprima in linea del confronto prima e dopo per la variabile ombra.
  • Deoffusca i nomi delle variabili nelle funzioni Generator e async nel riquadro Ambito del riquadro Origini.

Problemi di Chromium: 1267690, 1246863 1371322, 1311637

Punti salienti vari

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

  • Supporto di ulteriori suggerimenti per le proprietà CSS inattive nel riquadro Stili: altezza e larghezza in linea, proprietà flex e griglia. (1373597, 1178508, 1178508,1178508)
  • Evidenziazione della sintassi corretta. Non funzionava correttamente dopo l'upgrade recente dell'editor di codice in DevTools. (1290182)
  • Acquisire correttamente gli eventi di modifica dell'input dopo l'evento on blur in Registratore. (1378488)
  • Aggiorna lo script di riproduzione di Puppeteer durante l'esportazione per una migliore esperienza di debug nel registratore. (1351649)
  • Supporto della registrazione e della riproduzione in Registratore per il debug remoto. (1185727)
  • È stata corretta l'analisi dei nomi delle variabili CSS speciali in var(). In precedenza, gli strumenti di sviluppo non supportavano l'analisi delle variabili con caratteri di escape come var(--fo\ o). , (1378992)

[Sperimentale] UX migliorata nella gestione dei punti di interruzione

L'attuale riquadro Punti di interruzione fornisce un aiuto visivo limitato per la supervisione di tutti i punti di interruzione. Inoltre, le azioni utilizzate di frequente sono nascoste dietro il menu contestuale.

Questa riprogettazione sperimentale dell'esperienza utente struttura il riquadro Punti di interruzione e consente agli sviluppatori di accedere rapidamente alle funzionalità di uso frequente, come la modifica e la rimozione dei punti di interruzione.

Ecco alcuni punti salienti:

  • Entrambe le opzioni di pausa si trovano nel riquadro Punti di interruzione. Hanno etichette di testo esplicite che rendono le opzioni autoesplicative.
  • I punti di interruzione sono raggruppati per file, ordinati per numero di riga o colonna. Puoi comprimerli ed espanderli.**
  • Nuove opzioni per rimuovere e modificare un punto di interruzione quando passi il mouse sopra il punto di interruzione o un nome file nel riquadro Punto di interruzione.

Leggi le modifiche complete nella nostra RFC (chiusa) e lascia il tuo feedback qui.

Mostra il riquadro Breakpoint prima e dopo la riprogettazione.

Problemi di Chromium: 1346231, 1324904

[Sperimentale] Formattazione automatica in loco

Il riquadro Fonti ora formatta automaticamente il codice dei file di origine minimizzati. Puoi fare clic sul pulsante Stampa formattata { } per annullare l'operazione.

In precedenza, il pannello Fonti mostrava i contenuti in formato ridotto per impostazione predefinita. Per formattare i contenuti, dovevi fare clic manualmente sul pulsante di stampa. Inoltre, i contenuti stampati in modo leggibile non venivano visualizzati nello stesso file, ma in un'altra scheda ::formatted.

Mostra un file minimizzato prima e dopo la formattazione automatica in loco.

Problema di Chromium: 1164184

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.