Novità di DevTools, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Eseguire il debug del CSS con Gemini

Chrome DevTools riceve il nuovo riquadro sperimentale Assistenza AI, in cui puoi chattare con Gemini e ricevere aiuto per il debug del CSS.

Provalo subito! Nel riquadro Elementi, fai clic con il tasto destro del mouse su un elemento e seleziona Chiedi all'AI oppure fai clic sul pulsante corrispondente accanto all'elemento. DevTools aprirà il nuovo riquadro Assistenza AI.

L'opzione di menu "Chiedi all'AI" e il pulsante corrispondente.

Il nuovo pannello ti chiederà di attivare l'impostazione corrispondente. Assicurati di soddisfare i requisiti, attiva il pulsante di attivazione/disattivazione dell'impostazione e torna al riquadro Assistenza AI. Verrà utilizzato l'elemento selezionato come contesto. Digita la domanda sull'elemento.

Il nuovo riquadro dell'assistenza AI che risponde a un prompt.

Per scoprire di più su come utilizzare al meglio il nuovo riquadro, consulta 5 cose interessanti da fare con l'assistenza AI di DevTools e scopri l'assistenza AI per lo stile.

Il team di DevTools non vede l'ora di ricevere il tuo feedback. Puoi lasciarlo all'indirizzo crbug.com/364805393.

Controllare le funzionalità di AI in una scheda delle impostazioni dedicata

Ora puoi gestire tutte le funzionalità di AI in un unico posto: la nuova scheda Impostazioni > Innovazioni AI. Elenca considerazioni importanti, descrive le funzionalità di AI e ti consente di attivarle e disattivarle singolarmente.

La nuova scheda Innovazioni dell'AI.

Per ulteriori informazioni, vedi Impostazioni > Innovazioni dell'AI.

Console Insights è a portata di clic

DevTools non richiede più la sincronizzazione delle impostazioni attiva per le funzionalità di AI. Pertanto, gli approfondimenti della console rilasciati in precedenza, insieme all'assistenza AI per lo stile, sono a portata di clic.

Se hai eseguito l'accesso a Chrome, attiva queste funzionalità in Impostazioni > Innovazioni dell'AI e il gioco è fatto.

Miglioramenti al riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al pannello Rendimento.

Annotare e condividere i risultati del rendimento

Il riquadro Rendimento include la nuova scheda Annotazioni in una barra laterale espandibile a sinistra che semplifica il processo di creazione di note per l'esplorazione e la collaborazione delle tracce durante la condivisione dei risultati sul rendimento.

Ora puoi etichettare e collegare gli eventi con frecce ed evidenziare gli intervalli di tempo direttamente sulla traccia. Puoi quindi salvare, condividere e caricare di nuovo le tracce annotate nel riquadro Rendimento.

La nuova scheda delle annotazioni nella barra laterale a sinistra e l'evento, l'intervallo e la connessione annotati.

Ottenere informazioni sul rendimento direttamente nel riquadro Prestazioni

Ora puoi scoprire approfondimenti strategici nella nuova scheda Approfondimenti nella barra laterale sinistra del riquadro Rendimento. Gli approfondimenti vengono consolidati dal report Lighthouse e dal riquadro Informazioni sulle prestazioni che sta per essere ritirato.

La scheda Approfondimenti ha lo scopo di fornire un'analisi guidata e suggerire approfondimenti strategici sui problemi di rendimento che potrebbero rallentare il tuo sito web. Per utilizzare gli approfondimenti, apri la scheda nella barra laterale a sinistra del pannello Rendimento, espandi le varie categorie e passa il mouse sopra gli elementi e fai clic. Il riquadro Prestazioni evidenzia gli eventi corrispondenti nella traccia.

Il team di DevTools attende con interesse il tuo feedback sull'utilità degli approfondimenti, sui modi per migliorarli e sulla tua esperienza di utilizzo con altri strumenti, come PageSpeed Insights e Lighthouse. Non esitare a lasciare un feedback all'indirizzo crbug.com/371170842.

Individuare più facilmente gli eccessivi spostamenti di layout

La traccia Spostamenti del layout ha un nuovo aspetto. Gli spostamenti del layout ora sono contrassegnati da rombi viola (più visibili) e sono raggruppati in cluster in base alla loro vicinanza nella sequenza temporale. Sia i turni sia i relativi cluster vengono visualizzati in una tabella organizzata con orari, punteggi, elementi e potenziali responsabili nella scheda Riepilogo.

Il prima e il dopo di un aggiornamento della traccia "Spostamenti del layout" e della scheda "Riepilogo" riorganizzata.

Inoltre, la visualizzazione delle metriche live riceve il log Spostamenti del layout con punteggi ed elementi accanto alla scheda Interazioni.

Prima e dopo l'aggiunta del log "Spostamenti del layout" alla visualizzazione delle metriche live.

