Novità di DevTools (Chrome 79)

Kayce Basques
Kayce Basques

Nuove funzionalità per i cookie

Eseguire il debug del motivo per cui un cookie è stato bloccato

Dopo aver registrato l'attività di rete, seleziona una risorsa di rete e poi 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 via cavo. Questi sono nascosti per impostazione predefinita. Fai clic su mostra cookie richieste con filtri per visualizzarli.
  • I cookie di risposta gialli sono stati inviati via cavo, ma non 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 ed 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 diverse preferenze prefers-color-scheme e prefers-reduced-motion

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

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

prefers-color-scheme: dark

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

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

Problema di Chromium #1004246

Emulazione del fuso orario

La scheda Sensori ora ti consente non solo di ignorare 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 abbinando la posizione al fuso orario locale dell'utente. Ora che l'emulazione della geolocalizzazione e del fuso orario sono accoppiate, questa categoria di mancata corrispondenza viene eliminata.

Aggiornamenti della copertura del codice

La scheda Copertura può aiutarti a trovare codice JavaScript e CSS non utilizzato.

La scheda Copertura ora utilizza nuovi colori per rappresentare il codice utilizzato e non utilizzato. È 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 Filtro 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 quando sono disponibili. Se fai clic sui segni rossi o bluastri accanto al numero di riga, si apre la scheda Copertura e il file viene evidenziato.

Dati sulla copertura nel riquadro Risorse.

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

Problemi di Chromium #1003671, #1004185

Eseguire il debug del motivo per cui è stata richiesta una risorsa di rete

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

La scheda Iniziatore.

La scheda Iniziatore.

Problemi di Chromium 963183, 842488

I pannelli Console e Sources rispettano di nuovo le preferenze di rientro

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

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

Problema di Chromium #977394

Nuove scorciatoie per la navigazione con il cursore

Premi Control+P nei pannelli Console o Sources per spostare il cursore sulla riga precedente. Premi Ctrl+N per spostare il cursore sulla riga sottostante.

Problema di Chromium #983874

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.

Novità di DevTools

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