Novità di DevTools (Chrome 110)

Jecelyn Yeen

Cancellazione del riquadro Prestazioni al ricaricamento

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

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

Problemi relativi a Chromium: 1101268, 1382044

Aggiornamenti su Registratore

Visualizza ed evidenzia il codice del flusso utente nel Registratore

Il Registratore ora offre una visualizzazione del codice suddivisa, semplificando la visualizzazione del codice di flusso utente. Per accedere alla Vista 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, per semplificare 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.

Problema relativo a Chromium: 1385489

Personalizzare i tipi di selettore di una registrazione

Puoi creare registrazioni che acquisiscono solo i tipi di selettori 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 nei flussi utente.

Problema relativo a Chromium: 1384431

Modifica flusso utente durante la registrazione

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

Problema relativo a Chromium: 1381971

Stampa automatica in loco

Il riquadro Origini ora stampa automaticamente i file di origine 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 Stampato. Inoltre, i contenuti in formato cartaceo non venivano visualizzati nella stessa scheda, ma in un'altra scheda di ::formatted.

Problemi relativi a Chromium: 1383453, 1382752, 1382397

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

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

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.

Oltre a 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 relativo file CSS facendo clic sul link sourcemap.

Problemi relativi a Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1351214913}

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 del completamento automatico è coerente in tutti gli editor di testo, nei riquadri 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 sottile bordo punteggiato intorno all'opzione superiore 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 principale. Per il completamento automatico, premi Tab o Arrow Right.

• La console evidenzia l'opzione selezionata mentre navighi nell'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.

• Durante la modifica in mezzo al 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 relativi a Chromium: 1399436, 1276960

Varie in evidenza

Di seguito sono riportate alcune importanti correzioni di questa release:

• È stato risolto un problema di regressione in DevTools, a cui non era possibile fermarsi all'istruzione debugger negli script in linea. (1385374)
• Una nuova impostazione della console che consente di espandere o comprimere i messaggi console.trace() per impostazione predefinita. Attiva/disattiva le impostazioni da Impostazioni > Preferenze > Espandi i messaggi console.trace() per impostazione predefinita. (1139616)
• Il riquadro Snippet nel riquadro Origini supporta il completamento automatico avanzato, simile alla 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 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.