Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 110)

Jecelyn Yeen

Cancellazione del riquadro del rendimento al ricaricamento

Ora il riquadro Rendimento cancella sia lo screenshot sia la traccia quando fai clic sul pulsante Avvia profilazione e ricarica pagina.

In precedenza, il riquadro Rendimento mostrava una sequenza temporale con screenshot delle registrazioni precedenti. Per questo era difficile capire quando è iniziata la misurazione effettiva. Ora il riquadro passa sempre prima alla pagina about:blank per garantire che la registrazione inizi con una traccia vuota. Questo è in linea con il riquadro Informazioni sul rendimento, che ha già fatto lo stesso.

Cancellazione del riquadro Prestazioni al ricaricamento.

Problemi di Chromium: 1101268, 1382044

Aggiornamenti su Registratore

Visualizza ed evidenzia il codice della procedura utente nel Registratore

Il Registratore ora offre la visualizzazione del codice suddivisa, che semplifica la visualizzazione del codice di flusso utente. Per accedere alla visualizzazione codice, apri un flusso utente e fai clic su Mostra codice.

Il Registratore evidenzia il codice corrispondente quando passi il mouse sopra ogni passaggio sulla sinistra, per facilitare il monitoraggio del flusso. Puoi modificare il formato del codice utilizzando il menu a discesa, che ti consente di passare da un formato all'altro, ad esempio lo script Test orologio notturno.

Vista codice nel Registratore.

Problema di Chromium: 1385489

Personalizza i tipi di selettore di una registrazione

Puoi creare registrazioni che acquisiscono solo i tipi di selettore che ti interessano. Con la nuova opzione per personalizzare i tipi di selettori quando crei una nuova registrazione, puoi includere o escludere selettori, come XPath, assicurandoti di acquisire solo i selettori che vuoi includere nei flussi utente.

Nuova opzione per personalizzare i tipi di selettori.

Problema di Chromium: 1384431

Modificare il flusso utente durante la registrazione

Il Registratore ora consente l'editing durante la registrazione, offrendoti la flessibilità di apportare modifiche in tempo reale. Non è più necessario terminare la registrazione per apportare modifiche.

Modifica durante la registrazione del flusso utente.

Problema di Chromium: 1381971

Stampa piuttosto semplice in loco

Ora il riquadro Origini crea automaticamente una copia dei file sorgente minimizzati. Puoi fare clic sul pulsante Pretty Print { } 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 Stampa piuttosto semplice. Inoltre, i contenuti di buona qualità non venivano visualizzati nella stessa scheda, ma in un'altra scheda ::formatted.

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

Problemi di Chromium: 1383453, 1382752, 1382397

Migliore evidenziazione della sintassi e anteprima in linea per Vue, SCSS e altro ancora

Il riquadro Origini ha migliorato l'evidenziazione della sintassi per diversi formati file di uso comune, consentendo di leggere più facilmente il codice e riconoscerne la struttura, tra cui Vue, JSX, Dart, LESS, SCSS, SASS e CSS in linea.

Evidenziazione della sintassi in Vue.

Inoltre, DevTools ha migliorato l'anteprima in linea per Vue, HTML in linea e TSX. Passa il mouse sopra una variabile per visualizzarne l'anteprima.

Anteprima in linea per Vue.

A parte questo, DevTools ora mostra la mappa sorgente di un foglio di stile nel riquadro Origini. Ad esempio, quando apri un file SCSS, puoi accedere al relativo file CSS facendo clic sul link della mappa di origine.

Link alla mappa di origine per SASS.

Problemi di Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 135210614}10619}

Completamento automatico ergonomico e coerente nella console

DevTools migliora l'esperienza di completamento automatico implementando le seguenti modifiche:

Tab viene sempre utilizzato per il completamento automatico.
Il comportamento di Arrow right e Enter varia in base al contesto.
L'esperienza di completamento automatico è coerente per tutti gli editor di testo, nei riquadri Console, Origini ed Elementi

Ad esempio, ecco cosa succede quando digiti cons nella console:

Nella console viene visualizzato un elenco di suggerimenti di completamento automatico, con un sottile bordo punteggiato intorno all'opzione in alto che indica che la navigazione non è ancora iniziata.
La console esegue la riga quando premi Enter. In precedenza, completava automaticamente la riga con il suggerimento principale. Per il completamento automatico, premi Tab o Arrow Right.
La console evidenzia l'opzione selezionata mentre esplori l'elenco di suggerimenti utilizzando le scorciatoie Arrow up e Arrow down.
Per il completamento automatico con l'opzione selezionata durante la navigazione, utilizza i tasti della tastiera Tab, Enter o Arrow Right.
Se apporti modifiche a metà codice, ad esempio, quando il cursore si trova tra n e s, usa Tab per il completamento automatico, Enter per eseguire la riga e Arrow Right per spostare il cursore in avanti.

Problemi di Chromium: 1399436, 1276960

Varie in evidenza

Di seguito sono riportate alcune correzioni importanti di questa release:

È stato risolto un problema di regressione in DevTools, in cui non è stato possibile arrestarsi all'istruzione debugger negli script incorporati. (1385374)
Una nuova impostazione della console che consente di espandere o comprimere i messaggi console.trace() per impostazione predefinita. Attiva/disattiva le impostazioni in Impostazioni > Preferenze > Espandi i messaggi console.trace() per impostazione predefinita. (1139616)
Il riquadro Snippet nel riquadro Origini supporta il completamento automatico avanzato, in modo simile alla console. (772949)

Scarica 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à di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala i problemi di DevTools in DevTools.
Tweet all'indirizzo @ChromeDevTools.
Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.