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 in Origini dal riquadro.

L'API Trusted Types aiuta a prevenire le vulnerabilità di cross-site scripting basate su DOM. Scopri come fare per scrivere, rivedere e gestire le applicazioni libere da vulnerabilità DOM XSS con Trusted Tipi qui

Nel riquadro Origini, apri il riquadro della barra laterale debugger. Espandi la Violazione CSP Punti di interruzione e seleziona la casella di controllo Violazioni dei tipi attendibili per mettere in pausa nella sezione eccezioni. Fai una prova con questa pagina demo.

Problema relativo a Chromium: 1142804

Collega il problema nel riquadro Origini alla scheda Problemi

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 le eccezioni e le indicazioni su come correggerlo.

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 è stato tagliato per contenuti non visibili nell'area visibile. Gli screenshot a pagina intera sono anche ora.

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

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 combattere le frodi e a distinguere i bot da quelli umani reali, senza alcuna il monitoraggio delle conversioni. Scopri come iniziare a utilizzare i token attendibili.

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

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 l'elenco delle modifiche apportate.

Nuovi controlli in Lighthouse 7:

• Precarica l'immagine Largest Contentful Paint (LCP). Controlla se l'immagine utilizzata dall'elemento LCP è sono precaricati per migliorare il tuo tempo LCP.
• Problemi registrati nel riquadro Issues. Indica un elenco di problemi non risolti in Issues dal riquadro.
• 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 le funzionalità installabili. Si tratta degli stessi indicatori visualizzati nel riquadro Manifest.

  • L'opzione "Registra un service worker..." passa al gruppo Ottimizzato per PWA e alla sezione "Usi HTTPS" è ora inclusa nei principali "requisiti di installabilità" per la revisione contabile.
  • Il gruppo Rapido e affidabile viene rimosso. Come i "requisiti di installabilità" rinnovati controllare include il controllo delle funzionalità offline, "la pagina corrente e il valore start_url rispondono con 200 quando offline" è stato rimosso. L'opzione "Il caricamento della pagina è sufficientemente veloce sulla rete mobile" il controllo è 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. Attiva :target casella di controllo 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 le stesse. Dai un'occhiata a questa demo per provare in autonomia. La nuova funzionalità di DevTools consente di testare questi stili senza dover modificare manualmente l'URL di continuo.

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. Un nuovo elemento da creare al suo interno.

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

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

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 sezioni RGBA, HSLA e esadecimale del valore del colore.

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 su una proprietà CSS nella nel riquadro Stili per copiare il valore.

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 corrente, incluse quelle 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.

Problema relativo a Chromium: 997625

Cancella solo cookie visibili

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

Nel riquadro Applicazione > Cookie, inserisci il testo nella casella di testo per filtrare i cookie. Nella Nel nostro esempio, filtriamo l'elenco per "PREF". Fai clic sul pulsante Cancella cookie filtrati per eliminare i cookie visibili. Cancella il testo del filtro e vedrai gli altri cookie che rimangono nella dall'elenco di lettura. In precedenza, potevi solo cancellare tutti i cookie.

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. predefinito. Attiva l'opzione inclusi i cookie di terze parti per cancellare anche 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 lo user agent Client hint per modificare i client hint.

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

Problema relativo a Chromium: 1073909

Aggiornamenti del pannello Rete

Mantieni "registra log di rete" impostazione

DevTools ora conserva il messaggio "Registra log di rete" dell'ambientazione. In precedenza, DevTools reimpostava la scelta dell'utente. ogni volta che una pagina viene ricaricata.

Problema relativo a Chromium: 1122580

Visualizza le connessioni WebTransport nel riquadro Rete

Il riquadro Rete ora mostra le connessioni WebTransport.

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

Problema relativo a Chromium: 1152290

"Online" rinominato in "Nessuna limitazione"

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

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. Questo è utile soprattutto quando devi copiare un oggetto di grandi dimensioni (ad es. un array lungo).

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.

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 Worker di servizio per visualizzare i dettagli.

Problema relativo a Chromium: 1122507

Misurare le informazioni sulla memoria nella visualizzazione Dettagli frame

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

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

Problema relativo a Chromium: 1139899

Fornire un feedback dalla scheda Problemi

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

Frame eliminati nel riquadro Prestazioni

Quando analizzi le prestazioni di caricamento nel riquadro Prestazioni, la sezione Frame ora contrassegna i frame saltati in rosso. Passaci il mouse sopra per vedere la frequenza fotogrammi.

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 dei seguenti dispositivi: Surface Duo o Samsung Galaxy Fold.

Fai clic sulla nuova icona dell'intervallo per passare dalla modalità a schermo singolo allo schermo piegato a quello a doppio schermo o viceversa le posture.

Puoi anche attivare le funzionalità sperimentali della piattaforma web per accedere ai nuovi contenuti multimediali del CSS screen-spanning e API JavaScript getWindowSegments. L'icona sperimentale mostra stato del flag Experimental Web Platform features. L'icona viene evidenziata quando il flag viene visualizzato attivata. Vai a chrome://flags e attiva/disattiva il flag.

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, rendendo semplifica l'automazione dei test del browser. Puppeteer è una libreria Node.js che fornisce un'interfaccia API di alto livello per controllare Chrome o Chromium tramite il protocollo DevOps.

Vai a questa pagina demo. Apri il riquadro Origini in DevTools. Seleziona la scheda Registrazione 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 modulo sullo schermo. Osserva che i comandi Puppeteer vengono aggiunti al file di conseguenza. Fai clic sul Pulsante Registra di nuovo 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 Registratore funzionalità nel tempo.

Problema relativo a Chromium: 1144127

Editor dei caratteri nel riquadro Stili

Il nuovo editor dei caratteri è un editor popover nel riquadro Stili che consente di utilizzare le proprietà relative ai caratteri a trovare l'elemento tipografico perfetto per la tua pagina web.

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

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. La È supportata anche la proprietà CSS gap. Nel nostro esempio, abbiamo il CSS gap: 12px;. Nota come per ogni spazio.

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 di pagine web con molte delle violazioni di CSP e Trusted Type.

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) sostituirà AA/AAA. rapporto di contrasto delle linee guida nel selettore colori.

L'APCA è un nuovo modo per calcolare il contrasto basato sulle ricerche moderne sulla percezione del colore. Rispetto a le linee guida AA/AAA, l'APCA dipende maggiormente dal contesto. Il contrasto viene calcolato in base proprietà spaziali (peso e dimensione del carattere), colore (differenza di leggerezza percepita tra testo e sfondo) e contesto (luce ambientale, ambiente, scopo previsto del testo).

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