Novità di DevTools (Chrome 89)

Supporto del debug per le violazioni dei tipi attendibili

Punto di interruzione sulle violazioni dei tipi attendibili

Ora puoi impostare punti di interruzione e rilevare eccezioni per le violazioni di tipo attendibile nel riquadro Origini.

L'API Trusted Tipi aiuta a prevenire le vulnerabilità cross-site scripting (XSS) basate su DOM. Scopri come scrivere, rivedere e gestire le applicazioni prive di vulnerabilità DOM XSS con TrustedType qui.

Nel riquadro Origini, apri il riquadro della barra laterale debugger. Espandi la sezione Punti di interruzione violazione CSP e attiva la casella di controllo Violazioni di tipo attendibile per mettere in pausa le eccezioni. Fai una prova con questa pagina demo.

Punto di interruzione sulle violazioni dei tipi attendibili

Problema di Chromium: 1142804

Il riquadro Origini ora mostra un'icona di avviso accanto alla riga che viola il tipo di attendibile. Passateci sopra il mouse per visualizzare l'anteprima dell'eccezione. Fai clic per espandere la scheda Problemi e visualizzare ulteriori dettagli sulle eccezioni e indicazioni su come risolvere il problema.

Collega il problema nel riquadro Origini alla scheda Problemi

Problema di Chromium: 1150883

Acquisisci screenshot del nodo oltre l'area visibile

Ora puoi acquisire screenshot del nodo per un nodo completo, inclusi i contenuti below the fold. In precedenza, lo screenshot veniva tagliato per i contenuti non visibili nell'area visibile. Ora anche gli screenshot a pagina intera sono precisi.

Nel riquadro Elementi, fai clic con il tasto destro del mouse su un elemento e seleziona Acquisisci screenshot nodo.

Acquisisci screenshot del nodo oltre l'area visibile

Problema di Chromium: 1003629

Nuova scheda Trust Tokens per le richieste di rete

Esamina le richieste di rete Trust Token con la nuova scheda Trust Token (Token di attendibilità).

Trust Token è una nuova API che aiuta a contrastare le attività fraudolente e a distinguere i bot da esseri umani reali, senza monitoraggio passivo. Scopri come iniziare a utilizzare i token di attendibilità.

Nelle prossime versioni sarà disponibile un ulteriore supporto per il debug.

Nuova scheda Trust Token per le richieste di rete

Problema di Chromium: 1126824

Lighthouse 7 nel pannello Lighthouse

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 7. Consulta le note sulla versione per un elenco completo delle modifiche.

Lighthouse 7 nel pannello Lighthouse

Nuovi controlli in Lighthouse 7:

  • Precarica l'immagine Largest Contentful Paint (LCP). Controlla se l'immagine utilizzata dall'elemento LCP viene precaricata per migliorare il tempo LCP.
  • Problemi registrati nel riquadro Issues. Indica un elenco di problemi non risolti nel riquadro Issues.
  • App web progressive (PWA). La categoria PWA è cambiata in modo abbastanza significativo.
  • Il gruppo Installabili ora si basa interamente sui controlli delle funzionalità che abilitano i criteri di Chrome installabili. Si tratta degli stessi indicatori presenti nel riquadro Manifest.

    • L'audit "Registra un service worker..." viene spostato nel gruppo Ottimizzato PWA e il controllo "Utilizza HTTPS" è ora incluso nel controllo "Requisiti di installazione" della chiave.
    • Il gruppo Rapido e affidabile è stato rimosso. Poiché il rinnovato controllo "Requisiti di installazione" include il controllo delle funzionalità offline, il controllo "La pagina corrente e start_url rispondono con 200 quando offline" è stato rimosso. Anche il controllo "Il caricamento della pagina è abbastanza veloce sulla rete mobile" è stato rimosso.

Problema di Chromium: 772558

Aggiornamenti del riquadro degli elementi

Supporto dell'applicazione dello stato :target del CSS

Ora puoi utilizzare DevTools per forzare e ispezionare lo stato :target del CSS.

Nel riquadro Elementi, seleziona un elemento e attivane lo stato. Attiva la casella di controllo :target per forzare e ispezionare gli stili.

Utilizza la pseudo-classe :target per applicare uno stile all'elemento quando l'hash nell'URL e l'ID di un elemento sono uguali. Guarda questa demo per provarla in autonomia. La nuova funzionalità DevTools consente di testare questi stili senza dover modificare continuamente l'URL.

