Novità di DevTools (Chrome 102)

Jecelyn Yeen

Funzionalità in anteprima: nuovo riquadro Informazioni sulle prestazioni

Utilizza il riquadro Informazioni sulle prestazioni per ottenere informazioni strategiche e basate su casi d'uso sul rendimento del tuo sito web.

Apri il riquadro e avvia una nuova registrazione in base al tuo caso d'uso. Ad esempio, misuriamo il caricamento della pagina di questa pagina demo.

Nuovo riquadro Informazioni sulle prestazioni

Una volta completata la registrazione, riceverai gli approfondimenti sul rendimento nel riquadro Approfondimenti. Fai clic su ogni elemento di approfondimento (ad esempio, richiesta di blocco del rendering, spostamento del layout) per comprendere il problema e le potenziali soluzioni.

Per saperne di più, consulta la documentazione del riquadro Approfondimenti sul rendimento con il tutorial passo passo.

Si tratta di una funzionalità di anteprima che aiuta gli sviluppatori web (in particolare gli esperti non esperti di prestazioni) a identificare e risolvere potenziali problemi di prestazioni. Il nostro team sta lavorando attivamente a questa funzionalità e siamo impazienti di ricevere il tuo feedback per ulteriori miglioramenti.

Problema di Chromium: 1270700

Nuove scorciatoie per emulare i temi chiaro e scuro

Ora puoi emulare i temi chiaro e scuro più rapidamente (funzionalità dei contenuti multimediali del CSS prefers-color-scheme) con le nuove scorciatoie nel riquadro Stili.

In precedenza, erano necessari più passaggi per emulare i temi nella scheda Rendering.

Nuove scorciatoie per emulare i temi chiaro e scuro

Problema di Chromium: 1314299

Maggiore sicurezza nella scheda Anteprima rete

DevTools ora applica i criteri di sicurezza del contenuto (CSP) nella scheda Anteprima del riquadro Rete.

Ad esempio, il primo screenshot mostra una pagina che contiene contenuti misti. La pagina viene caricata tramite una connessione HTTPS sicura, ma il foglio di stile viene caricato tramite una connessione HTTP non sicura.

Il browser ha bloccato la richiesta del foglio di stile per impostazione predefinita. Tuttavia, quando aprivi la pagina tramite la scheda Anteprima nel riquadro Rete, il foglio di stile non veniva bloccato in precedenza (quindi lo sfondo diventava rosso). Ora è bloccato come previsto (secondo screenshot).

Migliorare la sicurezza nella scheda Anteprima rete

Problema di Chromium: 833147

Ricaricamento migliorato al punto di interruzione

Il debugger ora termina l'esecuzione dello script durante il ricaricamento in corrispondenza del punto di interruzione.

Ad esempio, lo script entrava in un ciclo infinito in precedenza durante l'impostazione e il ricaricamento al punto di interruzione ReactDOM in questa demo di React. Il riquadro Origini è stato interrotto a causa del ciclo infinito.

L'esecuzione continua di JavaScript sta causando molti problemi agli sviluppatori e potrebbe lasciare il renderer in uno stato non funzionante. Questa modifica allinea il comportamento di debug ad altri browser come Firefox.

Ricaricamento migliorato al punto di interruzione

Problemi di Chromium: 1014415, 1004038, 1112863, 1134899

Aggiornamenti della console

Gestire gli errori di esecuzione degli script nella console

Gli errori durante la valutazione dello script nella console ora generano eventi di errore appropriati che attivano il gestore window.onerror e vengono inviati come eventi "error" sull'oggetto finestra.

Gestire gli errori di esecuzione degli script nella console

Problema di Chromium: 1295750

Confermare l'espressione in tempo reale con Invio

Una volta terminata la digitazione di un'espressione live, puoi fare clic su Enter per confermarla. In precedenza, premendo Invio venivano aggiunte nuove righe. Ciò non è coerente con altre parti di DevTools.

Per aggiungere una nuova riga nell'editor di espressioni live, utilizza Shift + Enter.

Confermare l'espressione in tempo reale con Invio

Problema di Chromium: 1260744

Annullare la registrazione del flusso utente all'inizio

Puoi annullare la registrazione all'inizio della registrazione del flusso utente. In precedenza, non era possibile annullare la registrazione.

Annullare la registrazione del flusso utente all'inizio

Problema di Chromium: 1257499

Visualizzare gli pseudo-elementi di evidenziazione ereditati nel riquadro Stili

Visualizza gli pseudo-elementi di evidenziazione ereditati (ad es. ::selection, ::spelling-error, ::grammar-error e ::highlight) nel riquadro Stili. In precedenza, queste regole non venivano visualizzate.

Come indicato nella specifica, quando più stili sono in conflitto, la cascata determina lo stile vincente. Questa nuova funzionalità ti aiuta a comprendere l'ereditarietà e la priorità delle regole.

Visualizzare gli pseudo-elementi di evidenziazione ereditati nel riquadro Stili

Problema di Chromium: 1024156

Punti salienti vari

Di seguito sono riportate alcune correzioni degne di nota in questa release:

  • Il riquadro Proprietà ora mostra le proprietà di accesso con il valore per impostazione predefinita. In precedenza era stato nascosto per errore. (1309087)
  • Il riquadro Stili ora mostra correttamente le regole @support sostituite come barrate. In precedenza, le regole non erano barrate. (1298025)
  • È stata corretta la logica di formattazione CSS nel riquadro Origini che causava la presenza di più righe vuote durante la modifica del CSS. (1309588)
  • Limita l'opzione Espandi ricorsivamente di un oggetto nella console a un massimo di 100 in modo che non continui all'infinito per gli oggetti circolari. (1272450)

[Sperimentale] Copia modifiche CSS

Con questo esperimento, il riquadro Stili evidenzia in verde le modifiche CSS. Puoi passare il mouse sopra le regole modificate e fare clic sul nuovo pulsante di copia accanto per copiarle.

A parte questo, puoi copiare tutte le modifiche CSS nelle dichiarazioni facendo clic con il tasto destro del mouse su una regola e selezionando Copia tutte le modifiche CSS.

Nella scheda Modifiche è stato aggiunto anche un nuovo pulsante Copia per aiutarti a tenere traccia e copiare facilmente le modifiche CSS.

Copia modifiche CSS

Problema di Chromium: 1268754

[Sperimentale] Scegliere il colore al di fuori del browser

Attiva questo esperimento per scegliere un colore al di fuori del browser con il selettore colori. In precedenza, potevi scegliere un colore solo all'interno del browser.

Nel riquadro Stili, fai clic su un'anteprima del colore per aprire il selettore di colori. Usa il contagocce per scegliere un colore ovunque.

Scelta del colore al di fuori del browser

Problema di Chromium: 1245191

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.