Novità di DevTools (Chrome 89)

Assistenza per il debug delle violazioni di Trusted Type

Punto di interruzione su violazioni di Trusted Type

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

L'API Trusted Types aiuta a prevenire le vulnerabilità di cross-site scripting basate su DOM. Scopri come scrivere, rivedere e gestire le applicazioni libere dalle vulnerabilità DOM XSS con Trusted Tipi 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 dei tipi attendibili per mettere in pausa le eccezioni. Fai una prova con questa pagina demo.

Punto di interruzione su violazioni di Trusted Type

Problema relativo a Chromium: 1142804

Il riquadro Origini ora mostra un'icona di avviso accanto alla riga che viola il tipo di attendibilità. Passa il mouse sopra per visualizzare l'anteprima dell'eccezione. Fai clic per espandere la scheda Problemi, dove verranno visualizzati ulteriori dettagli sulle eccezioni e indicazioni su come risolverli.

Collega il problema nel riquadro Origini alla scheda Problemi

Problema relativo a Chromium: 1150883

Acquisisci screenshot del nodo oltre l'area visibile

Ora puoi acquisire screenshot dei nodi per un nodo completo, inclusi i contenuti below the fold. In precedenza, lo screenshot veniva tagliato per contenuti non visibili nell'area visibile. 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.

Acquisisci screenshot del nodo oltre l'area visibile

Problema relativo a Chromium: 1003629

Nuova scheda Trust Token per le richieste di rete

Controlla le richieste di rete di 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 quelli reali, senza monitoraggio passivo. Scopri come iniziare a utilizzare i token attendibili.

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

Nuova scheda Trust Token per richieste di rete

Problema relativo a Chromium: 1126824

Lighthouse 7 nel riquadro Lighthouse

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

Lighthouse 7 nel riquadro Lighthouse

Nuovi controlli in Lighthouse 7:

  • Precarica l'immagine Largest Contentful Paint (LCP). Consente di controllare se l'immagine utilizzata dall'elemento LCP è 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 Installabile ora si basa interamente sui controlli delle funzionalità che abilitano i criteri di installazione di Chrome. Si tratta degli stessi indicatori visualizzati nel riquadro Manifest.

    • Il controllo "Registra un service worker..." passa al gruppo Ottimizzato per PWA e il controllo "Utilizza HTTPS" è ora incluso nell'ambito del controllo chiave "Requisiti di installabilità".
    • Il gruppo Rapido e affidabile viene rimosso. Poiché il nuovo controllo dei "requisiti di installabilità" include il controllo della funzionalità offline, il controllo "pagina corrente e start_url rispondono con 200 quando offline" è stato rimosso. Anche il controllo "Caricamento pagina è sufficientemente veloce sulla rete mobile" è stato rimosso.

Problema relativo a Chromium: 772558

Aggiornamenti del riquadro degli elementi

Supporto della forzatura dello stato :target del CSS

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

Nel riquadro Elementi, seleziona un elemento e attiva/disattiva lo stato dell'elemento. Seleziona 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 in autonomia. La nuova funzionalità DevTools consente di testare questi stili senza dover modificare manualmente l'URL di continuo.

forzare lo stato ":target" del CSS

Problema relativo a Chromium: 1156628

Nuova scorciatoia per duplicare l'elemento

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

Fai clic con il pulsante destro del mouse su un elemento nel riquadro Elementi e seleziona Duplica elemento. Al di 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 relativi a Chromium: 1150797, 1150797

Selettori di colori per le proprietà CSS personalizzate

Il riquadro Stili ora mostra i selettori 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 esadecimale del valore del colore.

Selettori di colori per le proprietà CSS personalizzate

Problema relativo a Chromium: 1147016

Nuove scorciatoie per copiare le proprietà CSS

Ora puoi copiare le proprietà CSS più rapidamente grazie ad alcune nuove scorciatoie.

Nel riquadro Elementi, seleziona un elemento. Successivamente, 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 corrente.
  • Copia regola. Copia la regola del selettore corrente.
  • Copia tutte le dichiarazioni: copia tutte le dichiarazioni previste dalla 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 relativo a Chromium: 1152391

Aggiornamenti dei cookie

Nuova opzione per mostrare i cookie con codifica URL

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

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

Opzione per mostrare i cookie con codifica URL

Problema relativo a Chromium: 997625

Cancella solo cookie visibili

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

Nel riquadro Applicazione > Cookie, inserisci il testo nella casella di testo per filtrare i cookie. Nel nostro esempio, filtriamo l'elenco per "PREF". Fai clic sul pulsante Cancella cookie filtrati per eliminare i cookie visibili. Se cancelli il testo del filtro, gli altri cookie rimarranno nell'elenco. In precedenza, potevi solo cancellare tutti i cookie.

Cancella solo cookie visibili

Problema relativo a Chromium: 978059

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

Quando cancelli i dati dei siti 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.

