Appliquer d'autres effets: activer le thème sombre automatique, émuler la mise au point, etc.

Découvrez les effets utiles à appliquer à votre page grâce aux options de l'onglet Affichage.

Mettre en surbrillance les frames publicitaires

Pour vérifier si des frames sont tagués en tant qu'annonces:

1. Ouvrez l'onglet Rendu dans cette démonstration et cochez Mettre en surbrillance les frames publicitaires.
2. Observez le frame d'annonce mis en évidence en rouge.

Émuler une page sélectionnée

Si vous basculez le curseur de la page vers les outils de développement, certains éléments de superposition sont automatiquement masqués s'ils sont déclenchés par le curseur. Par exemple, des listes déroulantes, des menus ou des sélecteurs de date. L'option Émuler une page sélectionnée check_box vous permet de déboguer ce type d'élément comme s'il était actif.

Pour émuler une page sélectionnée:

1. Ouvrez une page contenant l'élément à déboguer, par exemple le site Web YouTube avec sa barre de recherche.

2. Sur la page, ouvrez l'onglet Rendu, puis cochez et décochez la case Émuler une page sélectionnée.

   

Vous trouverez également la même option sous le bouton :hov de la barre d'action dans Éléments > Styles.

Désactiver les polices locales

Vérifiez si les polices locales alternatives fonctionnent comme prévu en désactivant les sources local() dans les règles @font-face.

Souvent, les développeurs et les concepteurs utilisent deux copies différentes de la même police pendant le développement:

• Une police locale pour vos outils de conception, et
• Une police Web pour votre code

La désactivation des polices locales facilite les opérations suivantes:

• Déboguer et mesurer les performances de chargement et l'optimisation des polices Web
• Vérifier l'exactitude de vos règles @font-face CSS
• Découvrir les différences entre les polices Web et leurs versions locales

Émulez les sources local() manquantes dans les règles @font-face:

1. Inspectez la phrase ci-dessus, ouvrez Elements > Computed (Calculé) : faites défiler la page jusqu'en bas, puis, sous Rendered Fonts (Polices rendues), découvrez que Chrome a trouvé Courier New dans les fichiers locaux.

   

2. Ouvrez l'onglet Rendu, cochez la case Désactiver les polices locales, puis refreshactualisez la page.

3. Observez la phrase Roboto que l'on trouve sur le Web.

   

Activer le mode sombre automatique

Découvrez à quoi peut ressembler votre site en mode sombre, même si vous ne l'avez pas implémenté.

Chrome 96 a lancé une phase d'évaluation pour le thème sombre automatique sur Android. Grâce à cette fonctionnalité, le navigateur applique un thème sombre généré automatiquement aux sites à thème clair si l'utilisateur a activé les thèmes sombres dans le système d'exploitation.

Pour activer le mode sombre automatique:

1. Sur cette page, ouvrez l'onglet Rendu, puis cochez la case Activer le mode sombre automatique.
2. Observez cette page en mode sombre.

Émuler les déficiences visuelles

Tout le monde devrait pouvoir accéder au Web et en profiter. Google s'engage à y parvenir.

Avec les outils pour les développeurs Chrome, vous pouvez voir comment les personnes souffrant de déficiences visuelles voient votre site afin de l'améliorer. Pour en savoir plus, consultez l'article Simuler les déficiences de la vision des couleurs.

Pour émuler les déficiences visuelles:

1. Ouvrez l'onglet Rendu.

2. Sous Émuler les déficiences visuelles, sélectionnez l'une des options suivantes dans la liste déroulante:

   • Pas d'émulation.
   • Vision trouble.
   • Contraste réduit.
   • Protanopie (pas de rouge). Faible perception du rouge ; la confusion des verts, des rouges et des jaunes.
   • Deutéranopie (pas de vert). Faible perception du vert ; la confusion des verts, des rouges et des jaunes.
   • Tritanopie (pas de bleu). Faible perception du bleu. la confusion des verts et des bleus.
   • Achromatopsie (pas de couleur). Absence partielle ou totale de la vision des couleurs.

Désactiver les formats d'image AVIF et WebP

Ces émulations permettent aux développeurs de tester plus facilement différents scénarios de chargement d'images sans avoir à changer de navigateur.

Supposons que vous disposiez du code HTML suivant pour diffuser une image aux formats AVIF et WebP pour les navigateurs récents, avec une image de remplacement PNG pour les navigateurs plus anciens.

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

Pour désactiver toutes les images AVIF d'une page (ou, de façon similaire, images WebP):

1. Ouvrez l'onglet Rendu, puis cochez la case Désactiver le format d'image AVIF.
2. refresh Actualisez la page et passez la souris sur l'icône img src L'image src actuelle (currentSrc) est désormais l'image WebP de remplacement.

De même, vous pouvez désactiver les images WebP.