forzatura dello stato ":target" del CSS

Problema di Chromium: 1156628

Nuova scorciatoia per duplicare l'elemento

Utilizza la nuova scorciatoia Duplica elemento per clonare subito un elemento.

Fai clic con il tasto destro del mouse su un elemento nel riquadro Elementi e seleziona Duplica elemento. Sotto verrà creato un nuovo elemento.

In alternativa, puoi duplicare l'elemento con le scorciatoie da tastiera:

  • Mac: Shift + Option + ⬇️
  • Finestra/ Linux: Shift + Alt + ⬇️

Elemento duplicato

Problemi di Chromium: 1150797, 1150797

Selettori colore per le proprietà CSS personalizzate

Il riquadro Stili ora mostra i selettori dei colori per le proprietà CSS personalizzate.

Inoltre, puoi tenere premuto il tasto Shift e fare clic sul selettore colori per scorrere le rappresentazioni RGBA, HSLA ed Hex del valore del colore.

Selettori colore per le proprietà CSS personalizzate

Problema di Chromium: 1147016

Nuove scorciatoie per copiare le proprietà CSS

Ora puoi copiare le proprietà CSS più velocemente con alcune nuove scorciatoie.

Nel riquadro Elementi, seleziona un elemento. Poi, fai clic con il tasto destro del mouse su una classe CSS o una proprietà CSS nel riquadro Stili per copiare il valore.

Nuove scorciatoie per copiare le proprietà CSS

Opzioni di copia per la classe CSS:

  • Copia selettore. Copia il nome del selettore attuale.
  • Copia regola. Copia la regola del selettore attuale.
  • Copia tutte le dichiarazioni: copia tutte le dichiarazioni sotto la regola attuale, incluse le proprietà non valide e con prefisso.

Opzioni di copia per la proprietà CSS:

  • Copia dichiarazione. Copia la dichiarazione della riga attuale.
  • Copia proprietà: Copia la proprietà della riga corrente.
  • Copia valore: copia il valore della riga corrente.

Problema di Chromium: 1152391

Aggiornamenti dei cookie

Nuova opzione per mostrare i cookie decodificati nell'URL

Ora puoi scegliere di visualizzare il valore dei cookie decodificati nell'URL nel riquadro Cookie.

Vai al riquadro Applicazione e seleziona il riquadro Cookie. Seleziona uno qualsiasi dei cookie nell'elenco. Attiva la nuova casella di controllo Mostra URL decodificato per visualizzare il cookie decodificato.

Opzione per mostrare i cookie decodificati nell'URL

Problema di Chromium: 997625

Cancella solo i cookie visibili

Il pulsante Cancella tutti i cookie nel riquadro Cookie è ora sostituito dal pulsante Cancella cookie filtrati.

Nel riquadro Applicazione > riquadro Cookie, inserisci il testo nella casella di testo per filtrare i cookie. Nel nostro esempio, l'elenco viene filtrato in base a "PREF". Fai clic sul pulsante Cancella cookie filtrati per eliminare i cookie visibili. Cancella il testo del filtro; gli altri cookie rimarranno nell'elenco. In precedenza, avevi solo la possibilità di cancellare tutti i cookie.

Cancella solo i cookie visibili

Problema di Chromium: 978059

Nuova opzione per cancellare i cookie di terze parti nel riquadro Spazio di archiviazione

Quando cancelli i dati del sito nel riquadro Archiviazione, DevTools ora cancella solo i cookie proprietari per impostazione predefinita. Abilita inclusi i cookie di terze parti per cancellare anche i cookie di terze parti.

Opzione per cancellare i cookie di terze parti

Problema di Chromium: 1012337

Modifica client hint user agent per dispositivi personalizzati

Ora puoi modificare Client hint user agent per i dispositivi personalizzati.

Vai a Impostazioni > Dispositivi e fai clic su Aggiungi dispositivo personalizzato.... Espandi la sezione Suggerimenti client dello user agent per modificare i suggerimenti client.

Modifica client hint user agent

Gli user agent client hint sono un'alternativa alla stringa user agent e consentono agli sviluppatori di accedere alle informazioni sul browser di un utente in modo ergonomico e incentrato sulla tutela della privacy. Scopri di più sui client hint user agent in web.dev/user-agent-client-hints/.

