Echte Geräte
123iPhone 15, 16 Pro Max und SE, Pixel 8, Galaxy S24 und Z Fold5, iPad Air, mini und Pro, Galaxy Tab sowie Laptop-Viewports bis QHD. Größe, Pixeldichte, Touch, User Agent und Client Hints ändern sich gemeinsam.
Funktionen
Chrome ist zum Surfen da. Oblo ist zum Bauen.
Alltagsbrowser zeigen dir das Web so, wie du es siehst. Oblo stellt die umgekehrte Frage: Wie sehen es alle anderen? Gerät, Sprache, Netz und Barrierefreiheit werden zu Bedienelementen in der Toolbar, nicht zu Einstellungen, die in einem Panel verschwinden, das du aus Versehen schließt.
Warum nicht einfach DevTools
Weil die Antwort keine neun Klicks kosten sollte.
Der Gerätemodus von Chrome ist großartig, und Oblo läuft auf derselben Engine. Aber er steckt in den DevTools: verteilt auf mehrere Panels, zurückgesetzt, sobald du sie schließt, beim nächsten Besuch vergessen, und die Sprache, die dein Server empfängt, ändert er nicht. Oblo packt alles in eine Toolbar und merkt es sich für jede Website.
| Alltagsbrowser | Chrome DevTools | Oblo | |
|---|---|---|---|
| Größe, Pixeldichte, Touch und User Agent des Geräts | Nein | JaGerätemodus | JaTasten 1 2 3 |
| An den Server gesendete Sprache (Accept-Language) | Teilweisefür den ganzen Browser | Teilweisenur Intl, über Sensoren | Japro Tab |
| Zeitzone und Geolocation | Nein | JaPanel Sensoren | Jafolgen der Sprache |
| Einstellungen pro Website gemerkt | Nein | Neinbeim Schließen zurückgesetzt | Ja |
| Netz, CPU, reduzierte Bewegung, Kontrast, Sehschwächen | Nein | Javerteilt auf vier Panels | Jaein Menü |
| Seitenfehler sichtbar ohne Console | Nein | Teilweisenur bei offenen DevTools | JaBadge in der Toolbar |
| SEO-Check und Vorschau fürs Teilen | Nein | TeilweiseLighthouse-Audit | JaBereich Seite |
| Seite auf dem Smartphone öffnen (localhost → LAN-IP) | Nein | Nein | JaQR-Code |
| Self-signed HTTPS auf localhost und *.test | TeilweiseWarnung wegklicken | Nein | Janur Entwicklungs-Hosts |
| Eingeloggt und ausgeloggt nebeneinander | Teilweiseeigenes Profil oder Fenster | Nein | JaInseln |
01 · Emulation, die bis zum Server reicht.
Sieh es, wie sie es sehen
Notch und Safe Area
Neuere iPhones bekommen Statusleiste, Dynamic Island und Home-Indikator, mit denselben safe-area-inset-Werten wie in Safari, im Hoch- und im Querformat.
Jede Größe
Zieh die Ränder auf die Größe, die du brauchst. Über dem Gerät liegt ein Lineal mit den Breakpoints von Tailwind: Klick auf sm, md oder lg, und die Breite rastet ein.
Drehen
OHoch- und Querformat mit einer Taste. screen.orientation und Media Queries zur Ausrichtung ziehen mit.
Sprache, Zeitzone und Standort
LZehn fertige Locales plus jedes BCP-47-Tag. Accept-Language, navigator.languages, Intl, Zeitzone und Geolocation ändern sich gemeinsam, und die Seite lädt neu, damit auch dein Server es merkt.
Hell und dunkel
TErzwinge prefers-color-scheme auf der Seite, ohne dein System-Theme anzufassen.
02 · Die Bedingungen, unter denen echte Menschen surfen.
Mach es kaputt, bevor deine Nutzer es tun
Langsames Netz und langsame CPU
SFast 4G, Slow 4G, 3G und offline; CPU gedrosselt um 4×, 6× oder 20×. Pro Website gespeichert, zusammen mit dem Gerät.
Medien und Barrierefreiheit
Druck, prefers-reduced-motion, prefers-contrast und forced-colors, dazu simulierte Sehschwächen.
Rendering-Overlays
Layout-Shift-Bereiche, Paint Flashing, Layer-Rahmen, Elementumrisse und ein FPS-Zähler, aus demselben Menü.
Fehler auf einen Blick
Ein rotes Badge zählt JS-Exceptions, console.error und fehlgeschlagene Anfragen oder solche mit Status ≥ 400 auf der Seite. Ein Klick listet sie auf und springt zur Console.
03 · Die Checks, die du vor dem Go-live machst.
Bring es sauber online
Bereich Seite
⌘\Title, Description, H1, lang, viewport, canonical, robots, Open Graph, hreflang und Alt-Texte der Bilder auf einen Blick, mit Vorschau fürs Teilen und der Gliederung der Überschriften.
Regeln für Anfragen
Blockiere URLs mit Platzhaltern (eine Liste gängiger Tracker gibt’s auch), füge Header hinzu, schalte JavaScript oder den HTTP-Cache ab. Die Regeln werden pro Website gespeichert.
Originalgetreue Screenshots
⇧⌘SIn der emulierten Auflösung, also 1170 px breit für ein iPhone 15, oder die ganze Seite bis 16.384 px. In einen Ordner oder direkt in die Zwischenablage.
04 · Kleine Dinge, die dir den Tag retten.
Gemacht für deine Arbeitsweise
Lokales HTTPS, das einfach funktioniert
Self-signed-Zertifikate werden auf localhost, 127.x, *.localhost, *.test, *.local und privaten IPs akzeptiert. Überall sonst bleiben Zertifikatsfehler Fehler.
Auf deinem echten Smartphone
QEin QR-Code mit der Adresse der Seite, in der localhost zu deiner LAN-IP wird: Dein Smartphone öffnet direkt deinen Dev-Server.
Inseln
⇧⌘NJede Insel hat eigene Cookies und eigenen Speicher und merkt sich Logins auch nach dem Beenden: ein Admin und ein Gast nebeneinander, jeder auf seiner Insel.
Es merkt sich alles
Jede Website öffnet sich wieder mit dem Gerät, der Sprache, dem Theme und den Bedingungen, mit denen du sie getestet hast.
Alles auf null
Löscht Cookies (auch der übergeordneten Domain), localStorage, sessionStorage, IndexedDB, Service Worker und den Cache der Website und lädt dann neu.
Tastatur zuerst
Jeder Befehl hat ein globales Tastenkürzel und eine Einzeltaste, beide in den Einstellungen frei belegbar.
Und immer noch ein Browser
Tabs, die wiederkommen, Autovervollständigung aus dem Verlauf, Lesezeichen und die Suchmaschine deiner Wahl. Für den ganzen Tag, nicht nur zum Testen.
Ehrliche Grenzen
Was Oblo (noch) nicht kann.
Es ist nicht Safari
Die Engine ist Chromium. Auf iPhone und iPad stimmen Größe, Touch, Sprache und User Agent, aber die eigenen Rendering-Bugs von WebKit zeigen sich nur in einem echten Safari.
Linux nur x64
Für Linux gibt es ein deb-Paket und ein AppImage für 64-Bit-Prozessoren von Intel und AMD: vorerst kein ARM, Flatpak oder Snap.
Nur in Oblo erstellte Passkeys
Passkeys aus dem iCloud-Schlüsselbund, aus Chrome oder vom Handy (Anmeldung per QR-Code oder Bluetooth) sind nicht verfügbar. Auf dem Mac erstellt Oblo eigene mit Touch ID: Melde dich anders an und füge in den Kontoeinstellungen einen aus Oblo hinzu.
Manche Anmeldungen lehnen es ab
Manche Websites sperren Browser, die sie nicht als Chrome, Safari, Firefox oder Edge erkennen. Die Anmeldung mit Google funktioniert; bei anderen Diensten kann es vorerst noch passieren.
In Entwicklung Oblo 0.2, direkt auf Chromium gebaut, behebt die Kompatibilitätsprobleme mit Identitätsanbietern, geschütztem Streaming und Passkeys. Es kommt zuerst für Macs mit Apple Silicon, alle anderen Systeme folgen kurz darauf.
Probier es an deiner nächsten Website.
Download
Wähle dein System.
macOS
Apple Silicon und Intel, ab macOS 13
Version: Apple Silicon · Intel
Windows
Installer für Windows 10 und 11, 64 Bit
Der Installer ist noch nicht signiert: Wenn Windows eine Warnung zeigt, wähle „Weitere Informationen“ und dann „Trotzdem ausführen“.
Linux
deb-Paket für Ubuntu und Debian, 64 Bit
Öffne die .deb-Datei mit Ubuntu Software oder installiere sie mit sudo apt install ./oblo_*.deb. Auf anderen Distributionen nimmst du das AppImage (braucht libfuse2).