Novità di DevTools (Chrome 102)

Jecelyn Yeen

Funzionalità di anteprima: nuovo riquadro Informazioni sul rendimento

Utilizza il riquadro Informazioni 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 caso d'uso. Ad esempio, misuriamo il caricamento di questa pagina demo.

Nuovo riquadro Informazioni sul rendimento

Una volta completata la registrazione, le informazioni sulle prestazioni saranno disponibili nel riquadro Approfondimenti. Fai clic su ogni elemento dell'approfondimento (ad esempio Richiesta di blocco del rendering, variazione del layout) per comprendere il problema e le potenziali correzioni.

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

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

Problema relativo a Chromium: 1270700

Nuove scorciatoie per emulare temi chiari e scuri

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

In precedenza, l'emulazione dei temi nella scheda Rendering richiedeva ulteriori passaggi.

Nuove scorciatoie per emulare temi chiari e scuri

Problema relativo a Chromium: 1314299

Sicurezza migliorata nella scheda Anteprima di rete

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

Ad esempio, il primo screenshot mostra una pagina che include contenuti misti. La pagina viene caricata tramite una connessione HTTPS protetta, mentre 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, il foglio di stile non veniva bloccato in precedenza (e lo sfondo diventava rosso). Ora è bloccato come previsto (secondo screenshot).

Migliorare la sicurezza nella scheda Anteprima di rete

Problema relativo a Chromium: 833147

Miglioramento del ricaricamento nel punto di interruzione

Il debugger ora termina l'esecuzione dello script quando viene ricaricato nel punto di interruzione.

Ad esempio, in precedenza lo script ha avuto un loop infinito durante l'impostazione e il ricaricamento nel punto di interruzione ReactDOM in questa reazione demo. Il riquadro Origini si è interrotto a causa del loop infinito.

Continuare a eseguire JavaScript causa molti problemi agli sviluppatori e il renderer potrebbe rimanere in uno stato non funzionante. Questa modifica allinea il comportamento di debug con altri browser, ad esempio Firefox.

Miglioramento del ricaricamento nel punto di interruzione

Problemi relativi a 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 il gestore window.onerror e vengono inviati come eventi "error" sull'oggetto finestra.

Gestire gli errori di esecuzione dello script nella console

Problema relativo a Chromium: 1295750

Esegui il commit dell'espressione attiva con Invio

Dopo aver digitato un'espressione attiva, puoi fare clic su Enter per eseguire il commit dell'espressione. In precedenza, premendo Invio consentiva l'aggiunta di nuove righe. Questo non è coerente con altre parti di DevTools.

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

Esegui il commit dell'espressione attiva con Invio

Problema relativo a Chromium: 1260744

Annulla la registrazione del flusso utente all'inizio

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

Annulla la registrazione del flusso utente all'inizio

Problema relativo a Chromium: 1257499

Visualizza gli pseudoelementi 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 menzionato nella specifica, quando più stili entrano in conflitto, lo stile vincente viene determinato a cascata. Questa nuova funzionalità consente di comprendere l'ereditarietà e la priorità delle regole.

Visualizza gli pseudoelementi di evidenziazione ereditati nel riquadro Stili

Problema relativo a Chromium: 1024156

Varie in evidenza

Di seguito sono riportate alcune importanti correzioni di questa release:

  • Il riquadro Proprietà ora mostra le proprietà della funzione di accesso con un valore per impostazione predefinita. In precedenza è stato nascosto per errore. (1309087)
  • Il riquadro Stili ora mostra correttamente le regole @support sostituite come barrate. In precedenza, le regole non venivano 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 in modo ricorsivo di un oggetto nella console a un massimo di 100 in modo che non rimanga attiva all'infinito per gli oggetti circolari. (1272450)

[Sperimentale] Copia modifiche CSS

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

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

Nella scheda Modifiche viene aggiunto anche un nuovo pulsante Copia per aiutarti a monitorare e copiare con facilità le modifiche CSS.

Copia modifiche CSS

Problema relativo a Chromium: 1268754

[Sperimentale] Selezione del colore al di fuori del browser

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

Nel riquadro Stili, fai clic sull'anteprima di un colore qualsiasi per aprire il selettore colori. Usa il contagocce per scegliere il colore ovunque ti trovi.

Scelta del colore al di fuori del browser

Problema relativo a 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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema di DevTools utilizzando Altre opzioni   Altro > Guida > Segnala un problema di DevTools in DevTools.
  • Invia un tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

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