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

Découvrez des effets utiles à appliquer à votre page grâce à cette documentation de référence sur les options de l'onglet Rendu.

Mettre en surbrillance les frames publicitaires

Pour vérifier si les cadres sont tagués en tant qu'annonces:

1. Ouvrez l'onglet Rendu dans cette démonstration et cochez Mettre en surbrillance les frames d'annonce.
2. Observez le cadre de l'annonce encadré en rouge.

Émuler une page sélectionnée

Si vous déplacez 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 focus. (listes déroulantes, menus ou sélecteurs de dates, par exemple). L'option Émuler une page sélectionnée check_box vous permet de déboguer un élément de ce type comme s'il était sélectionné.

Pour émuler une page sélectionnée:

1. Ouvrez une page contenant l'élément à déboguer, par exemple le site Web YouTube qui comporte 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 autres polices locales 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 lors du développement:

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

Désactiver les polices locales vous permet de:

• 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 Éléments > Calculé, faites défiler l'écran jusqu'en bas, puis, sous Polices rendues, découvrez que Chrome a trouvé Courier New dans les fichiers locaux.

   

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

3. Observez la phrase Roboto trouvée 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 à en faire une réalité.

Grâce aux outils pour les développeurs Chrome, vous pouvez voir comment les personnes souffrant de déficiences visuelles consultent votre site, afin de l'améliorer pour eux. Pour en savoir plus, consultez Simuler des déficiences de la vision des couleurs.

Pour émuler une déficience visuelle:

1. Ouvrez l'onglet Rendu.

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

   • Aucune émulation.
   • Vision floue.
   • Réduction du contraste.
   • Protanopie (pas de rouge). Faible perception du rouge ; confusion des verts, des rouges et du jaune.
   • Deutéranopie (pas de vert). Faible perception du vert ; confusion des verts, des rouges et du jaune.
   • Tritanopie (pas de bleu) Faible perception du bleu ; confusion entre les verts et les 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 plus récents, avec une image PNG de remplacement pour les anciens navigateurs.

<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 les images WebP similaires):

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

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