Novità di DevTools (Chrome 110)

Jecelyn Yeen

Cancellazione del riquadro Prestazioni al ricaricamento

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

In precedenza, il riquadro Rendimento mostrava una cronologia con screenshot delle registrazioni precedenti. In questo modo era difficile capire quando iniziava la misurazione effettiva. Il riquadro ora passa sempre prima alla pagina about:blank per garantire che la registrazione inizi con una traccia vuota. Ciò è in linea con il riquadro Informazioni sulle prestazioni, che già faceva la stessa cosa.

Problemi di Chromium: 1101268, 1382044

Aggiornamenti di Registratore

Visualizzare ed evidenziare il codice del flusso utente nel Recorder

Lo strumento di registrazione ora offre la visualizzazione del codice divisa, semplificando la visualizzazione del codice del flusso utente. Per accedere alla visualizzazione del codice, apri un flusso utente e fai clic su Mostra codice.

Il Registratore evidenzia il codice corrispondente quando passi il mouse sopra ogni passaggio a sinistra, semplificando 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 Nightwatch Test.

Problema di Chromium: 1385489

Personalizzare i tipi di selettori di una registrazione

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

Problema di Chromium: 1384431

Modificare il flusso utente durante la registrazione

Recorder ora consente la modifica durante la registrazione, offrendoti la flessibilità di apportare modifiche in tempo reale. Non è più necessario interrompere la registrazione per apportare modifiche.

Problema di Chromium: 1381971

Formattazione automatica in linea

Il riquadro Origini ora formatta automaticamente il codice dei file sorgente minimizzati. Puoi fare clic sul pulsante Formattazione { } 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 nella stessa scheda, ma in un'altra scheda ::formatted.

Problemi di Chromium: 1383453, 1382752, 1382397

Evidenziazione della sintassi e anteprima in linea migliorate per Vue, SCSS e altro ancora

Il riquadro Origini ha migliorato l'evidenziazione della sintassi per diversi formati di file ampiamente utilizzati, consentendoti di leggere più facilmente il codice e riconoscerne la struttura, inclusi Vue, JSX, Dart, LESS, SCSS, SASS e CSS incorporato.

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

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

Problemi di Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

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 tra gli editor di testo, nei pannelli Console, Origini ed Elementi.

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

• La console mostra un elenco di suggerimenti di completamento automatico, con un bordo punteggiato sottile intorno all'opzione in alto che indica che la navigazione non è ancora iniziata.

• La console esegue la riga quando premi Enter. In precedenza, la riga veniva completata automaticamente con il suggerimento migliore. Per il completamento automatico, premi Tab o Arrow Right.

• La console evidenzia l'opzione selezionata mentre scorri l'elenco dei suggerimenti utilizzando le scorciatoie Arrow up e Arrow down.

• Per completare automaticamente con l'opzione selezionata durante la navigazione, utilizza i tasti della tastiera Tab, Enter o Arrow Right.

• Quando modifichi il codice, ad esempio quando il cursore si trova tra n e s, utilizza Tab per il completamento automatico, Enter per eseguire la riga e Arrow Right per spostare il cursore in avanti.

Problemi di Chromium: 1399436, 1276960

Punti salienti vari

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

• È stato risolto un problema di regressione in Strumenti per sviluppatori, in cui non si arrestava all'istruzione debugger negli script incorporati. (1385374)
• Una nuova impostazione Console che consente di espandere o comprimere i messaggi console.trace() per impostazione predefinita. Attiva/disattiva le impostazioni tramite Impostazioni > Preferenze > Espandi i messaggi console.trace() per impostazione predefinita. (1139616)
• Il riquadro Snippet nel pannello Origini supporta il completamento automatico avanzato, simile a quello della console. (772949)

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.

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

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.