Problema di Chromium: 1073909

Aggiornamenti del riquadro Network

Mantieni impostazione "Registra log di rete"

DevTools ora mantiene l'impostazione "Registra log di rete". In precedenza, DevTools reimpostava la scelta dell'utente ogni volta che una pagina viene ricaricata.

Registra log di rete

Problema di Chromium: 1122580

Visualizzare le connessioni WebTransport nel riquadro Rete

Nel riquadro Rete sono ora visualizzate le connessioni WebTransport.

Connessioni WebTransport

WebTransport è una nuova API che offre messaggistica client-server a bassa latenza e bidirezionale. Scopri di più sui suoi casi d'uso e su come fornire feedback sul futuro dell'implementazione in web.dev/webtransport/.

Problema di Chromium: 1152290

"Online" è stato rinominato in "Nessuna limitazione"

L'opzione di emulazione della rete "Online" è ora rinominata in "Nessuna limitazione".

Registra log di rete

Problema di Chromium: 1028078

Nuove opzioni di copia nel riquadro Console, Origini e Stili

Nuove scorciatoie per copiare l'oggetto nel riquadro Console e Origini

Ora puoi copiare i valori degli oggetti con le nuove scorciatoie nel riquadro Console e Origini. Questo metodo è pratico, soprattutto quando hai un oggetto di grandi dimensioni (ad es. un array lungo) da copiare.

Copia oggetto nella console

Copia oggetto nel riquadro Origini

Problemi di Chromium: 1149859, 1148353

Nuove scorciatoie per copiare il nome del file nel riquadro Origini e nel riquadro Stili

Ora puoi copiare il nome del file facendo clic con il pulsante destro del mouse su:

  • un file nel riquadro Origini oppure
  • Il nome del file nel riquadro Stili nel riquadro Elementi.

Seleziona Copia nome file dal menu contestuale per copiare il nome del file.

Copia il nome del file nel riquadro Origini

Copia il nome del file nel riquadro Stili

Problema di Chromium: 1155120

Aggiornamenti della visualizzazione dei dettagli del frame

Nuove informazioni sui Service worker nella visualizzazione dei dettagli del frame

DevTools ora mostra i service worker dedicati sotto il frame che li crea.

Nel riquadro Applicazione, espandi un frame con i service worker, quindi seleziona un service worker nella struttura ad albero Service worker per visualizzare i dettagli.

Informazioni su Service worker nella visualizzazione dei dettagli del frame

Problema di Chromium: 1122507

Misurare le informazioni sulla memoria nella visualizzazione dei dettagli del frame

Lo stato dell'API performance.measureMemory() è ora visualizzato nella sezione Disponibilità dell'API.

La nuova API performance.measureMemory() stima l'utilizzo della memoria dell'intera pagina web. Scopri come monitorare l'utilizzo totale della memoria della pagina web con questa nuova API in questo articolo.

Misura memoria

Problema di Chromium: 1139899

Fornire un feedback dalla scheda Problemi

Se vuoi migliorare un messaggio relativo a un problema, vai alla scheda Problemi dalla console o Altre impostazioni > Altri strumenti > Problemi > per aprire la scheda Problemi. Espandi un messaggio relativo al problema e fai clic su Il messaggio relativo al problema ti è utile?, quindi puoi fornire un feedback nel popup.

Link per il feedback sul problema

Frame eliminati nel riquadro Prestazioni

Quando analizzi le prestazioni del caricamento nel riquadro Prestazioni, la sezione Frame ora contrassegna in rosso i frame eliminati. Passa il mouse sopra per conoscere la frequenza fotogrammi.

Fotogrammi eliminati

Problema di Chromium: 1075865

Emula pieghevole e doppio schermo in modalità dispositivo

Ora puoi emulare i dispositivi con doppio schermo e pieghevoli in DevTools.

Dopo aver attivato la barra degli strumenti del dispositivo, seleziona uno dei seguenti dispositivi: Surface Duo o Samsung Galaxy Fold.

Fai clic sull'icona del nuovo intervallo per passare dalla postura a schermo singolo, piegata a quella a schermo doppio o aperta.

