Tab „Rendering“ – Übersicht

Sofia Emelianova
Sofia Emelianova
GitHub

In diesem Überblick über die Funktionen des Tabs Rendering in den Entwicklertools finden Sie eine Reihe von Optionen, die sich auf das Rendern von Webinhalten auswirken.

Überblick

Der Tab Rendering bietet folgende Möglichkeiten:

  • Probleme mit der Rendering-Leistung ermitteln Erkennen von Neuanstrichen, Layoutverschiebungen, Ebenen und Kacheln, Scroll-Problemen sowie Rendering-Statistiken und Core Web Vitals.
  • CSS-Medienfunktionen emulieren Testen Sie, wie Seiten mit verschiedenen CSS-Medienfunktionen gerendert werden, ohne sie manuell im Code oder in der Testumgebung anzugeben.
  • Weitere nützliche Effekte anwenden Heben Sie Anzeigenframes hervor, emulieren Sie den Fokus auf einer Seite, deaktivieren Sie lokale Schriftarten und Bildformate, aktivieren Sie ein automatisches dunkles Design und emulieren Sie Sehschwächen.

Tab „Rendering“ öffnen

So öffnen Sie den Tab Rendering:

  1. Öffnen Sie die Entwicklertools.

  2. Drücken Sie Befehlstaste + Umschalt + P (Mac) oder Strg + Umschalttaste + P (Windows, Linux, ChromeOS), um das Befehlstaste zu öffnen.

    Befehlsmenü, Rendering

  3. Beginnen Sie mit der Eingabe von rendering, wählen Sie Darstellung anzeigen aus und drücken Sie die Eingabetaste. In den Entwicklertools wird unten im Fenster „Entwicklertools“ der Tab Rendering angezeigt.

Alternativ können Sie den Tab Rendering so öffnen:

  • Drücken Sie die Esc, um die Leiste zu öffnen. Klicken Sie dann links oben auf Weitere Tools Mehr > Rendering.
  • Klicken Sie rechts oben auf Weitere Optionen Mehr > Weitere Tools > Rendering.