Novità di DevTools, Chrome 133

Sofia Emelianova
Sofia Emelianova

Cronologia della chat AI persistente

Il riquadro Assistenza AI ora conserva localmente la cronologia della chat tra le sessioni, in modo da poter visualizzare le conversazioni precedenti con Gemini anche dopo aver ricaricato DevTools o Chrome.

Miglioramenti del riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al pannello Rendimento.

Approfondimento sul caricamento delle immagini

La scheda Rendimento > Approfondimenti ora può evidenziare le immagini di cui puoi ottimizzare le dimensioni del file. Fai clic su un'immagine nell'approfondimento per visualizzarla evidenziata nella traccia Rete.

Il pannello Rendimento con l'approfondimento sulla pubblicazione delle immagini evidenziato.

Per scoprire di più su come ottimizzare la pubblicazione delle immagini, consulta Codificare le immagini in modo efficiente.

Navigazione da tastiera classica e moderna

Il riquadro Rendimento ora ti consente di scegliere lo stile di navigazione da tastiera che preferisci, con le seguenti differenze principali:

  • Classico: esegui lo zoom con la rotellina del mouse (touchpad su o giù) e lo scorrimento verticale con Maiusc + rotellina del mouse.
  • Moderna: scorrimento verticale con la rotellina del mouse, scorrimento orizzontale con Maiusc + rotellina del mouse e zoom con Command/Control + rotellina del mouse.

Per scegliere lo stile che preferisci, fai clic su Mostra scorciatoie nell'angolo in alto a destra del riquadro e seleziona Classico o Moderna. La finestra di dialogo delle scorciatoie fornisce anche un foglio riassuntivo delle scorciatoie disponibili.

La finestra di dialogo delle scorciatoie con le scorciatoie disponibili per il riquadro Rendimento.

Ignorare gli script non pertinenti nel grafico a fiamme

Per concentrarti meglio sul codice, ora puoi aggiungere script irrilevanti all'elenco di ignorati direttamente nel riquadro Rendimento. Il riquadro comprimerà automaticamente l'annidamento eccessivo.

Per aggiungere script all'elenco di elementi da ignorare, fai clic su Mostra finestra di dialogo delle impostazioni dell'elenco di elementi da ignorare nella barra delle azioni in alto e digita un'espressione regolare nel campo di input. Il grafico a fiamma applicherà la nuova regola durante la digitazione.

DevTools salva le regole dell'elenco ignorati che aggiungi in Impostazioni > Elenco ignorati e puoi attivarle e disattivarle a tuo piacimento nella finestra di dialogo.

Indicatore della sequenza temporale ed evidenziazione dell'intervallo al passaggio del mouse

Per aiutarti a comprendere meglio la traccia del rendimento, il riquadro Rendimento ora esegue le seguenti operazioni:

  • Mostra un marcatore verticale che si estende su tutta la traccia del rendimento quando passi il mouse sopra la cronologia.
  • Evidenzia un intervallo nella sequenza temporale quando passi il mouse sopra gli elementi nella traccia Principale.

Impostazioni di limitazione consigliate

Il riquadro Rendimento ora consiglia le impostazioni di limitazione sia nelle metriche in tempo reale sia nei menu a discesa Impostazioni di acquisizione pertinenti.

Prima e dopo l'aggiunta dei consigli di limitazione ai menu delle impostazioni.

La limitazione della CPU consigliata è (per ora) la 4x slowdown più utilizzata e il consiglio sulla rete si basa sui dati del report sull'esperienza utente di Chrome, se è attivato nelle metriche live.

Inoltre, il riquadro Rendimento ora ti ricorda le impostazioni di limitazione che hai utilizzato accanto a ogni traccia nel menu a discesa Sessioni recenti nella barra delle azioni.

Indicatori di sincronizzazione in una sovrimpressione

I marcatori di sincronizzazione sono stati spostati dalla traccia Sincronizzazione alla parte inferiore della traccia e ora vengono sovrapposti a tutte le tracce e sono visibili anche se la traccia Sincronizzazione è nascosta.

Prima e dopo lo spostamento dei marcatori nella parte inferiore della traccia.

La traccia Tempi conserva le tue chiamate mark() e measure() personalizzate.

Analisi dello stack delle chiamate JavaScript nel riepilogo

La scheda Rendimento > Riepilogo ora mostra le analisi dello stack delle chiamate JavaScript, incluse quelle asincrone.

Prima e dopo l'aggiunta delle analisi dello stack alla scheda Riepilogo.

Le impostazioni dei badge sono state spostate nel menu di Elementi

Le impostazioni dei badge nel riquadro Elementi sono state spostate da una barra delle azioni nascosta per impostazione predefinita al menu di scelta rapida corrispondente.

Prima e dopo lo spostamento delle impostazioni dei badge nel menu.

Nuovo riquadro "Novità"

Il riquadro Novità ha un nuovo look che segue più da vicino il design di Chrome.

Il vecchio e il nuovo aspetto del riquadro "Novità".

Problema di Chromium: 325441858.

Lighthouse 12.3.0

Il riquadro Lighthouse ora esegue Lighthouse 12.3.0.

Questo aggiornamento aggiunge, tra le altre cose, nuovi controlli che verificano il corretto isolamento dell'origine con COOP e una policy HSTS efficace. Consulta l'elenco completo delle modifiche.

Per scoprire le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Problema di Chromium: 40543651.

Punti salienti vari

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

  • Origini: quando viene messo in pausa, il debugger ora non passa inaspettatamente al contesto del service worker se viene creato dopo la pausa (373893057).
  • Rendimento:
    • Se passi il mouse sopra gli script, le descrizioni comando nel grafico a fiamma ora mostrano gli URL, se presenti (368541957).
    • Riepilogo: il grafico a torta viene sostituito da una rappresentazione a barre.
    • La casella di controllo Dati estensione in Impostazioni di acquisizione viene rinominata in Mostra tracce personalizzate.
    • La scheda Approfondimenti ora include una sezione Approfondimenti superati (N), compressa per impostazione predefinita.
  • Applicazione > Spazio di archiviazione: puoi creare voci di spazio di archiviazione con chiavi vuote perché sono tecnicamente valide (373703285).
  • La modalità dispositivo è ora disattivata per le pagine chrome:// (40186276).
  • Rete:
    • Se l'impostazione corrispondente è attiva, se fai clic una volta su Esporta HAR si apre un menu con due opzioni (convalida come corretto e con dati sensibili). In precedenza, il menu si apriva con un clic lungo (378076279).
    • L'opzione Copia come cURL ora utilizza l'attributo -b per ignorare i cookie ed essere più leggibile, anziché -H 'cookie:...' (40791742).
  • Accessibilità: ora puoi spostare le schede all'interno dei riquadri a sinistra o a destra con un menu contestuale (383164782).
  • Blocco richieste di rete: questa impostazione del menu dei comandi ora è sincronizzata con la casella di controllo corrispondente (378058733).

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.