Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026 in Halle (Saale)

Debugging auf Mobilgeräten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Beim Debuggen einer Website auf Mobilgeräten ist das Fehlen einer sichtbaren Konsole ein häufiges Problem.

Der mühsame Kreislauf, Dateien …

  • im Editor speichern
  • Auf den Server laden
  • Im Handy-Browser öffnen und testen
  • Zurück in den Editor gehen
  • Wieder von vorne...

kann heute mit modernen Entwicklungswerkzeugen vereinfacht werden.

Moderne Tools (wie VS Code Live Server) machen das viel einfacher. Du kannst Änderungen sofort auf verschiedenen Geräten sehen – ohne ständig hochzuladen!

Alternativ hilft zumindest eine externe Tastatur und ein weiterer Bildschirm, bzw. sogar die Koppelung mit einem Desktop-PC.[1][2]

Viewport-Emulator

Trotzdem bieten die Seiteninspektoren bequeme Werkzeuge, mit denen man auf dem großen Desktop-Monitor verschiedene Browser-Fenster emulieren (deutsch: (modellhaft) nachbilden) kann.

Im Firefox kann man per Klick auf das Smartphone-/Tablet-Symbol Firefox Bildschirmgroessen testen Taste.svg rechts im Inspektor (oder mit den Tasten Ctrl+Shift+M) eine Toolbar einschalten und dann beliebige Viewport-Abmessungen testen. So sieht man direkt, ab welchen Breiten media queries greifen und Seitenelemente entweder aus dem Viewport wandern oder sich responsiv an das Fenster anpassen. Links oben kann eine Vorgabe gewählt werden oder die Größe am rechten und unteren Rand des Viewports verändert werden. Screenshot eines Viewport-Emulators im Firefox


In Chrome per Klick auf das Notebook-/Smartphone-Symbol Chrome Geraetesymbolleiste Taste.svg links im Inspektor (oder mit Ctrl+Shift+M) die Toolbar einschalten. Es können auch Vorgaben gewählt werden: Die Auswahl muss aber auf „Responsiv“ gestellt werden, damit die Anfasser zum Verändern des Viewports erscheinen. Screenshot des Viewport-Emulators in Chrome


Im Safari auf dem Mac muss das Menü „Entwickler“ eingeblendet sein: Wähle „Safari“ > „Einstellungen“, klicke auf „Erweitert“ und aktiviere „Funktionen für Webentwickler anzeigen“. Dann im Menü „Entwickler“ auf „In Modus „Responsive Design“ wechseln“ klicken (oder Tastenkombination control+command+R). Links oben kann eine Vorgabe gewählt werden oder mit den Anfassern rechts und unten der Viewport verändert werden.

Screenshot Desktop Safari im Modus Responsive Design


Trotzdem sollten Webseiten nicht nur im Labor des Entwicklers, sondern auch auf den (oft älteren) Geräten selbst getestet werden. Manchmal treten Probleme erst in der Ansicht auf dem Monitor der Endgeräte auf.

Desktop + Handy

Da kannst aber dein Smartphone mit dem Desktop-Computer verbinden und die vollständigen Entwicklertools des Desktop-Browsers nutzen.

Google Chrome Remote Debugging.

In Chrome kann man auch Webseiten auf externen - per USB an den Desktop angeschlossenen - Geräten untersuchen. [3] [4]

Voraussetzung: Das Handy muss im Entwicklermodus sein (bitte für das jeweilige Handymodell das richtige Vorgehen selbst suchen)

  1. Schließe das Mobilgerät mit USB an den Desktop an
  2. Öffne im Chrome einen neuen Tab mit der URL:
    chrome://inspect/#devices
  3. Aktiviere das Erkennen von USB-Geräten. Danach sollte das über USB Kabel angeschlossene Smartphone erkannt werden und sich mit einem Dialog zur Authorisierung melden.
  4. Über den Tab inspect kann man nun die internen Developer Tools öffnen und die berechneten Werte einsehen und so lange verändern, bis die Darstellung „passt“!

Firefox auf Android

[5][6]

iPhone + Safari

Grundsätzlich lästig ist, dass beim neu Laden einer Seite geänderte verknüpfte Dateien wie CSS, JS, Bilder etc. im Cache verbleiben und nicht ebenfalls neu geladen werden.


Variante 1. Einfache Sichtung auf iPhone / iPad:

Aktuellen Stand der Website auf den Webserver veröffentlichen und auf dem iPhone in Safari einen neuen Tab öffnen im Modus „Privates Surfen“:

Screenshot Privates Surfen in Safari auf dem iPhone

Seite aufrufen und testen, danach den privaten Tab wieder schließen (damit werden die Daten dieser Seite gelöscht). Für den nächsten Test wieder dasselbe mit einem neuen privaten Fenster, also viel Getippe.


Variante 2. Massiver mit iPhone / iPad:

Wenn ich ganz sicher sein will, dass ich auch alle verknüpften Dateien wie CSS, Scripts, Bilder etc. ganz neu geladen bekomme, lösche ich manchmal den kompletten Safari-Cache: Öffne die App „Einstellungen“, tippe auf „Apps“ und wähle „Safari“ aus. Scrolle nach unten und tippe auf „Verlauf und Websitedaten löschen“.

Im Gegensatz zum Desktop-Browser ist das jedoch brutaler: Dadurch werden auch sämtliche geöffneten Tabs geschlossen, für Leute mit vielen geöffneten Tabs also eher unzumutbar.


Variante 3: Assets versionieren (Cache-Busting)

Auch für den Desktop nützlich, wenn z.B. AuftraggeberInnen am Telefon eine andere Farbe haben möchten und ich höchstens erklären will, wie sie in Ihrem Browser die Seite neu laden müssen. Parameter an den Dateipfad hängen wie z.B. <link type="text/css" rel="stylesheet" href="css/stil.css?v=4.1">

Dadurch behandelt der Browser die neue Version als komplett neue Stylesheet-Datei und lädt sie neu herunter. Der Vorteil ist, dass die verknüpfte Datei nicht umbenannt werden muss, allerdings muss beim Verweis auf die Datei der Parameter laufend verändert werden.


Variante 4. Mit Mac und iPhone den Entwickler-Modus von Desktop-Safari nutzen:

Auf dem Mac das Menü „Entwickler“ einblenden: Wähle „Safari“ > „Einstellungen“, klicke auf „Erweitert“ und aktiviere „Funktionen für Webentwickler anzeigen“.

Auf dem iPhone / iPad in Einstellungen / Apps / Safari / Erweitert die „Webinformationen“ aktivieren und die zu prüfende Website auf dem iPhone öffnen. Mobiles Gerät per Kabel mit dem Mac verbinden und nach Aufforderung den Entsperrcode eingeben.

Auf dem Mac in Safari ins Menü „Entwickler“ klicken und das mobile Gerät und die dort geöffnete Seite wählen. Es öffnet sich ein Fenster mit den Entwickler-Tools, du erhältst die vollständige Konsole und den DOM-Inspector:

Screenshot Desktop Safari Seiteninspektor für eine auf dem iPhone geöffnete Seite

Nun wie gewohnt auf dem großen Bildschirm in den Entwicklertools Dinge deaktivieren, verändern oder ergänzen und auf dem mobilen Gerät sofort die Auswirkungen prüfen.

Im Tab „Netzwerk“ kann die Option „Caches deaktivieren“ eingeschaltet werden und die Seite auf dem iPhone auf dem Mac per Menü Darstellung / Seite neu laden oder command + R neu geladen werden, inklusive aller verknüpften Dateien wie CSS, JS, Bilder etc.


Siehe auch

  • Entwickler-Tools - testen und debuggen
    • HTML und CSS untersuchen
     
  • Einstieg in JavaScript
    - Programmieren und Debuggen
     
  • Webseiten auf Barrierefreiheit testen
     

Weblinks

  1. ↑ chip.de: So einfach koppeln Sie jetzt den Windows-PC mit Ihrem Android-Smartphone
  2. ↑ How to get Started with Web Development on Android (appuals.com)
  3. ↑ Remote Web Debugging unter Android und Chrome (till.net)
  4. ↑ Debugging Safari/Chrome on your iPhone/iPad/iOS device (davidlozzi.com)
  5. ↑ Debugging Firefox on Android (chenhuijing.com)
  6. ↑ A Detailed Guide On How To Use Firefox To Debug Web Issues In Android (LambdaTest)

Abgerufen am 19.03.2026
von "http://wiki.selfhtml.org/wiki/Debugging_auf_Mobilger%C3%A4ten"