Testen von Responsive-Design in XAMPP mit Smartphones / Tablets

deweso.de Testumgebung Frühjahr 2012Tutorial: Responsive-Design mit XAMPP

Wenn man Responsive-Design Seiten erstellt, gibt es viele Emulatoren, allerdings sind die (nach meiner Meinung) nur einen gute Hilfe, ersetzen aber nicht den Test mit echten Geräten.

Moderne Tablets und Smartphones haben WLAN, damit sollte sich der Testserver auch erreichen lassen.

Ich nutze hierfür XAMPP, er ist leicht zu installieren und ist nur für die lokale Entwicklung geeignet, da er nicht über ein ausgefeiltes Sicherheitskonzept verfügt.

Es gibt in den XAMPP Verzeichnissen die Datei httpd-xampp.conf in der Steht das der Server nicht von "außerhalb" des eigenen Rechners angerufen werden darf. Dies ist auch grundsätzlich richtig, nur so können wir nicht über das WLAN testen. Alles freizugeben ist nicht zu raten!

Eine Lösung besteht darin, die IPs der eigenen Geräte zu ermitteln, und diese dann in der httpd-xampp.conf zusätzlich einzutragen.

Der Lösungsweg sollte natürlich auch mit anderer Hardware funktionieren.
Bitte keine Fragen wie "ich habe Router XY wie mache ich das da?". Dann lest die Gebrauchsanweisung, googlet fragt Bekannte oder konsultiert ein Medium Eurer Wahl.

 

  1. Router einrichten (i.d. Fall FritzBox)den ausgesuchten WLAN Geräten immer die gleiche IP zuweisen.
    Ansonsten kann es passieren, das bei einer Neuinitialisierung, dem Gerät eine andere IP zugewiesen wird und dann geht es wieder nicht (und Ihr werdet Euch wahrscheinlich wundern und schön am suchen sein.
    Kopiert Euch aus dem Interface die IP oder merkt sie Euch. (Speichern nicht vergessen.)
  2. httpd-xampp.conf IP eintragendie ermittelten IP-Adressen in die httpd-xampp.conf eintragen
    Die Datei liegt standardmäßig unter:
    C:\xampp\apache\conf\extra\httpd-xampp.conf
    ganz weit unten findet Ihr folgende Zeile:
    Allow from 127.0.0.0/8
    darunter könnt Ihr nun Eure IPs schreiben
    Allow from XXX.XXX.XXX.XXX # Gerät 1
    Erklärung:
    "Allow from" bedeutet: Erlaube den Zugriff von
    "XXX.XXX.XXX.XXX": Hier muss die IP Adresse Eures WLAN-Gerätes eingetragen werden.
    Wer augepasst hat macht nun "Strg + v".
    Der Text nach dem "#" wird nicht interpretiert (auskommentiert) in meinem Fall nutze ich das um zu sehen, welches Gerät sich hinter welcher IP verbirgt.
  3. Appache Server neu starten,
    damit die Veränderungen in der CONF übernommen werden.
  4. Have Fun!

Anmerkung:

Wenn Ihr diese Geräte nicht mehr nutzt, löscht dise auch wieder aus der CONF. Ihr macht mit jeder eingetragenen IP ein kleines Tor auf, also handelt mit Bedacht.

Alle aktuell erstellten Websits von deweso sind Responsive.



So erreichen Sie uns:

deweso.de - Wir bringen Lösungen

  +49 40 - 59450 981
  info@deweso.de

 deweso.de
Inh. Frank Delventhal
Hermann-Balk-Str. 111a
22147 Hamburg


Suche