Andere Effekte anwenden: automatisches dunkles Design aktivieren, Fokus emulieren und mehr

Sofia Emelianova

In dieser Referenz zu den Optionen auf dem Tab Rendering finden Sie nützliche Effekte, die Sie auf Ihre Seite anwenden können.

Anzeigenframes hervorheben

So überprüfen Sie, ob Frames als Anzeigen getaggt sind:

1. Öffnen Sie in dieser Demo den Tab Rendering und klicken Sie auf Anzeigenframes hervorheben.
2. Der Anzeigen-Frame ist rot hervorgehoben.

Fokussierte Seite emulieren

Wenn Sie den Fokus von der Seite auf die Entwicklertools verlegen, werden einige Overlay-Elemente automatisch ausgeblendet, wenn sie durch den Fokus ausgelöst werden. Dazu gehören z. B. Drop-down-Listen, Menüs oder Datumsauswahlen. Mit der Option check_box Eine Seite im Fokus emulieren können Sie Fehler an einem solchen Element beheben, als wäre es im Fokus.

So emulieren Sie eine fokussierte Seite:

1. Öffne eine Seite mit dem Element, das du debuggen möchtest, z. B. die YouTube-Website mit der Suchleiste.

2. Öffnen Sie den Tab Rendering und aktivieren und deaktivieren Sie dann die Option Eine fokussierte Seite emulieren.

   

Sie finden diese Option auch unter der Schaltfläche :hov in der Aktionsleiste unter Elemente > Stile.

Weitere Möglichkeiten zum Fixieren von Elementen finden Sie unter Bildschirm fixieren und verschwindende Elemente untersuchen.

Lokale Schriftarten deaktivieren

Prüfen Sie, ob die lokalen Schriftartalternativen wie erwartet funktionieren, indem Sie local()-Quellen in den @font-face-Regeln deaktivieren.

Häufig verwenden Entwickler und Designer bei der Entwicklung zwei verschiedene Kopien derselben Schriftart:

• Eine lokale Schriftart für Ihre Designtools und
• Eine Webschriftart für Ihren Code

Wenn Sie lokale Schriftarten deaktivieren, haben Sie folgende Vorteile:

• Ladeleistung und Optimierung von Webschriftarten debuggen und messen
• Korrektheit Ihrer CSS-@font-face-Regeln prüfen
• Unterschiede zwischen Webschriftarten und ihren lokalen Versionen

Fehlende local()-Quellen in @font-face-Regeln emulieren:

1. Prüfen Sie den obigen Satz, öffnen Sie Elemente > Berechnet, scrollen Sie ganz nach unten und sehen Sie unter Gerenderte Schriftarten, dass Chrome Courier New in lokalen Dateien gefunden hat.

   

2. Öffnen Sie den Tab Rendering, aktivieren Sie Lokale Schriftarten deaktivieren und refresh laden Sie die Seite neu.

3. Sehen Sie sich den Satz in Roboto an, den Sie im Web gefunden haben.

   

Automatischen dunklen Modus aktivieren

Sie können sich ansehen, wie Ihre Website im Dunkelmodus aussehen könnte, auch wenn Sie ihn nicht implementiert haben.

Mit Chrome 96 wurde ein Ursprungstest für das dunkle automatische Design unter Android eingeführt. Mit dieser Funktion wendet der Browser ein automatisch generiertes dunkles Design auf Websites mit hellem Design an, wenn der Nutzer im Betriebssystem dunkle Designs aktiviert hat.

So aktivieren Sie den automatischen dunklen Modus:

1. Öffnen Sie auf dieser Seite den Tab Rendering und setzen Sie ein Häkchen bei Automatischen dunklen Modus aktivieren.
2. Sehen Sie sich diese Seite im dunklen Modus an.

Sehschwäche emulieren

Jeder sollte auf das Web zugreifen und es nutzen können. Google setzt sich dafür ein, dies zu ermöglichen.

Mit den Chrome-Entwicklertools können Sie sehen, wie Menschen mit Sehbeeinträchtigungen Ihre Website sehen, und sie entsprechend optimieren. Weitere Informationen finden Sie unter Farbsehschwäche simulieren.

So emulieren Sie Sehschwächen:

1. Öffnen Sie den Tab Rendering.

2. Wählen Sie unter Sehschwäche emulieren eine der folgenden Optionen aus der Drop-down-Liste aus:

   • Keine Emulation.
   • Unscharfes Sehen:
   • Reduzierter Kontrast
   • Protanopie (kein Rot) Geringe Wahrnehmung von Rot: Verwirrung von Grün-, Rot- und Gelbtönen.
   • Deuteranopie (kein Grün) Geringe Wahrnehmung von Grün: Verwirrung von Grün-, Rot- und Gelbtönen.
   • Tritanopie (kein Blau). Geringe Wahrnehmung von Blau: Grün und Blau zu verwechseln.
   • Achromatopsie (keine Farbe) Teilweise oder vollständige Farbblindheit.

AVIF- und WebP-Bildformate deaktivieren

Diese Emulationen erleichtern es Entwicklern, verschiedene Szenarien für das Laden von Bildern zu testen, ohne den Browser wechseln zu müssen.

Angenommen, Sie verwenden den folgenden HTML-Code, um ein Bild im Format AVIF und WebP in neueren Browsern und in älteren Browsern ein Bild im PNG-Format bereitzustellen.

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

So deaktivieren Sie alle AVIF-Bilder auf einer Seite (oder WebP-Bilder):

1. Öffnen Sie den Tab Rendering und aktivieren Sie die Option AVIF-Bildformat deaktivieren.
2. refresh Aktualisieren Sie die Seite und bewegen Sie den Mauszeiger auf das Symbol img src. Das aktuelle Bild-src (currentSrc) ist jetzt das WebP-Fallback-Bild.

Ebenso können Sie WebP-Bilder deaktivieren.