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

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 aktivieren Sie Anzeigenframes hervorheben.
2. Sehen Sie sich den rot hervorgehobenen Anzeigen-Frame an.

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. z. B. Drop-down-Listen, Menüs oder Datumsauswahl. 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 auf der Seite den Tab Rendering und aktivieren und deaktivieren Sie die Option Fokussierte Seite emulieren.

   

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

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

Das Deaktivieren lokaler Schriftarten erleichtert Ihnen Folgendes:

• Ladeleistung und Optimierung von Webschriftarten debuggen und messen
• Korrektheit Ihrer @font-face-Regeln für Preisvergleichsportale 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 Elements > Computed, scrollen Sie ganz nach unten und finden 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 im Web gefundenen Satz in Roboto an.

   

Automatischen dunklen Modus aktivieren

Sehen Sie sich an, wie Ihre Website im dunklen Modus aussehen könnte, auch wenn Sie sie 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 auf Websites mit hellem Design ein automatisch generiertes dunkles Design an, wenn der Nutzer das dunkle Design aktiviert hat.

So aktivieren Sie den automatischen dunklen Modus:

1. Öffnen Sie auf dieser Seite den Tab Rendering und klicken Sie auf das Kästchen Automatischen dunklen Modus aktivieren.
2. Sehen Sie sich diese Seite im dunklen Modus an.

Sehschwächen emulieren

Jeder sollte auf das Web zugreifen und es nutzen können. Google hat es sich zur Aufgabe gemacht, dies Wirklichkeit werden zu lassen.

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 Mangel bei Farbblindheit 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:
   • Verringerter 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 Abwesenheit von Farbenblindheit.

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 img src. Die aktuelle Bildquelle (currentSrc) ist jetzt das Fallback-WebP-Bild.

Ebenso können Sie WebP-Bilder deaktivieren.