Novità in DevTools (Chrome 109)

Jecelyn Yeen

Registratore: copia come opzioni per i passaggi, la riproduzione in-page, il menu contestuale del passaggio

Apri un flusso di utenti esistente nel Registratore. In precedenza, quando ripetevi il flusso utente, DevTools avviava sempre la riproduzione navigando o ricaricando la pagina.

Con gli ultimi aggiornamenti, l'app Registratore mostra separatamente il passaggio di navigazione. Puoi fare clic con il tasto destro del mouse e rimuoverlo per eseguire la riproduzione in-page.

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 Test visione notturna. Con questa funzionalità, puoi aggiornare facilmente qualsiasi script esistente.

In precedenza, era possibile 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 relativi a Chromium: 1322313, 1351649, 1322313, 1339767

Mostra i nomi effettivi delle funzioni nelle registrazioni dell'esibizione

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

In questo esempio, un file di origine viene minimizzato durante la produzione. Ad esempio, la funzione sayHi viene minimizzata come n, mentre la funzione takeABreak viene minimizzata come o in questa demo.

In precedenza, quando registravi una traccia nel riquadro Prestazioni, la traccia mostrava solo i nomi delle funzioni minimizzate. In questo modo era più difficile eseguire il debug.

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

Problemi relativi a Chromium: 1364601, 1364601

Nuove scorciatoie da tastiera nella Console e Riquadro Origini

Puoi passare da una scheda all'altra nel riquadro Origini utilizzando: In MacOS, Funzione + Comando + Freccia su e Freccia giù Su Windows e Linux, premi Ctrl + Pagina su o Freccia giù

Inoltre, puoi esplorare i suggerimenti di completamento automatico con Ctrl + N e Ctrl + P su MacOS, come in 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 è più in linea con il tuo flusso di lavoro di creazione.

Problema relativo a Chromium: 1167965, 1172535, 1371585. 1369503

Debug di JavaScript migliorato

Di seguito sono riportati alcuni miglioramenti al debug di JavaScript in questa release:

• new.target è una meta-proprietà che ti consente di rilevare se una funzione o un costruttore è stato chiamato utilizzando il nuovo operatore. Ora puoi registrare new.target nella console per verificarne il valore durante il debug. In precedenza, quando veniva inserito new.target venivano restituiti errori.
• Un oggetto WeakRef ti consente di conservare un riferimento debole a un altro oggetto, senza impedire che l'oggetto venga sottoposto a garbage collection. DevTools ora mostra un'anteprima in linea per il valore e valuta il riferimento debole direttamente nella console durante il debug. In precedenza, era necessario richiamare esplicitamente "deref" per risolvere il problema.
• È stata corretta l'anteprima in linea per la variabile oscurata. In precedenza, il valore visualizzato non era corretto.
• Deoffuscare i nomi delle variabili nelle funzioni Generator e async nel riquadro Ambito del riquadro Origini.

Problemi relativi a Chromium: 1267690, 1246863 1371322, 1311637

Varie in evidenza

Di seguito sono riportate alcune importanti correzioni di questa release:

• Supporta altri suggerimenti per le proprietà CSS non attive nel riquadro Stili (altezza e larghezza in linea, proprietà flessibili e griglia). (1373597, 1178508, 1178508,1178508)
• Evidenziazione della sintassi corretta. Non funzionava correttamente dopo il recente upgrade dell'editor di codice in DevTools. (1290182)
• Acquisisci correttamente gli eventi di modifica dell'input dopo l'evento di sfocatura nel Registratore. (1378488)
• Aggiorna lo script di ripetizione di Puppeteer al momento dell'esportazione per una migliore esperienza di debug nel Registratore. (1351649)
• Supporta la registrazione e la riproduzione nel Registratore per il debug remoto. (1185727)
• Analisi corretta dei nomi delle variabili CSS speciali in var(). In precedenza, DevTools non supportava l'analisi delle variabili con caratteri di escape come var(--fo\ o). , (1378992)

[Sperimentale] UX migliorata per la gestione dei punti di interruzione

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

Questo nuovo design sperimentale dell'esperienza utente rinnova la struttura del riquadro Punti di interruzione e consente agli sviluppatori di accedere rapidamente alle funzionalità di uso comune, 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 vengono 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 si passa il mouse sopra il punto di interruzione o il nome di un file nel riquadro Punto di interruzione.

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

Problemi relativi a Chromium: 1346231, 1324904

[Sperimentale] Stampa automatica in loco

Il riquadro Origini ora stampa in modo automatico i file sorgente minimizzati al suo interno. Puoi fare clic sul pulsante Stampe pre5 { } per annullare l'operazione.

In precedenza, il riquadro Origini mostrava contenuti minimizzati per impostazione predefinita. Per formattare i contenuti, dovevi fare clic manualmente sul pulsante Stampato. Inoltre, i contenuti stampati non venivano visualizzati nello stesso file, ma in un'altra scheda di ::formatted.

Problema relativo a 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 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   > 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.