Eine Webseite auf dem iPhone debuggen – ganz ohne Mac

Mit der Diagnose anfangen: der automatische Durchlauf

Bevor du am DOM herumstocherst, lass dir vom automatischen Scan das Offensichtliche sagen: Die Diagnose in OpenHTML listet fehlende Dateien, auf die die Seite verweist, externe Ressourcen, die der Datenschutz-Standard blockiert hat, JavaScript-Laufzeitfehler und Codierungsprobleme – jeweils mit einer Ein-Tipp-Lösung, wo es eine gibt (Netzwerk erlauben, JavaScript aktivieren, auf den lokalen Server umschalten).

In der Praxis klärt das die meisten „Warum ist die Seite leer / ohne Stile / halb kaputt?“-Fälle in Sekunden – besonders bei KI-generierten Seiten, die auf Dateien verweisen, die nie erzeugt wurden.

Konsole: was die Seite zu sagen hat

Die Konsole erfasst log-, warn- und error-Ausgaben des JavaScripts der Seite, live. Nicht abgefangene Ausnahmen landen mit ihrer Meldung hier – meist der schnellste Hinweis, wenn die Interaktivität stirbt.

Element-Inspektor: das DOM, auf dem Gerät (Pro)

• Tippe ein beliebiges Element an, um Tag, Attribute und berechnete Stile zu sehen.
• Bearbeite Attribute direkt, um eine Vermutung zu testen – repariert sich das Layout, wenn diese Klasse verschwindet?
• Spring von einem geprüften Element direkt zu seiner Zeile in der Quelltextansicht.

Netzwerkbereich: jede Anfrage, mit Timing (Pro)

Beobachte fetch-, XHR- und WebSocket-Verkehr mit URLs, Statuscodes, Größen und Timing – das Gegenstück zum Netzwerk-Tab, auf dem Gerät. Exportiere die ganze Sitzung als HAR-Datei, um sie später in den DevTools am Desktop, in Charles oder Proxyman auszuwerten.

Denk an den Datenschutz-Standard: Seiten kommen erst ins Netz, wenn du es pro Dokument erlaubst. Ein leerer Netzwerkbereich kann also schlicht heißen, dass die Seite offline gehalten wird – die Diagnose sagt es dir.

Echte Bedingungen nachstellen

• Der Lokaler-Server-Modus (Pro) stellt Projekte über 127.0.0.1 bereit, damit fetch(), ES-Module und das Laden von JSON sich wie in Produktion verhalten – unverzichtbar für ZIP-Web-Projekte.
• Viewport-Vorgaben (Pro) stellen die Seite in Telefon-, Tablet- und Desktop-Breite dar, um responsive Fehler aufzuspüren.
• „Desktop-Website anfordern“ (Pro) lädt das Desktop-Layout, wenn sich eine Seite zu eifrig an Mobilgeräte anpasst.

Eine realistische Sitzung

1. Seite oder Projekt importieren; die Diagnose meldet ein blockiertes CDN-Stylesheet und einen Konsolenfehler.
2. Netzwerk für das Dokument erlauben → die Stile kommen an, der Fehler bleibt.
3. Die Konsole zeigt eine undefinierte Variable in app.js; die Quelltextansicht springt zur Zeile.
4. Die Lösung bestätigst du, indem du das DOM-Attribut im Inspektor bearbeitest – danach reparierst du die Datei am Schreibtisch richtig und importierst sie zur Kontrolle erneut.