Sofia Emelianova
In dieser Übersicht der Funktionen des Tabs Rendering in den DevTools finden Sie eine Reihe von Optionen, die sich auf das Rendern von Webinhalten auswirken.
Übersicht
Auf dem Tab Rendering können Sie Folgendes tun:
- Probleme mit der Renderingleistung erkennen Sie können sich Informationen zu Bereichen mit wiederholter Neumalerei, Layoutverschiebungen, Ebenen und Kacheln sowie zu Problemen beim Scrollen in den Rendering-Statistiken und Core Web Vitals ansehen.
- CSS-Medienfunktionen emulieren Testen Sie, wie Seiten mit verschiedenen CSS-Medienfunktionen gerendert werden, ohne sie manuell in Ihrem Code oder Ihrer Testumgebung anzugeben.
- Andere nützliche Effekte anwenden Anzeigenframes hervorheben, den Fokus auf einer Seite emulieren, lokale Schriftarten und Bildformate deaktivieren, einen automatischen dunklen Modus aktivieren und Sehbehinderungen simulieren.
Tab „Rendering“ öffnen
So öffnen Sie den Tab Rendering:
Drücken Sie Befehlstaste + Umschalttaste + P (Mac) oder Strg + Umschalttaste + P (Windows, Linux, ChromeOS), um das Befehlsmenü zu öffnen.
Geben Sie
renderingein, wählen Sie Rendering anzeigen aus und drücken Sie die Eingabetaste. In den DevTools wird unten im Fenster der Tab Rendering angezeigt.
Alternativ haben Sie folgende Möglichkeiten, den Tab Rendering zu öffnen:
- Drücken Sie die Esc-Taste, um die Seitenleiste zu öffnen, und klicken Sie links oben auf Weitere Tools
> Rendering. - Klicken Sie rechts oben auf das Dreipunkt-Menü
> Weitere Tools > Rendering.