Problema di Chromium: 369100729.

Individuare le animazioni non composite

La traccia Animazioni ora mostra informazioni utili sulle animazioni non composite:

  • Assegna un nome alle animazioni in base alla proprietà CSS corrispondente, se presente.
  • Contrassegna le animazioni non composite con triangoli rossi nella traccia.
  • Mostra il motivo dell'errore di composizione nella scheda Riepilogo.

Le animazioni di denominazione prima e dopo nella traccia, contrassegnando quelle non composte e mostrando il motivo dell'errore.

Per saperne di più, vedi Attenersi alle proprietà solo del compositore e gestire il conteggio dei livelli.

Problema di Chromium: 41006273.

La concorrenza hardware viene spostata in Sensori

L'impostazione Concurrency hardware viene spostata dal pannello Prestazioni a una posizione più appropriata: il pannello Sensori.

Prima e dopo lo spostamento dell'impostazione "Concurrency hardware" nel pannello Sensori.

Problema di Chromium: 371463665.

Ignora gli script anonimi e concentrati sul tuo codice nelle analisi dello stack

Le analisi dello stack nella console ora rilevano, ignorano, comprimono e (se espansi) oscurano correttamente i frame provenienti da file inclusi nell'elenco di ignorati. In precedenza, il nome della funzione non veniva visualizzato in grigio nella traccia espansa.

Puoi anche attivare le nuove Impostazioni > Elenco ignorati > Script anonimi da eval o console per impostare DevTools in modo che ignori gli script anonimi senza URL di origine.

Prima e dopo il miglioramento dell'elenco di ignorati nelle analisi dello stack.

Inoltre, quando fai clic con il tasto destro del mouse e selezioni Salva con nome… per il log della console, il testo Mostra altro/meno non viene salvato.

Problemi di Chromium: 40279542, 40945570, 345248263.

Elementi > Stili: supporto delle modalità di scrittura sideways-* per le griglie di sovrapposizione e le parole chiave CSS

La scheda Elementi > Stili ora supporta quanto segue:

  • La griglia sovrapposta nel riquadro ora mostra le griglie per le modalità di scrittura sideways-rl e sideways-lr.
  • Risolve le parole chiave CSS. In pratica, significa che, ad esempio, se inherit è un colore, nella scheda Stili viene visualizzato un selettore colori accanto. Prima e dopo la risoluzione delle parole chiave CSS-wide.

Problemi di Chromium: 40280717, 40706051, 40501131.

Controlli Lighthouse per pagine non HTTP in modalità Periodo di tempo e Snapshot

Ora Lighthouse può generare report per pagine non HTTP nelle modalità intervallo di tempo e snapshot.

Prima e dopo l'attivazione del controllo per la pagina non HTTP nelle modalità periodo di tempo e snapshot.

Accessibilità

Questa versione include i seguenti miglioramenti dell'accessibilità:

  • In Origini > Editor, le schede con i file aperti ora possono essere chiuse selezionando il pulsante X e premendo Invio o Spazio.
  • In Rendimento, ora puoi selezionare una voce nella traccia e premere Spazio per aprire il menu contestuale.
  • In Rendimento, la scheda Approfondimenti nella barra laterale a sinistra è accessibile da tastiera e può essere selezionata con il tasto Tab.

Problema di Chromium: 372411090.

Punti salienti vari

Di seguito sono riportate alcune correzioni e alcuni miglioramenti degni di nota in questa release:

  • Le impostazioni di limitazione ora vengono sincronizzate correttamente tra i pannelli Rendimento e Rete (370332090).
  • Applicazione > Servizi in background > Caricamenti speculativi > Regole ora ha un pulsante di stampa in formato leggibile {} simile a Origini > Editor (40279147).
  • Espressioni live: se premi Tab dopo aver selezionato un'opzione di completamento automatico, il cursore esce dal campo di modifica anziché rientrare il testo (349939551).
  • Elementi > Stili: anchor() e anchor-size() supportano una nuova sintassi in cui puoi riordinare gli argomenti e omettere la direzione anchor-size() (343516786). Inoltre, rendering di riserva fisso (365802559).
  • Rete: correzione delle anteprime GraphQL (369931288).
  • Rendimento: ora vengono segnalati i progressi incrementali del caricamento e dell'elaborazione delle tracce.
  • WebAuthn: ora aggiorna dinamicamente le credenziali modificate dai metodi signal* (368467199).
  • WebAssembly: un avviso nella console ora ti informa se sono disponibili più simboli di debug per un modulo WebAssembly e quale è in uso (40879198, 369515221).
  • L'overlay di Core Web Vitals viene rimosso dalla scheda Rendering 328487897.
  • Ora le funzionalità di AI generativa non richiedono la sincronizzazione delle impostazioni di Chrome.

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.

Novità di DevTools

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