Novità di DevTools, Chrome 133

Sofia Emelianova
Sofia Emelianova

Cronologia chat con IA permanente

Il riquadro Assistenza AI ora mantiene in locale la cronologia chat tra le sessioni, in modo da poter visualizzare le conversazioni precedenti con Gemini anche dopo il ricaricamento di DevTools o Chrome.

Miglioramenti al riquadro sul rendimento

Questa versione introduce una serie di miglioramenti al riquadro 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 nel canale Rete.

Il riquadro Rendimento con l'informazione relativa al caricamento delle immagini evidenziata.

Per scoprire di più su come ottimizzare il caricamento 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 tramite tastiera che preferisci, con le seguenti differenze principali:

  • Classica: zoom con la rotellina del mouse (touchpad verso l'alto o verso il basso) e scorrimento verticale con Maiusc + rotellina del mouse.
  • Moderna: scorrimento verticale con la rotellina del mouse, scorrimento orizzontale con Maiusc + rotellina del mouse ed esecuzione di zoom con Comando/Control + rotellina del mouse.

Per scegliere lo stile che preferisci, nell'angolo in alto a destra del riquadro fai clic su Mostra scorciatoie e seleziona Classico o Moderno. La finestra di dialogo delle scorciatoie fornisce anche un riepilogo 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 comprime automaticamente le nidificazioni eccessive.

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 di azioni in alto e digita un'espressione regolare nel campo di immissione. Il grafico a forma di fiamma applicherà la nuova regola durante la digitazione.

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

Evidenziazione dell'intervallo e del cursore della sequenza temporale al passaggio del mouse

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

  • Mostra un indicatore verticale che copre l'intera traccia del rendimento quando passi il mouse sopra la Sequenza temporale.
  • Evidenzia un intervallo nella sequenza temporale quando passi il mouse sopra gli elementi nella traccia Principale.

Impostazioni di throttling consigliate

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

Le immagini prima e dopo l'aggiunta dei consigli di throttling ai menu delle impostazioni.

Il throttling della CPU consigliato è (per ora) il più utilizzato 4x slowdown e il consiglio sulla rete si basa sui dati del Report sull'esperienza utente di Chrome, se è attivato nelle metriche in tempo reale.

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

Indicatori dei tempi in un overlay

Gli indicatori di tempo sono stati spostati dalla traccia Tempi alla parte inferiore della traccia e ora vengono sovrapposti a tutte le tracce e sono visibili anche se la traccia Tempi è nascosta.

Prima e dopo lo spostamento degli indicatori nella parte inferiore della traccia.

Il monitoraggio Tempi conserva le chiamate mark() e measure() personalizzate.

Analisi dello stack delle chiamate JavaScript in Riepilogo

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

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

Le impostazioni dei badge sono state spostate nel menu di Elementi

Le impostazioni dei badge nel riquadro Elementi sono passate da una barra di azioni nascosta per impostazione predefinita al menu corrispondente del clic con il tasto destro del mouse.

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

Nuovo riquadro "Novità"

Il riquadro Novità ha un nuovo aspetto 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 pannello Lighthouse ora esegue Lighthouse 12.3.0.

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

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

Problema di Chromium: 40543651.

Altri punti salienti

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

  • Origini: quando è in pausa, il Debugger ora non passa in modo imprevisto al contesto del worker di servizio se viene creato dopo la pausa (373893057).
  • Rendimento:
    • Quando passi il mouse sopra gli script, le descrizioni comando nel grafico a forma di 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 delle estensioni in Impostazioni di acquisizione è stata rinominata in Mostra tracce personalizzate.
    • La scheda Approfondimenti ora contiene una sezione Approfondimenti superati (N), compressa per impostazione predefinita.
  • Application > Storage: puoi creare voci 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 è attivata, facendo clic su Esporta HAR si apre un menu con due opzioni (convalidato come corretto e con dati sensibili). In precedenza, il menu si apriva con un clic prolungato (378076279).
    • Copia come cURL ora utilizza l'attributo -b per bypassare i cookie ed essere più leggibile, anziché -H 'cookie:...' (40791742).
  • Accessibilità: ora puoi spostare le schede all'interno dei riquadri verso sinistra o verso 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 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.

Novità di DevTools

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