Opzione per cancellare i cookie di terze parti

Problema relativo a Chromium: 1012337

Modifica client hint user agent per i dispositivi personalizzati

Ora puoi modificare i client hint dello user agent per i dispositivi personalizzati.

Vai a Impostazioni > Dispositivi e fai clic su Aggiungi dispositivo personalizzato.... Espandi la sezione User agent client hint per modificare i client hint.

Modifica client hint dello user agent

I client hint dello user agent sono un'alternativa alla stringa dello 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 dello user agent in web.dev/user-agent-client-hints/.

Problema relativo a Chromium: 1073909

Aggiornamenti del pannello Rete

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 si ricarica.

Registra log di rete

Problema relativo a Chromium: 1122580

Visualizza le connessioni WebTransport nel riquadro Rete

Il riquadro Rete ora mostra le connessioni WebTransport.

Connessioni WebTransport

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

Problema relativo a Chromium: 1152290

"Online" è stato rinominato "Nessuna limitazione"

L'opzione di emulazione di rete "Online" è ora rinominata in "No Throttling".

Registra log di rete

Problema relativo a 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 nella Console e nel riquadro Origini. Ciò è particolarmente utile quando si ha un oggetto di grandi dimensioni (ad esempio un array lungo) da copiare.

Copia oggetto nella console

Copia oggetto nel riquadro Origini

Problemi relativi a Chromium: 1149859, 1148353

Nuove scorciatoie per copiare il nome dei 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 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 relativo a Chromium: 1155120

Aggiornamenti della visualizzazione dei dettagli del frame

Informazioni sui nuovi 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 sotto l'albero Service worker per visualizzare i dettagli.

Informazioni sui service worker nella visualizzazione dei dettagli del frame

Problema relativo a Chromium: 1122507

Misurare le informazioni sulla memoria nella visualizzazione Dettagli frame

Ora lo stato dell'API performance.measureMemory() viene 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 tua pagina web con questa nuova API in questo articolo.

Misura memoria

Problema relativo a Chromium: 1139899

Fornire un feedback dalla scheda Problemi

Se vuoi migliorare il messaggio relativo a un problema, vai alla scheda Problemi dalla console o Altre impostazioni > Altri strumenti > Problemi > per aprire la scheda Problemi. Espandi il messaggio relativo a un problema e fai clic su Il messaggio del 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 di caricamento nel riquadro Prestazioni, la sezione Frame ora contrassegna i frame interrotti come rossi. Passaci il mouse sopra per vedere la frequenza fotogrammi.

Frame eliminati

Problema relativo a Chromium: 1075865

Emula pieghevoli e dual-screen in modalità Dispositivo

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

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

Fai clic sulla nuova icona dell'intervallo per passare dalla posizione a schermo singolo a quella chiusa a quella a schermo doppio o aperta.

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

Emula il doppio schermo

Problema relativo a Chromium: 1054281

Funzionalità sperimentali

Automatizza i test del browser con Puppeteer Recorder

DevTools ora 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 nel sito ufficiale di Puppeteer.

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

Registratore di burattini

Problema relativo a Chromium: 1144127

Editor dei caratteri nel riquadro Stili

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

Il popover offre un'interfaccia utente pulita per manipolare in modo dinamico la tipografia con una serie di tipi di input intuitivi.

Editor dei caratteri nel riquadro Stili

Problema relativo a Chromium: 1093229

Strumenti di debug 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. È supportata anche la proprietà CSS gap. Nel nostro esempio, abbiamo il CSS gap: 12px;. Osserva lo schema di trattenuta per ogni spazio.

Flexbox

Problema relativo a Chromium: 1139949

Nuova scheda Violazioni CSP

Visualizza un riepilogo di tutte le violazioni dei Criteri di sicurezza del contenuto (CSP) nella nuova scheda Violazioni CSP. Questa nuova scheda è un'IA sperimentale che dovrebbe semplificare l'utilizzo delle pagine web che presentano un numero elevato di violazioni CSP e di tipo attendibile.

Scheda Violazioni CSP

Problema relativo a Chromium: 1137837

Nuovo calcolo del contrasto di colore - Algoritmo di contrasto percettivo avanzato (APCA)

L'algoritmo di contrasto avanzato (APCA, Advanced Perceptual Contrast Algorithm) sostituisce il rapporto di contrasto AA/AAA nel selettore colori.

L'APCA è un nuovo modo per calcolare il contrasto basato sulle ricerche moderne 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 (peso e dimensione del carattere), al colore (differenza di leggerezza percepita tra testo e sfondo) e al contesto (luce ambientale, ambiente, scopo previsto del testo).

APCA nel selettore colori

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

Problema relativo a 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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando Altre opzioni   Altre   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome - Guida introduttiva

Chrome - Guida introduttiva

Guida introduttiva di Chrome

Chrome 100

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 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome 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 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59