Da immer mehr Menschen auf ihren mobilen Geräten surfen, wird es für uns - die Webmaster - immer wichtiger, dass unsere Websites im mobilen Browser gut rendern. Responsive Webdesign ist wahrscheinlich der Weg zu gehen, aber immer noch erfordert eine Menge Tests, um sicherzustellen, dass es in alle Geräte und Bildschirmgröße passt. Es ist fast unmöglich, alle mobilen Geräte der Welt zu erhalten, aber mit einem nützlichen Tool im Google Chrome-Entwicklertool können Sie Ihre Website in einer großen Liste von Mobilgeräten testen (ohne einen einzigen Cent auszugeben).

Die Emulation "Gerätemodus" in Chrome Developer Tool ist ein nützliches Tool zum Testen Ihrer Website auf mehreren mobilen Geräten. Wie sein Name andeutet, emuliert er den Browser in verschiedenen Geräten, so dass Sie sehen können, wie Ihre Website in jedem Browser rendert.

Öffnen Sie zunächst Chrome und laden Sie die Website, die Sie testen möchten. Drücken Sie F12 ("Cmd + Opt + I" für Mac OS X), um das Developer Tool zu öffnen. Alternativ können Sie mit der rechten Maustaste klicken und "Element prüfen" auswählen.

Klicken Sie im Developer Tool-Fenster auf das mobile Symbol in der oberen linken Ecke.

Wechseln Sie zurück zum Chrome-Hauptfenster, und Sie sollten feststellen, dass die Website in einen Rastermodus geändert wurde.

Jetzt müssen Sie nur noch das Mobilgerät in der Dropdown-Liste "Gerät" auswählen. Die Website passt sich automatisch an die Bildschirmgröße des Geräts an.

Wenn Sie durch die Geräteliste blättern, können Sie einige der beliebten Geräte wie iPhone 3GS, 4, 5, 6, 6 Plus, Samsung Galaxy Note usw. finden.

Andere Dinge, die Sie im Gerätemodus testen können, sind das Ändern der Bildschirmauflösung, das Einstellen des Pixelverhältnisses, das Ändern des Benutzeragenten des Browsers usw.

Um den "Gerätemodus" zu beenden, kehren Sie einfach zum Developer Tool-Fenster zurück und klicken Sie erneut auf das Mobile-Symbol oder schließen Sie einfach das Developer Tool-Fenster.

Fazit

Das Entwicklerwerkzeug in Google Chrome ist ein sehr leistungsfähiges und nützliches Tool für Webmaster und Entwickler zum Testen und Debuggen ihrer Websites. Es gibt ein ähnliches Tool in Firefox (die meisten Browser verfügen sogar über einen Entwickler-Tool-Modus), aber der in Chrome ist mit mehr Funktionen ausgestattet und einfacher zu verwenden.