Novità di DevTools (Chrome 102)

Jecelyn Yeen

Funzionalità in anteprima: nuovo riquadro Informazioni sulle prestazioni

Utilizza il riquadro Approfondimenti sul rendimento per ottenere informazioni strategiche e basate sui 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 dimostrativa.

Nuovo riquadro Informazioni sulle prestazioni

Una volta completata la registrazione, vengono visualizzati gli approfondimenti sul rendimento nel riquadro Approfondimenti. Fai clic su ogni elemento di informazione (ad es. 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 e guarda il tutorial passo passo.

Questa è una funzionalità di anteprima che aiuta gli sviluppatori web (in particolare quelli 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 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

Sicurezza migliorata 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 contenente 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 hai aperto la pagina tramite la scheda Anteprima nel riquadro Rete, lo stile non era stato bloccato in precedenza (di conseguenza lo sfondo è diventato rosso). Ora è bloccato come previsto (secondo screenshot).

Migliorare la sicurezza nella scheda Anteprima rete

Problema di Chromium: 833147

Ricaricamento migliorato al punto di interruzione

Ora il debugger termina l'esecuzione dello script al ricaricamento al punto di interruzione.

Ad esempio, in precedenza lo script entrava in un loop infinito quando impostava e ricaricava il punto di interruzione ReactDOM in questa demo di React. Il riquadro Origini si è interrotto a causa del loop infinito.

La continua esecuzione 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 dello script nella console

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

Gestire gli errori di esecuzione dello script nella console

Problema di Chromium: 1295750

Apportare modifiche all'espressione in tempo reale con Invio

Una volta digitata un'espressione dinamica, puoi fare clic su Enter per confermarla. In precedenza, premendo Invio si aggiungevano nuove righe. Questo non è coerente con altre parti di DevTools.

Per aggiungere una nuova riga nell'editor dell'espressione dinamica, utilizza Shift + Enter.

Apportare modifiche all'espressione in tempo reale con Invio

Problema di Chromium: 1260744

Annullare la registrazione del flusso utente all'avvio

Puoi annullare la registrazione durante l'avvio della registrazione del flusso utente. In precedenza, non era possibile annullare la registrazione.

Annullare la registrazione del flusso utente all'avvio

Problema di Chromium: 1257499

Mostrare 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 modalità a cascata determina lo stile migliore. Questa nuova funzionalità ti aiuta a comprendere l'ereditarietà e la priorità delle regole.

Mostrare gli pseudo-elementi di evidenziazione ereditati nel riquadro Stili

Problema di Chromium: 1024156

Altri punti salienti

Di seguito sono riportate alcune correzioni importanti di questa release:

  • Il riquadro Proprietà ora mostra le proprietà di accesso con valore per impostazione predefinita. In precedenza era stata nascosta per errore. (1309087)
  • Il riquadro Stili ora mostra correttamente le regole @support sostituite con barrato. In precedenza, le regole non erano barrate. (1298025)
  • È stata corretta la logica di formattazione CSS nel riquadro Origini che causava più righe vuote durante la modifica del CSS. (1309588)
  • Imposta un limite massimo di 100 per l'opzione Espandi in modo ricorsivo di un oggetto nella console 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 al CSS. Puoi passare il mouse sopra le regole modificate e fare clic sul nuovo pulsante di copia accanto per copiarle.

Inoltre, 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.

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

Copia modifiche CSS

Problema di Chromium: 1268754

[Sperimentale] Selezione del 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 di colore per aprire il selettore dei colori. Usa il contagocce per scegliere un colore da qualsiasi punto.

Selezione del colore al di fuori del browser

Problema di Chromium: 1245191

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.