Novità di DevTools (Chrome 79)

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, quindi passa alla Scheda Cookie per capire perché i cookie di richiesta o risposta della risorsa sono stati bloccati. Consulta: Modifiche al comportamento predefinito senza SameSite per comprendere perché potresti vedere più contenuti bloccare i cookie in Chrome 76 e versioni successive.

La scheda Cookie.

La scheda Cookie.

  • I cookie di richiesta di colore giallo non sono stati inviati tramite la rete. che sono nascosti per impostazione predefinita. Fai clic su Mostra cookie di richiesta filtrati per mostrarli.
  • I cookie di risposta di colore giallo sono stati inviati tramite la 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 delle richieste e Cookie di risposta provengono dalla intestazioni HTTP della risorsa. I dati di Dominio, Percorso e Data di scadenza/Massima età provengono dalla Protocollo Chrome DevTools.

Problemi relativi a Chromium #856777, #993843

Visualizza i valori dei cookie

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

Visualizzazione del valore di un cookie.

Visualizzazione del valore di un cookie.

Problema di Chromium #462370

Simulare diverse preferenze, schema di colori e preferenze di movimento ridotto

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

Apri il menu Comando, esegui il comando Mostra rendering, quindi imposta Emula elementi multimediali CSS il menu a discesa prefers-color-scheme della funzionalità per eseguire il debug di prefers-color-scheme: dark e prefers-color-scheme: light stili.

prefers-color-scheme: scuro

Quando è impostato prefers-color-scheme: dark (riquadro centrale), il riquadro Stili (riquadro destro) mostra il CSS viene applicata quando la query multimediale è true e l'area visibile mostra gli stili della modalità Buio (riquadro a sinistra).

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

Problema di Chromium #1004246

Emulazione fuso orario

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

Aggiornamenti della copertura del codice

La scheda Copertura può aiutarti a trovare il codice JavaScript e il CSS inutilizzato.

La scheda Copertura ora utilizza nuovi colori per rappresentare il codice usato e inutilizzato. Questa combinazione di colori è che hanno dimostrato di essere più accessibile per le persone con discromatopsia. La barra rossa a sinistra rappresenta il codice inutilizzato e la barra bluastra sulla 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: visualizzare solo la copertura JavaScript, solo CSS o visualizzare tutti i tipi di copertura.

La scheda Copertura.

La scheda Copertura.

Il riquadro Sorgenti mostra i dati relativi alla copertura del codice quando sono disponibili. Fai clic sui segni rossi o bluastri. accanto al numero di riga, si apre la scheda Copertura ed evidenzia il file.

Dati di copertura nel riquadro Sorgenti.

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

Problemi relativi a 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 all'iniziatore per capire perché è stata richiesta la risorsa. La sezione Richiedi stack di chiamate descrive la Stack di chiamate JavaScript che porta alla richiesta di rete.

La scheda Iniziatore.

La scheda Iniziatore.

Problemi relativi a Chromium 963183, 842488

I riquadri della Console e delle origini rispettano di nuovo le preferenze di rientro

Da tempo DevTools ha a disposizione un'impostazione per personalizzare la preferenza relativa al rientro su 2 spazi, 4 spazi, 8 spazi o tabulazioni. Di recente questa impostazione è stata essenzialmente inutile perché la console e I riquadri delle origini ignoravano l'impostazione. Questo bug è stato risolto.

Vai a Impostazioni > Preferenze > Fonti > Rientro predefinito per impostare preferenza.

Problema di Chromium #977394

Nuove scorciatoie per la navigazione con il cursore

Premi Ctrl + P nel riquadro Console o nel riquadro Sorgenti per spostare il cursore sulla riga riportata sopra. Premi 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 in 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   Altro > 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.