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 il profiling e ricarica la pagina.

In precedenza, il riquadro Rendimento mostrava una sequenza temporale con gli screenshot delle registrazioni precedenti. Questo ha reso 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 approccio è in linea con il riquadro Informazioni sulle prestazioni, che già lo faceva.

Problemi di Chromium: 1101268, 1382044

Aggiornamenti di Registratore

Visualizzare ed evidenziare il codice del flusso utente in Registratore

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

Registratore evidenzia il codice corrispondente quando passi il mouse sopra ogni passaggio a sinistra, facilitando 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 acquisiscono 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 i 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

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

Problema di Chromium: 1381971

Formattazione automatica in-place

Il riquadro Origini ora esegue automaticamente la formattazione dei file di origine minimizzati in situ. Per annullare l'operazione, puoi fare clic sul pulsante di formattazione { }.

In precedenza, il pannello Origini mostrava i contenuti minimizzati per impostazione predefinita. Per formattare i contenuti, dovevi fare clic manualmente sul pulsante di stampa in formato. Inoltre, i contenuti con la stampa bella non venivano visualizzati nella stessa scheda, ma in un'altra scheda ::formatted.

Problemi di Chromium: 1383453, 1382752, 1382397

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

Il riquadro Origini ha migliorato l'evidenziazione della sintassi per diversi formati di file ampiamente utilizzati, consentendo di leggere il codice più facilmente e di riconoscerne la struttura, tra cui 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 il valore in anteprima.

Inoltre, DevTools ora mostra la mappa di origine di uno 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 la compilazione automatica.
• Il comportamento di Arrow right e Enter varia in base al contesto.
• L'esperienza di completamento automatico è coerente tra 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 tratteggiato 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 principale. Per il completamento automatico, premi Tab o Arrow Right.

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

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

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

Problemi di Chromium: 1399436, 1276960

Altri punti salienti

Di seguito sono riportate alcune correzioni importanti di questa release:

• È stato risolto un problema di regressione in Strumenti per sviluppatori, per cui non si riusciva a 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 tramite Impostazioni > Preferenze > Espandi i messaggi di console.trace() per impostazione predefinita. (1139616)
• Il riquadro Snippet nel riquadro Origini supporta il completamento automatico avanzato, in modo simile alla console. (772949)

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 i tuoi 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.