Safari für iOS enthält eine optionale Debug-Konsole, die Webentwicklern hilft, Probleme mit Webseiten auf dem iPhone und iPad aufzuspüren und zu lösen.

Noch besser, mit den neuesten Versionen von iOS verwendet es tatsächlich denselben Web Inspector wie Safari auf dem Desktop. Wenn Sie also das iPhone oder iPad an den Computer anschließen, können Sie die Debugging-Tools von Safari direkt verwenden mit Ihrem iOS- oder iPadOS-Gerät

Ältere Versionen von iOS verfügen ebenfalls über diese Funktion, und obwohl sie nicht so umfassend ist wie die Desktop-Safari-Debug- und Entwicklertools, ist sie dennoch nützlich und auf dem iPhone und iPad einfach zu aktivieren oder zu deaktivieren.

Lassen Sie uns lernen, wie Sie diese Funktion sowohl in neuen als auch in alten Versionen von iOS aktivieren, und erfahren Sie auch, was sich zwischen den Versionen unterscheidet.

Aktivieren und Verwenden von Web Inspector in Safari für iPhone und iPad

Auf modernen iOS- und iPadOS-Versionen funktioniert Safari Web Inspector folgendermaßen:

1. Öffnen Sie Einstellungen > Safari > Erweitert und tippen Sie dann auf, um „Web Inspector“ zu aktivieren
2. Verbinden Sie das iPhone oder iPad mit einem Mac, gehen Sie dann zu Safari und aktivieren Sie das Entwicklermenü, falls Sie dies noch nicht getan haben, indem Sie zu Safari gehen > Einstellungen > Erweitert > Menüleiste „Entwickeln“ anzeigen
3. Öffnen Sie die Menüleiste „Entwickeln“, suchen Sie das iPhone oder iPad und öffnen Sie dann die Webseite, die Sie debuggen möchten
4. Safari Web Inspector wird geöffnet, wo Sie Webelemente vom iOS- oder iPadOS-Gerät direkt in Safari auf dem Mac debuggen und untersuchen können

Wenn Sie jetzt auf dem iPhone oder iPad navigieren, werden Sie feststellen, dass der Web Inspector in Safari auf dem Mac aktualisiert wird.

Sie können auf die Debug-Konsole über die Registerkarte "Konsole" im Webinspektor zugreifen, und Sie können auf den Debugger über die Registerkarte "Debugger" zugreifen. Und natürlich stehen auch die üblichen Web-Inspector-Tools für Elemente, Ressourcen, Netzwerke usw. zur Verfügung.

Du kannst bei Bedarf auch unterwegs einen View Source-Trick für iOS und iPadOS verwenden.

So aktivieren Sie die Debug-Konsole auf älteren iOS-Versionen

Wenn Sie eine ältere Version von iOS auf einem älteren iPhone oder iPad haben, befindet sich das gesamte Debug-Erlebnis auf dem Gerät und Sie können es nicht mit Safari auf einem Mac verbinden. Trotzdem ist es immer noch sehr nützlich, so funktioniert es:

1. Starte „Einstellungen“ und tippe auf „Safari“
2. Auf „Erweitert“ tippen
3. „Debug Console“ auf ON schieben

Tippen Sie nach der Aktivierung oben auf einem beliebigen Safari-Bildschirm auf die Debug-Konsole, um Webseitenfehler anzuzeigen.

Die Standardliste zeigt alle Fehler an, aber Sie können spezifischere HTML-, JavaScript- und CSS-Fehler aufschlüsseln, indem Sie sie einzeln antippen.

Ein weiteres nützliches Tool für mobile Webentwickler ist Firebug Lite für iOS, das ein Javascript-Lesezeichen verwendet, um eine einfachere Version des beliebten Firebug-Entwicklungstools zu laden. Diese Funktionalität ist wahrscheinlich auch für die älteren iOS-Versionen am nützlichsten, da neuere Versionen neue Funktionen haben.

Verwenden Sie Webentwickler-Tools für iPhone oder iPad? Teilen Sie uns Tipps, Tricks, Apps oder Techniken in den Kommentaren unten mit.