Novità di DevTools, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Eseguire il debug del CSS con Gemini

In Strumenti per gli sviluppatori di Chrome è disponibile il nuovo riquadro sperimentale di assistenza AI, in cui puoi chattare con Gemini e ricevere assistenza 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'IA o fai clic sul pulsante corrispondente accanto all'elemento. In DevTools si aprirà il nuovo riquadro Assistenza AI.

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

Nel nuovo riquadro ti verrà chiesto di attivare l'impostazione corrispondente. Assicurati di soddisfare i requisiti, attiva l'opzione 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 di assistenza AI che risponde a un prompt.

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

Il team di DevTools non vede l'ora di ricevere il tuo feedback. Non esitare a lasciarlo in crbug.com/364805393.

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

Ora puoi gestire tutte le funzionalità di IA in un'unica posizione: la nuova scheda Impostazioni > Innovazioni dell'IA. Elenca considerazioni importanti, descrive le funzionalità di IA e ti consente di attivarle e disattivarle singolarmente.

La nuova scheda Innovazioni dell'IA.

Per ulteriori informazioni, vai a Impostazioni > Innovazioni AI.

Gli Approfondimenti della console sono a portata di clic

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

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

Miglioramenti al riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al riquadro Rendimento.

Annotare e condividere i risultati sul rendimento

Il riquadro Rendimento include la nuova scheda Annotazioni in una barra laterale espandibile a sinistra che semplifica la creazione di note per l'esplorazione delle tracce e la collaborazione 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 ricaricare 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 Rendimento

Ora puoi scoprire informazioni strategiche nella nuova scheda Approfondimenti nella barra laterale sinistra del riquadro Rendimento. Le informazioni vengono consolidate 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 informazioni strategiche sui problemi di prestazioni che potrebbero rallentare il tuo sito web. Per utilizzare gli approfondimenti, apri la scheda nella barra laterale sinistra del riquadro Rendimento, espandi le varie categorie, passa il mouse sopra gli elementi e fai clic su di essi. Il riquadro Rendimento evidenzierà gli eventi corrispondenti nella traccia.

Il team di DevTools attende con ansia 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 il tuo feedback in crbug.com/371170842.

Individuare più facilmente variazioni eccessive del layout

Il canale Spostamenti del layout ha un nuovo aspetto. I cambiamenti di 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 che i relativi cluster dispongono di una tabella organizzata con tempistiche, punteggi, elementi e potenziali responsabili nella scheda Riepilogo.

La situazione prima e dopo un aggiornamento della traccia "Spostamenti del layout" e la riorganizzazione della scheda "Riepilogo".

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

Lo stato prima e dopo l'aggiunta del log "Spostamenti del layout" alla visualizzazione delle metriche in tempo reale.

Problema di Chromium: 369100729.

Individuare le animazioni non composite

La scheda Animazioni ora mostra informazioni utili sulle animazioni non composte:

  • Assegna un nome alle animazioni in base alla proprietà CSS corrispondente, se presente.
  • Contrassegni 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 nel canale, il contrassegno di quelle non composite e il motivo dell'errore.

Per saperne di più, consulta Utilizzare solo proprietà per il compositore e gestire il numero di livelli.

Problema di Chromium: 41006273.

La contemporaneità hardware passa a Sensori

L'impostazione Contemporaneità hardware viene spostata dal riquadro Rendimento in un punto più appropriato, il riquadro Sensori.

Lo stato prima e dopo lo spostamento dell'impostazione "Contemporaneità hardware" nel riquadro Sensori.

Problema di Chromium: 371463665.

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

Le tracce dello stack in Console ora rilevano, ignorano, comprimono e (se espanse) rendono grigi i frame provenienti da file inclusi nell'elenco di quelli da ignorare. In precedenza, il nome della funzione nella traccia espansa non era visualizzato in grigio.

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

La situazione prima e dopo il miglioramento dell'elenco di ignoramenti nelle tracce dello stack.

Inoltre, quando fai clic con il tasto destro del mouse e selezioni Salva con nome… nel 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 gli overlay della griglia e le parole chiave a livello di CSS

La scheda Elementi > Stili ora supporta quanto segue:

  • L'overlay della griglia nell'area visibile ora mostra le griglie per le modalità di scrittura sideways-rl e sideways-lr.
  • Risolve le parole chiave a livello di CSS. In pratica, significa che, ad esempio, se inherit è un colore, accanto alla scheda Stili viene visualizzato un selettore di colori. Prima e dopo la risoluzione delle parole chiave a livello di CSS.

Problemi di Chromium: 40280717, 40706051, 40501131.

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

Lighthouse ora può generare report per le pagine non HTTP nelle modalità intervallo di tempo e istantanea.

La situazione prima e dopo l'attivazione del controllo per le pagine non HTTP nelle modalità periodo di tempo e istantanea.

Accessibilità

Questa versione include i seguenti miglioramenti dell'accessibilità:

  • In Origini > Editor, ora le schede con i file aperti possono essere chiuse mettendo lo stato attivo di selezione sul pulsante X e premendo Invio o Barra spaziatrice.
  • In Rendimento, ora puoi selezionare una voce nella traccia e premere Barra spaziatrice per aprire il menu contestuale.
  • In Rendimento, la scheda Approfondimenti nella barra laterale a sinistra è accessibile tramite tastiera e può essere selezionata con i tasti Tab.

Problema di Chromium: 372411090.

Altri punti salienti

Di seguito sono riportate alcune correzioni e miglioramenti significativi di questa release:

  • Le impostazioni di throttling ora vengono sincronizzate correttamente tra i riquadri Rendimento e Rete (370332090).
  • Applicazione > Servizi in background > Carichi speculativi > Regole ora ha un pulsante {} di stampa in formato bello simile a Origini > Editor (40279147).
  • Espressioni dinamiche: ora, se premi Tab dopo aver selezionato un'opzione di completamento automatico, esci dal campo di modifica anziché rientrare il testo (349939551).
  • Elementi > Stili: anchor() e anchor-size() supportano la nuova sintassi che consente di riordinare gli argomenti e omettere l'indicazione della direzione anchor-size() (343516786). Inoltre, è stato corretto il rendering di riserva (365802559).
  • Network: sono state corrette le anteprime GraphQL (369931288).
  • Rendimento: ora vengono registrati gli avanzamenti incrementali del caricamento e dell'elaborazione delle tracce.
  • WebAuthn: ora aggiorna dinamicamente le credenziali modificate dai metodi signal* (368467199).
  • WebAssembly: ora un avviso nella console 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.
  • Le funzionalità di IA generativa ora non richiedono la sincronizzazione delle impostazioni di Chrome.

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 gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.