Applica altri effetti: attiva il tema scuro automatico, emula la messa a fuoco e altro ancora

Scopri gli effetti utili da applicare alla pagina con questo riferimento alle opzioni della scheda Rendering.

Evidenzia frame degli annunci

Per verificare se i frame sono codificati come annunci:

1. Apri la scheda Rendering in questa demo e seleziona Evidenzia frame degli annunci.
2. Osserva il frame dell'annuncio evidenziato in rosso.

Emula una pagina con lo stato attivo

Se imposti lo stato attivo dalla pagina a DevTools, alcuni elementi di overlay vengono nascosti automaticamente se attivati dall'elemento attivo. Ad esempio, elenchi a discesa, menu o selettori di date. L'opzione check_box Emula una pagina con lo stato attivo ti consente di eseguire il debug di un elemento come se lo fosse.

Per emulare una pagina con lo stato attivo:

1. Apri una pagina contenente l'elemento di cui eseguire il debug, ad esempio il sito web di YouTube con la barra di ricerca.

2. Nella pagina, apri la scheda Rendering, quindi seleziona e deseleziona Emula una pagina con lo stato attivo.

   

Puoi trovare la stessa opzione anche sotto il pulsante :hov della barra delle azioni in Elementi > Stili.

Disattiva i caratteri locali

Verifica se le alternative per i caratteri locali funzionano come previsto disabilitando le origini local() nelle regole @font-face.

Spesso, sviluppatori e designer utilizzano due copie diverse dello stesso carattere durante lo sviluppo:

• Un carattere locale per i tuoi strumenti di progettazione e
• Un carattere web per il tuo codice

Disattivando i caratteri locali è più facile:

• Esegui il debug e misura il rendimento e l'ottimizzazione del caricamento dei caratteri web
• Verifica la correttezza delle tue regole @font-face CSS
• Scopri le differenze tra i caratteri web e le relative versioni locali

Emula local() origini mancanti nelle regole @font-face:

1. Esamina la frase qui sopra, apri Elements > Calcolato, scorri fino in fondo e, sotto Caratteri visualizzati, scopri che Chrome ha trovato Courier New nei file locali.

   

2. Apri la scheda Rendering, seleziona Disattiva caratteri locali e refresh ricarica la pagina.

3. Osserva la frase di Roboto trovata sul web.

   

Attiva la modalità Buio automatica

Scopri che aspetto può avere il tuo sito con la modalità Buio anche se non l'hai implementato.

Chrome 96 ha introdotto una prova dell'origine per il tema scuro automatico su Android. Con questa funzionalità, il browser applica ai siti con tema chiaro un tema scuro generato automaticamente se l'utente ha attivato questi temi nel sistema operativo.

Per attivare la modalità Buio automatica:

1. In questa pagina, apri la scheda Rendering e seleziona Abilita modalità Buio automatica.
2. Osserva questa pagina in modalità Buio.

Emula carenze visive

Tutti devono poter accedere al web e godertelo. Google si impegna a raggiungere questo obiettivo.

Con Chrome DevTools puoi scoprire in che modo le persone con discrepanze visive vedono il tuo sito, in modo da migliorarlo per loro. Per saperne di più, consulta la sezione Simulare carenze di visione dei colori.

Per emulare carenze visive:

1. Apri la scheda Rendering.

2. In Emula carenze visive, seleziona una delle seguenti opzioni dall'elenco a discesa:

   • Nessuna emulazione.
   • Visione sfocata.
   • Contrasto ridotto.
   • Protanopia (no rosso). Scarsa percezione del rosso; confusione tra verdi, rossi e gialli.
   • Deuteranopia (no verde). Scarsa percezione del verde; confusione tra verdi, rossi e gialli.
   • Tritanopia (no blu). Bassa percezione del blu; confusione tra green e blues.
   • Acromatopsia (nessun colore). Assenza parziale o totale di visione a colori.

Disattiva i formati delle immagini AVIF e WebP

Queste emulazioni consentono agli sviluppatori di testare più facilmente diversi scenari di caricamento delle immagini senza dover cambiare browser.

Supponi di avere il seguente codice HTML per pubblicare un'immagine nei formati AVIF e WebP per i browser più recenti, con un'immagine PNG di riserva per i browser meno recenti.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Per disattivare tutte le immagini AVIF su una pagina (o, analogamente, le immagini WebP):

1. Apri la scheda Rendering, seleziona Disabilita formato immagine AVIF.
2. refresh Ricarica la pagina e passa il mouse sopra il img src. L'attuale immagine src (currentSrc) è ora l'immagine WebP di riserva.

Allo stesso modo, puoi disattivare le immagini WebP.