Novità in DevTools (Chrome 109)

Jecelyn Yeen

Registratore: opzioni di copia come per i passaggi, la riproduzione all'interno della pagina e il menu contestuale del passaggio

Apri un flusso utente esistente in Registratore. In precedenza, quando riproducevi il flusso utente, DevTools avviava sempre la riproduzione passando alla pagina o ricaricandola.

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

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

In precedenza, potevi accedere al menu del passaggio 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

Mostra i nomi effettivi delle funzioni nelle registrazioni del rendimento

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

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

In precedenza, quando registravi una traccia nel riquadro Rendimento, venivano visualizzati solo i nomi delle funzioni minimizzate. 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 Origini utilizzando: Su MacOS, Funzione + Comando + Freccia su e giù Su Windows e Linux, Control + Pagina su o giù

Inoltre, puoi spostarti 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 nel mezzo del codice. Quando premi il tasto Freccia destra, molto probabilmente vuoi impostare il cursore sulla posizione successiva anziché sul completamento automatico. Questa modifica all'esperienza utente è più in linea con il flusso di lavoro di creazione dei contenuti.

Problema di Chromium: 1167965, 1172535, 1371585. 1369503

Debug JavaScript migliorato

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

• new.target è una metaproprietà che consente di rilevare se è stata chiamata una funzione o un costruttore utilizzando l'operatore new. Ora puoi registrare new.target nella console per verificarne il valore durante il debug. In precedenza, venivano restituiti errori quando inserivi new.target.
• Un oggetto WeakRef ti consente di mantenere un riferimento debole a un altro oggetto, senza impedire che l'oggetto venga sottoposto a garbage collection. Ora DevTools mostra un'anteprima in linea per il valore e valuta il riferimento debole direttamente nella console durante il debug. In precedenza, per risolvere il problema dovevi chiamare esplicitamente "deref".
• È stata corretta l'anteprima in linea per la variabile con ombreggiatura. In precedenza, il valore visualizzato non era corretto.
• Deofusca i nomi delle variabili nelle funzioni Generator e async nel riquadro Ambito del riquadro Origini.

Problemi di Chromium: 1267690, 1246863 1371322, 1311637

Altri punti salienti

Di seguito sono riportate alcune correzioni importanti di questa release:

• Supporto di più suggerimenti per le proprietà CSS non attive nel riquadro Stili: altezza e larghezza in linea, proprietà flex e griglia. (1373597, 1178508, 1178508,1178508)
• È stata corretta l'evidenziazione della sintassi. Non funzionava correttamente dal recente upgrade dell'editor di codice in DevTools. (1290182)
• Acquisisci correttamente gli eventi di modifica dell'input dopo l'evento on blur nel Registratore. (1378488)
• Aggiorna lo script di riproduzione di Puppeteer all'esportazione per un'esperienza di debug migliore in Registratore. (1351649)
• Supporto della registrazione e della riproduzione in Registratore per il debug remoto. (1185727)
• È stato corretto l'analisi dei nomi delle variabili CSS speciali in var(). In precedenza, DevTools non supportava l'analisi delle variabili con caratteri emessi come var(--fo\ o). , (1378992)

[Sperimentale] UX migliorata nella gestione dei punti di interruzione

Il riquadro Punti di interruzione attuale offre scarse informazioni visive 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 apporta struttura al riquadro Breakpoint e consente agli sviluppatori di accedere rapidamente alle funzionalità di uso comune, come la modifica e la rimozione dei breakpoint.

Ecco alcuni punti salienti:

• Entrambe le opzioni di pausa si trovano nel riquadro Breakpoint. Sono dotate di etichette di testo esplicite che rendono le opzioni autoesplicative.
• I punti di interruzione sono raggruppati per file e ordinati in base al numero di riga o colonna. Puoi comprimere ed espanderli.**
• Nuove opzioni per rimuovere e modificare un punto di interruzione quando passi 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 il tuo feedback qui.

Problemi di Chromium: 1346231, 1324904

[Sperimentale] Formattazione automatica in situ

Il riquadro Origini ora esegue automaticamente la formattazione in modo gradevole dei file di origine minimizzati in situ. Puoi fare clic sul pulsante Stampa leggibile { } per annullare l'operazione.

In precedenza, il pannello Origini mostrava i contenuti minimizzati per impostazione predefinita. Dovevi fare clic manualmente sul pulsante di stampa in bella copia per formattare i contenuti. Inoltre, i contenuti con stampa in bella copia non sono stati visualizzati nello stesso file, ma in un'altra scheda ::formatted.

Problema di Chromium: 1164184

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 gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.