Novità di DevTools (Chrome 79)

Nuove funzionalità per i cookie

Debug del motivo per cui un cookie è stato bloccato

Dopo aver registrato l'attività di rete, seleziona una risorsa di rete e vai alla scheda aggiornata Cookie per capire perché i cookie di richiesta o risposta della risorsa sono stati bloccati. Consulta Modifiche al comportamento predefinito senza SameSite per capire perché potresti vedere più cookie bloccati in Chrome 76 e versioni successive.

La scheda Cookie.

La scheda Cookie.

  • I cookie di richiesta gialli non sono stati inviati tramite il cavo. Questi elementi sono nascosti per impostazione predefinita. Fai clic su mostra cookie richieste con filtri per visualizzarli.
  • I cookie di risposta gialli sono stati inviati tramite rete, ma non sono stati memorizzati.
  • Passa il mouse sopra Ulteriori informazioni informazioni per scoprire perché un cookie è stato bloccato.
  • La maggior parte dei dati nelle tabelle Cookie richiesta e Cookie risposta proviene dalle intestazioni HTTP della risorsa. I dati Domain, Path e Expires/Max-Age provengono dal Chrome DevTools Protocol.

Problemi di Chromium #856777, #993843

Visualizzare i valori dei cookie

Fai clic su una riga nel riquadro Cookie per visualizzare il valore del cookie.

Visualizzazione del valore di un cookie.

Visualizzazione del valore di un cookie.

Problema di Chromium #462370

Simulare preferenze diverse per prefers-color-scheme e prefers-reduced-motion

La query media prefers-color-scheme ti consente di abbinare lo stile del tuo sito alle preferenze degli utenti. Ad esempio, se la query sui media prefers-color-scheme: dark è true, significa che l'utente ha impostato il sistema operativo sulla modalità scura e preferisce le UI in modalità scura.

Apri il menu dei comandi, esegui il comando Mostra rendering e imposta il menu a discesa Emula la funzionalità dei contenuti multimediali del CSS prefers-color-scheme per eseguire il debug degli stili prefers-color-scheme: dark e prefers-color-scheme: light.

prefers-color-scheme: dark

Quando è impostato prefers-color-scheme: dark (riquadro centrale), il riquadro Stili (riquadro a destra) mostra il CSS che viene applicato quando la query sui media è vera e la visualizzazione della pagina mostra gli stili della modalità oscura (riquadro a sinistra).

Puoi anche simulare prefers-reduced-motion: reduce utilizzando il menu a discesa Emula la funzionalità dei contenuti multimediali del CSS prefers-reduced-motion accanto al menu a discesa Emula la funzionalità dei contenuti multimediali del CSS prefers-color-scheme.

Problema di Chromium #1004246

Emulazione del fuso orario

La scheda Sensori ora ti consente non solo di sostituire la geolocalizzazione, ma anche di emulare fusi orari arbitrari e testare l'impatto sulle tue app web. Forse sorprendentemente, questa nuova funzionalità migliora anche l'affidabilità dell'emulazione della geolocalizzazione: in precedenza, le app web potevano rilevare lo spoofing della posizione confrontando la posizione con il fuso orario locale dell'utente. Ora che l'emulazione della geolocalizzazione e del fuso orario sono accoppiate, questa categoria di mancate corrispondenze viene eliminata.

Aggiornamenti della copertura del codice

La scheda Copertura può aiutarti a trovare JavaScript e CSS inutilizzati.

La scheda Copertura ora utilizza nuovi colori per rappresentare il codice utilizzato e inutilizzato. È stato dimostrato che questa combinazione di colori è più accessibile per le persone con discromatopsia. La barra rossa a sinistra rappresenta il codice inutilizzato, mentre la barra bluastra a destra rappresenta il codice utilizzato.

La nuova casella di testo del filtro per tipo di copertura ti consente di filtrare le informazioni sulla copertura in base al tipo: visualizza solo la copertura JavaScript, solo CSS o tutti i tipi di copertura.

La scheda Copertura.

La scheda Copertura.

Il riquadro Origini mostra i dati sulla copertura del codice, se disponibili. Se fai clic sui segni rossi o blu accanto al numero di riga, si apre la scheda Copertura e il file viene evidenziato.

Dati sulla copertura nel riquadro Origini.

Dati sulla copertura nel riquadro Origini. La riga 8 è un esempio di codice inutilizzato. La riga 11 è un esempio di codice utilizzato.

Problemi di Chromium #1003671, #1004185

Debug del motivo per cui è stata richiesta una risorsa di rete

Dopo aver registrato l'attività di rete, seleziona una risorsa di rete e vai alla scheda Initiator (Autore) per capire perché è stata richiesta la risorsa. La sezione Stack di chiamate della richiesta descrive lo stack di chiamate JavaScript che precede la richiesta di rete.

La scheda Iniziatore.

La scheda Initiator (Iniziale).

Problemi di Chromium 963183, 842488

I riquadri Console e Origini rispettano di nuovo le preferenze di rientro

Per molto tempo DevTools ha avuto un'impostazione per personalizzare la preferenza di rientro su 2 spazi, 4 spazi, 8 spazi o tabulazioni. Di recente l'impostazione era praticamente inutile perché i riquadri Console e Origini la ignoravano. Il bug è stato corretto.

Vai a Impostazioni > Preferenze > Origini > Ritiro predefinito per impostare la tua preferenza.

Problema di Chromium #977394

Nuove scorciatoie per la navigazione con il cursore

Premi Ctrl+P nei riquadri Console o Origini per spostare il cursore sulla riga sopra. Premi Alt+N per spostare il cursore sulla riga sottostante.

Problema di Chromium #983874

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.

Novità di DevTools

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