Novità di DevTools (Chrome 89)

Supporto per il debug delle violazioni di Trusted Types

Punto di interruzione per le violazioni di Trusted Types

Ora puoi impostare punti di interruzione e rilevare eccezioni relative alle violazioni di Trusted Types nel riquadro Origini.

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

Nel riquadro Origini, apri il riquadro della barra laterale del debugger. Espandi la sezione Punti di interruzione violazione CSP e seleziona la casella di controllo Violazioni di Trusted Types per mettere in pausa le eccezioni. Prova tu stesso con questa pagina demo.

Problema di Chromium: 1142804

Collegare il problema nel riquadro Risorse alla scheda Problemi

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

Problema di Chromium: 1150883

Acquisire screenshot del nodo oltre la visualizzazione

Ora puoi acquisire screenshot dei nodi per un nodo completo, inclusi i contenuti sotto la piega. In precedenza, lo screenshot veniva tagliato per i contenuti non visibili nell'area visibile. Anche gli screenshot a pagina intera ora sono precisi.

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

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.

Trust Token è una nuova API che aiuta a combattere le attività fraudolente e a distinguere i bot dagli utenti reali, senza tracciamento passivo. Scopri come iniziare a utilizzare i Trust Token.

Ulteriore supporto per il debug verrà aggiunto nelle prossime release.

Problema di Chromium: 1126824

Lighthouse 7 nel pannello Lighthouse

Il riquadro Lighthouse ora esegue Lighthouse 7. Consulta le note di rilascio per un elenco completo delle modifiche.

Nuovi controlli in Lighthouse 7:

• Precarica l'immagine Largest Contentful Paint (LCP). Controlla se l'immagine utilizzata dall'elemento LCP è precaricata per migliorare il tempo LCP.
• Errori registrati nel riquadro Issues. Indica un elenco di problemi irrisolti nel riquadro Issues.
• App web progressive (PWA). La categoria PWA è cambiata in modo piuttosto significativo.

• Il gruppo Installabile ora è basato interamente sui controlli delle funzionalità che attivano i criteri di installazione di Chrome. Si tratta degli stessi indicatori visualizzati nel riquadro Manifest.

  • Il controllo "Registra un service worker…" viene spostato nel gruppo PWA ottimizzata e il controllo "Utilizza HTTPS" ora è incluso nel controllo chiave "Requisiti di installabilità".
  • Il gruppo Veloci e affidabili viene rimosso. Poiché il controllo "Requisiti di installabilità" rinnovato include il controllo della funzionalità offline, il controllo "La pagina attuale e start_url rispondono con 200 quando offline" è stato rimosso. Anche il controllo "Il caricamento della pagina è abbastanza veloce sulle reti mobili" è stato rimosso.

Problema di Chromium: 772558

Aggiornamenti del riquadro Elementi

Supporto dell'applicazione forzata dello stato :target del CSS

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

Nel riquadro Elementi, seleziona un elemento e attiva/disattiva il relativo 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. Dai un'occhiata a questa demo per provarlo. Questa nuova funzionalità di DevTools ti consente di testare questi stili senza dover modificare manualmente l'URL ogni volta.

Problema di Chromium: 1156628

Nuova scorciatoia per duplicare un elemento

Utilizza la nuova scorciatoia Duplica elemento per clonare un elemento all'istante.

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

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

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

Problemi di Chromium: 1150797, 1150797

Selettori di colore per le proprietà CSS personalizzate

Il riquadro Stili ora mostra i selettori di colore per le proprietà CSS personalizzate.

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

Problema di Chromium: 1147016

Nuove scorciatoie per copiare le proprietà CSS

Ora puoi copiare le proprietà CSS più rapidamente 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.

Opzioni di copia per la classe CSS:

• Selettore di copia. Copia il nome del selettore corrente.
• Copia regola. Copia la regola del selettore corrente.
• Copia tutte le dichiarazioni: copia tutte le dichiarazioni nella regola corrente, incluse le proprietà non valide e con prefisso.

Opzioni di copia per la proprietà CSS:

• Copia dichiarazione. Copia la dichiarazione della riga corrente.
• 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 con URL decodificato

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

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

Problema di Chromium: 997625

Cancella solo i cookie visibili

Il pulsante Cancella tutti i cookie nel riquadro Cookie è stato 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, filtriamo l'elenco in base a "PREF". Fai clic sul pulsante Cancella cookie filtrati per eliminare i cookie visibili. Cancella il testo del filtro e vedrai che gli altri cookie rimangono nell'elenco. In precedenza, avevi solo la possibilità di cancellare tutti i cookie.

Problema di Chromium: 978059

