Novità di DevTools (Chrome 89)

Supporto per il debug delle violazioni di Trusted Types

Punto di interruzione in caso di violazioni di Trusted Type

Ora puoi impostare i punti di interruzione e rilevare le eccezioni relative alle violazioni dei tipi attendibili nel riquadro Origini.

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

Nel riquadro Origini, apri il riquadro della barra laterale del debugger. Espandi la sezione Breakpoint violazione CSP e abilita la casella di controllo Violazioni Trusted Type per mettere in pausa sulle eccezioni. Prova tu stesso con questa pagina dimostrativa.

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 ulteriori dettagli sulle eccezioni e indicazioni su come risolvere il problema.

Problema di Chromium: 1150883

Acquisisci screenshot del nodo oltre l'area visibile

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. 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 del nodo.

Problema di Chromium: 1003629

Nuova scheda Token di attendibilità per le richieste di rete

Controlla le richieste di rete dei token di attendibilità con la nuova scheda Token di attendibilità.

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

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

Problema di Chromium: 1126824

Lighthouse 7 nel riquadro 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.
• Problemi registrati nel riquadro Issues. Indica un elenco di problemi irrisolti nel riquadro Issues.
• App web progressive (PWA). La categoria PWA è cambiata in modo abbastanza significativo.

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

  • Il controllo "Registra un servizio worker…" passa al gruppo PWA ottimizzata e il controllo "Utilizza HTTPS" è ora incluso nell'ambito del controllo principale "Requisiti di installabilità".
  • Il gruppo Veloci e affidabili viene rimosso. Poiché il nuovo controllo "Requisiti di installabilità" include il controllo della funzionalità offline, il controllo "La pagina attuale e start_url rispondono con 200 quando sono offline" è stato rimosso. È stato rimosso anche il controllo "Il caricamento della pagina è abbastanza veloce sulle reti mobili".

Problema di Chromium: 772558

Aggiornamenti del riquadro Elementi

Supporto per l'applicazione forzata dello stato CSS :target

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

Nel riquadro Elementi, seleziona un elemento e attiva/disattiva lo stato dell'elemento. 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 provare tu stesso. 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 l'elemento

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

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

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 dei colori per scorrere le rappresentazioni RGBA, HSLA e esadecimale del valore del colore.

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.

Opzioni di copia per la classe CSS:

• Seleziona Copia. Copia il nome del selettore corrente.
• Copia regola. Copia la regola del selettore corrente.
• Copia tutte le dichiarazioni: copia tutte le dichiarazioni della 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 dall'elenco. Attiva la nuova casella di controllo Mostra URL decodificato per visualizzare il cookie decodificato.

Problema di Chromium: 997625

Cancellare 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. Se cancelli il testo del filtro, 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 Spazio di archiviazione

Quando vengono cancellati i dati del sito nel riquadro Spazio di archiviazione, ora DevTools 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 gli User-Agent Client Hints 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 dello 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ù su Client hint dello user agent in web.dev/user-agent-client-hints/.

Problema di Chromium: 1073909

Aggiornamenti del riquadro Rete

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 casi d'uso e su come inviare feedback sul futuro dell'implementazione in web.dev/webtransport/.

Problema di Chromium: 1152290

"Online" è stato rinominato in "Nessuna limitazione"

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

Problema di Chromium: 1028078

Nuove opzioni di copia nella console, nel riquadro Origini e nel riquadro 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. 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 Risorse 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 alla visualizzazione dei dettagli della struttura

Nuove informazioni sui Service Worker nella visualizzazione Dettagli frame

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

Nel riquadro Applicazione, espandi un frame con i worker di servizio, quindi seleziona un worker di servizio nella struttura ad albero Worker di servizio per visualizzarne i dettagli.

Problema di Chromium: 1122507

Misurare le informazioni sui ricordi nella visualizzazione Dettagli fotogramma

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

La nuova API performance.measureMemory() stima l'utilizzo della 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 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 Questo messaggio relativo al problema ti è stato utile?, quindi puoi fornire un feedback nel popup.

Frame persi nel riquadro Prestazioni

Quando analizzi il rendimento del caricamento nel riquadro Prestazioni, la sezione Frame ora contrassegni i frame persi in rosso. Passa il mouse sopra per visualizzare la frequenza fotogrammi.

Problema di Chromium: 1075865

Emulare dispositivi pieghevoli e con doppio schermo in modalità Dispositivo

Ora puoi emulare dispositivi con doppio schermo e pieghevoli 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 della barra 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à screen-spanning dei contenuti multimediali CSS e all'API getWindowSegments JavaScript. L'icona sperimentale mostra lo stato del flag Funzionalità della piattaforma web sperimentale. L'icona viene evidenziata quando la bandierina è attivata. Vai a chrome://flags e attiva/disattiva l'indicatore.

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 così 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 di 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. Tieni presente 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 di Puppeteer.

Tieni presente che si tratta di un esperimento in fase iniziale. Prevediamo di migliorare e ampliare 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 degli stili per le proprietà relative ai caratteri che ti aiutano a trovare la tipografia perfetta per la tua pagina web.

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

Problema di Chromium: 1093229

Strumenti di debug 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à gap CSS. Nel nostro esempio, abbiamo CSS gap: 12px;. Nota il motivo di tratteggio per ogni spazio.

Problema di Chromium: 1139949

Nuova scheda Violazioni CSP

Visualizza tutte le violazioni dei Criteri di sicurezza del contenuto (CSP) in un'unica pagina nella nuova scheda Violazioni CSP. Questa nuova scheda è un esperimento che dovrebbe semplificare il lavoro con le pagine web con un numero elevato di violazioni di CSP e Tipo attendibile.

Problema di Chromium: 1137837

Nuovo calcolo del contrasto di colore: algoritmo APCA (Advanced Perceptual Contrast Algorithm)

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

L'APCA è un nuovo modo per calcolare il contrasto in base alla ricerca moderna sulla percezione del colore. Rispetto alle linee guida AA/AAA, l'APCA è più dipendente dal contesto. Il contrasto viene calcolato in base alle proprietà spaziali del testo (spessore e dimensioni dei caratteri), al colore (differenza di luminosità percepita tra testo e sfondo) e al contesto (luce ambientale, dintorni, scopo previsto del testo).

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

Problema di Chromium: 1121900

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 i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

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

Novità di DevTools

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