Responsive Tester - Mobile Ansicht, Breakpoint-Checker & CSS-Editor

Jede Seite auf mehreren Bildschirmen zugleich. Mobile Ansicht, alle Größen und Breakpoints testen, CSS live bearbeiten.

Responsive Tester ist der schnellste Weg, um zu sehen, wie sich eine Seite bei jeder Bildschirmgröße gleichzeitig verhält. Öffne jede beliebige Website in einer Reihe synchronisierter Ansichtsfenster, Smartphones, Tablets und Desktops nebeneinander, klicke, scrolle und tippe dann in einem Fenster und beobachte, wie jedes andere Fenster folgt. Wähle ein Element aus, bearbeite sein CSS live, und deine Änderungen erscheinen sofort über alle Breakpoints hinweg. Verwendung - Schalte die Erweiterung um, indem du auf das Symbol klickst, sie im Rechtsklick-Kontextmenü auswählst oder das Tastenkürzel Alt/Option + Shift + V verwendest. - Füge Ansichtsfenster aus integrierten Gerätevorlagen hinzu oder gib eigene Abmessungen ein. - Erkenne die eigenen Breakpoints der Website und erstelle passende Ansichtsfenster mit einem Klick. - Scrolle, drehe, verändere die Größe oder zoome jedes Ansichtsfenster und erstelle einen sauberen Screenshot von jedem Frame. - Aktiviere die Interaktionssynchronisierung, um Klicks, Hover-Effekte, Tastatureingaben und Navigation über alle Fenster hinweg zu spiegeln (Pro). - Öffne den Editor, wähle ein Element aus und bearbeite sein CSS live über alle Breakpoints hinweg (Pro). Funktionen - Zeige eine Vorschau jeder Seite über mehrere synchronisierte Ansichtsfenster an, in einer scrollenden Reihe oder umgebrochen in einem Raster. - Die Scroll-Synchronisierung hält jedes Ansichtsfenster ausgerichtet, einschließlich Scrollbereichen innerhalb der Seite. - Integrierte Gerätevorlagen für beliebte Smartphones, Tablets und Desktops. - Eigene Abmessungen für Ansichtsfenster. - Die Breakpoint-Erkennung der Website liest die eigenen Media-Regeln der Seite und erstellt passende Ansichtsfenster. - Drehe jedes Ansichtsfenster zwischen Hoch- und Querformat. - Ziehe, um die Größe von Ansichtsfenstern zu verändern und die Breiten dazwischen zu testen. - Stufenloses Zoomen, um mehr auf den Bildschirm zu bekommen. - Screenshots jedes Ansichtsfensters mit einem Klick. - Helle und dunkle Designs, die deinem System folgen oder auf eines der beiden festgelegt werden. - Funktioniert auf jeder Webseite, auch auf Seiten, die sich normalerweise weigern, in Frames geladen zu werden. - Zugriff über das Symbol in der Symbolleiste, das Rechtsklick-Kontextmenü oder das Tastenkürzel. - Passe Tastenkürzel an, indem du chrome://extensions/shortcuts aufrufst. Responsive Tester PRO Eine PRO-Stufe schaltet die zwei Funktionen frei, die aus dem Vorschauen ein Bauen machen. - Interaktionssynchronisierung: Klicks, Hover-Effekte, Formulareingaben, Tastendrücke und Seitennavigation werden in Echtzeit über alle Ansichtsfenster gespiegelt, sodass du ein Fenster steuerst und die gesamte Matrix reagieren siehst. Der Element-Abgleich wird bei jeder Interaktion überprüft, sodass eine synchronisierte Aktion niemals auf dem falschen Element landet. - Live-CSS-Editor: Wähle ein beliebiges Element aus und bearbeite seine Regeln in einem seitlichen Editor mit voller @media-Query-Unterstützung, sodass jede Änderung automatisch im richtigen Breakpoint landet. Erzwinge Pseudo-Zustände wie :hover und :focus, mache jede Änderung rückgängig oder wiederhole sie, und sieh, wie Bearbeitungen sofort über alle Ansichtsfenster gleichzeitig angewendet werden. PRO erfordert eine einmalige Zahlung für lebenslangen Zugriff, gültig für 3 Aktivierungen. Jede Installation beinhaltet eine kostenlose 7-day-Testphase ohne erforderliche Karte, plus eine 30-day-Geld-zurück-Garantie. Gemacht Für - Entwickler: Erkenne Layout-Verschiebungen und Breakpoint-Fehler, bevor sie live gehen. Stelle ein Smartphone, ein Tablet und einen Desktop nebeneinander und steuere sie alle gleichzeitig, anstatt immer wieder die Größe eines Fensters zu ändern. - Designer: Stelle sicher, dass ein Build bei jeder Größe standhält und dass das responsive Verhalten der Absicht entspricht, vom kleinsten Smartphone bis zum breitesten Desktop. Installation - Speziell auf Stabilität in Google Chrome 116+ ausgelegt. - Auf jedem Chromium-Browser installierbar, für das beste Erlebnis solltest du jedoch sicherstellen, dass dein Browser alle erforderlichen APIs (wie Offscreen) unterstützt. Falls es Probleme bei der Installation gibt, aktualisiere deinen Browser auf die neueste Version und versuche es erneut.