Nuova opzione per cancellare i cookie di terze parti nel riquadro Archiviazione

Quando cancelli i dati del sito nel riquadro Archiviazione, DevTools ora cancella solo i cookie proprietari per impostazione predefinita. Attiva l'opzione Inclusi i cookie di terze parti per cancellare anche i cookie di terze parti.

Problema di Chromium: 1012337

Modificare i client hint dello user agent per i dispositivi personalizzati

Ora puoi modificare i suggerimenti client User-Agent per i dispositivi personalizzati.

Vai a Impostazioni > Dispositivi e fai clic su Aggiungi dispositivo personalizzato…. Espandi la sezione User-Agent client hints per modificare i client hints.

I client hint dello user agent sono un'alternativa alla stringa user agent che consente agli sviluppatori di accedere alle informazioni sul browser di un utente in modo ergonomico e nel rispetto della privacy. Scopri di più sui client hint dello user agent all'indirizzo web.dev/user-agent-client-hints/.

Problema di Chromium: 1073909

Aggiornamenti del riquadro Network

Mantieni l'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 veniva ricaricata.

Problema di Chromium: 1122580

Visualizzare le connessioni WebTransport nel riquadro Rete

Il riquadro Rete ora mostra le connessioni WebTransport.

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

Problema di Chromium: 1152290

"Online" è stato rinominato in "Nessuna limitazione"

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

Problema di Chromium: 1028078

Nuove opzioni di copia nel riquadro Console, Sources e Styles

Nuove scorciatoie per copiare oggetti nel pannello Console e Sources

Ora puoi copiare i valori degli oggetti con le nuove scorciatoie nel pannello Console e Origini. Questa funzionalità è utile soprattutto quando devi copiare un oggetto di grandi dimensioni (ad es. un array lungo).

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 tasto destro del mouse su:

• un file nel riquadro Origini oppure
• il nome del file nel riquadro Stili del riquadro Elementi

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

Problema di Chromium: 1155120

Aggiornamenti della visualizzazione dei dettagli del frame

Nuove informazioni sui service worker nella visualizzazione Dettagli frame

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

Nel riquadro Applicazione, espandi un frame con i service worker, quindi seleziona un service worker nell'albero Service worker per visualizzarne i dettagli.

Problema di Chromium: 1122507

Misurare le informazioni sulla memoria nella visualizzazione Dettagli frame

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

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

Problema di Chromium: 1139899

Fornire feedback dalla scheda Problemi

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

Frame persi nel riquadro Prestazioni

Quando analizzi le prestazioni di caricamento nel riquadro Prestazioni, la sezione Frame ora contrassegna i frame eliminati in rosso. Passa il mouse sopra per scoprire il frame rate.

Problema di Chromium: 1075865

Emulare dispositivi pieghevoli e dual screen in modalità Dispositivo

Ora puoi emulare dispositivi pieghevoli e dual-screen in DevTools.

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

Fai clic sulla nuova icona di apertura per passare dalla modalità a schermo singolo o piegato a quella a doppio schermo o aperto.

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

Problema di Chromium: 1054281

Funzionalità sperimentali

Automatizzare i test del browser con Puppeteer Recorder

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 dimostrativa. 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 clic di nuovo sul pulsante Registra per interrompere la registrazione.

Per eseguire lo script, segui la guida introduttiva nel sito ufficiale di Puppeteer.

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

Problema di Chromium: 1144127

Editor dei caratteri nel riquadro Stili

Il nuovo editor dei caratteri è un editor popup nel riquadro Stili per le proprietà relative ai caratteri per aiutarti a trovare la tipografia perfetta per la tua pagina web.

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

Problema di Chromium: 1093229

Strumenti di debug di Flexbox CSS

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

DevTools ora disegna una linea guida per aiutarti a visualizzare meglio la proprietà CSS align-items. È supportata anche la proprietà CSS gap. Nel nostro esempio, abbiamo CSS gap: 12px;. Nota il pattern di tratteggio per ogni intervallo.

Problema di Chromium: 1139949

Nuova scheda Violazioni CSP

Visualizza a colpo d'occhio tutte le violazioni dei Content Security Policy (CSP) nella nuova scheda Violazioni CSP. Questa nuova scheda è un esperimento che dovrebbe semplificare l'utilizzo di pagine web con un gran numero di violazioni di CSP e Trusted Types.

Problema di Chromium: 1137837

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

L'algoritmo avanzato di contrasto percettivo (APCA) sta sostituendo il rapporto di contrasto delle linee guida AA/AAA nel selettore di colori.

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

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

Problema di Chromium: 1121900

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.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet a @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

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