Puoi anche attivare le funzionalità sperimentali della Web Platform per accedere alla nuova funzionalità CSS media screen-spanning e all'API JavaScript getWindowSegments. L'icona sperimentale mostra lo stato del flag Funzionalità sperimentali della piattaforma web. L'icona è evidenziata quando il flag è attivo. Vai a chrome://flags e attiva/disattiva il flag.

Emula Dual Screen

Problema di Chromium: 1054281

Funzionalità sperimentali

Automatizza i test del browser con Puppeteer Registratore

Ora DevTools può generare script Puppeteer in base alla tua interazione con il browser, semplificando l'automazione dei test del browser. Puppeteer è una libreria Node.js che fornisce un'API di alto livello per controllare Chrome o Chromium tramite il protocollo DevTools.

Vai a questa pagina demo. Apri il riquadro Origini in DevTools. Seleziona la scheda Registrazione nel riquadro a sinistra. Aggiungi una nuova registrazione e assegna un nome al file (ad es. test01.js).

Fai clic sul pulsante Registra in basso per iniziare a registrare l'interazione. Prova a compilare il modulo sullo schermo. Osserva che i comandi Puppeteer vengono aggiunti al file di conseguenza. Fai di nuovo clic sul pulsante Registra per interrompere la registrazione.

Per eseguire lo script, segui la Guida introduttiva sul sito ufficiale Puppeteer.

Tieni presente che si tratta di un esperimento in una fase iniziale. Abbiamo in programma di migliorare ed ampliare la funzionalità Registratore nel tempo.

Registratore di burattini

Problema di Chromium: 1144127

Editor dei caratteri nel riquadro Stili

Il nuovo editor caratteri è un editor popover nel riquadro Stili per le proprietà relative ai caratteri che ti aiuta a trovare la tipografia perfetta per la tua pagina web.

Il popover fornisce un'interfaccia utente semplice per manipolare dinamicamente la tipografia con una serie di tipi di input intuitivi.

Editor dei caratteri nel riquadro Stili

Problema di Chromium: 1093229

Strumenti di debug per Flexbox CSS

DevTools ha aggiunto il supporto sperimentale per il debug di Flexbox dall'ultima release.

DevTools ora traccia una linea guida per aiutarti a visualizzare meglio la proprietà align-items CSS. Anche la proprietà CSS gap è supportata. Nel nostro esempio, abbiamo il CSS gap: 12px;. Nota lo schema di cottura per ogni spazio.

Flexbox

Problema di Chromium: 1139949

Nuova scheda Violazioni CSP

Visualizza a colpo d'occhio tutte le violazioni dei Criteri di sicurezza del contenuto (CSP) nella nuova scheda Violazioni del criterio di sicurezza del contenuto. Questa nuova scheda è un esperimento che dovrebbe semplificare la gestione delle pagine web con un'elevata quantità di violazioni dei criteri di sicurezza (CSP) e di tipo attendibile.

Scheda Violazioni CSP

Problema di Chromium: 1137837

Nuovo calcolo del contrasto del colore: algoritmo avanzato per il contrasto percettivo (APCA)

L'algoritmo APT (Advanced Perceptual Contrast Algorithm) sostituirà il rapporto di contrasto delle linee guida AA/AAA nel selettore colori.

APCA è un nuovo modo di calcolare il contrasto basato sulla ricerca moderna sulla percezione del colore. Rispetto alle linee guida AA/AAA, l'APCA dipende maggiormente dal contesto. Il contrasto viene calcolato in base alle proprietà spaziali del testo (dimensioni e peso del carattere), al colore (differenza di luminosità percepita tra testo e sfondo) e al contesto (luce ambientale, ambiente e scopo previsto del testo).

APCA nel selettore colori

L'esempio mostra che la soglia APCA è del 38%. Il rapporto di contrasto deve corrispondere o superare il valore indicato. Questo valore viene calcolato in base allo spessore e alle dimensioni del carattere, facendo riferimento a questa tabella di ricerca ACA.

Problema di Chromium: 1121900

Scarica 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à di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema DevTools utilizzando Altre opzioni   Altre   > Guida > Segnala i problemi di DevTools in DevTools.
  • Tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.

Chrome 123

Chrome 122

Guida introduttiva di Chrome

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Versione 115 di Chrome

Chrome 114

Chrome 113

Chrome 112

Guida introduttiva di Chrome

Versione 110 di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome versione 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome versione 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome versione 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59