Novità di DevTools, Chrome 131

Sofia Emelianova
Sofia Emelianova

Eseguire il debug di CSS con Gemini

Chrome DevTools riceve il nuovo riquadro sperimentale di assistenza IA in cui puoi chattare con Gemini e ricevere assistenza per il debug del tuo CSS.

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

L'opzione di menu "Ask AI" 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 IA. 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 Impostazioni dedicata

Ora puoi gestire tutte le funzionalità di IA in un unico posto: la nuova scheda Impostazioni > Innovazioni IA. Elenca considerazioni importanti, descrive le funzionalità di IA e 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ù l'attivazione della sincronizzazione delle impostazioni 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 IA e il gioco è fatto.

Miglioramenti al riquadro sul rendimento

Questa versione introduce una serie di miglioramenti al riquadro Rendimento.

Annota e condividi 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.

Ricevi 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 rendimento che potrebbero rallentare il 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. Il riquadro Rendimento evidenzia gli eventi corrispondenti nella traccia.

Il team DevTools è impaziente di ricevere 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. Le variazioni del layout sono ora contrassegnate da rombi viola (più visibili) e sono raggruppate in cluster in base alla loro vicinanza sulla sequenza temporale. Sia le variazioni sia i relativi cluster ricevono una tabella organizzata con tempistiche, punteggi, elementi e potenziali colpe nella scheda Riepilogo.

Prima e dopo un aggiornamento della traccia "Variazioni del layout" e riorganizzata la scheda "Riepilogo".

Inoltre, la visualizzazione delle metriche in tempo reale ottiene il log Variazioni 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 relativo a Chromium: 369100729.

Individua le animazioni non composte

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

  • Assegna un nome alle animazioni in base alla proprietà CSS corrispondente, se presente.
  • Contrassegna le animazioni non composte 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 si sposta dal riquadro Prestazioni a una posizione più appropriata: il riquadro Sensori.

Prima e dopo lo spostamento dell'impostazione "Contemporaneità hardware" nel riquadro Sensori.

Problema relativo a Chromium: 371463665.

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

Le analisi dello stack nella console ora rilevano, ignorano, comprimono e, se sono espansi, in grigio i frame provenienti da file nell'elenco di elementi ignorati. 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.

Prima e dopo il miglioramento, ignora l'elenco nelle analisi dello stack.

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

La scheda Elementi > Stili ora supporta quanto segue:

  • L'overlay a 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 relativi a Chromium: 40280717, 40706051, 40501131.

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

Lighthouse ora può generare report per pagine non HTTP in modalità Periodo di tempo e Snapshot.

Le fasi prima e dopo l'abilitazione del controllo per le pagine non HTTP in modalità intervallo di tempo e snapshot.

Accessibilità

Questa versione include i seguenti miglioramenti dell'accessibilità:

  • In Origini > Editor, le schede con file aperti ora possono essere chiuse selezionando il 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 da tastiera e può essere consultata tramite schede.

Problema relativo a Chromium: 372411090.

Altri punti salienti

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

  • Le impostazioni di limitazione ora sono sincronizzate correttamente tra i riquadri Prestazioni e Rete (370332090).
  • Applicazione > Servizi in background > Caricamenti speculativi > Regole ora include un pulsante per la stampa semplificata {} 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 una nuova sintassi in cui è possibile riordinare gli argomenti e omettere la 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 in modo dinamico 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 se è in uso quello in uso (40879198, 369515221).
  • L'overlay 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 danno accesso alle ultime funzionalità di DevTools, ti consentono di testare le API delle piattaforme web all'avanguardia e ti aiutano a individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altra cosa relativa a DevTools.

Novità di DevTools

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