Schlagwort: entwickler-tools

  • Chrome: Mobile Browser und Smartphones emulieren und Mobilversionen von Webseiten ansehen

    Von den meisten Webseiten gibt es zwei Varianten: eine Desktop- und eine Mobilversion. Der Webserver erkennt automatisch, auf welchem Gerät man surft und liefert entweder die große Desktop-Version oder die für Smartphones und Tablets optimierte Variante der Webseite aus. Wer’s selber ausprobieren möchte, braucht dazu noch nicht einmal die Geräte wechseln. In Chrome gibt es eine versteckte Emulatorfunktion, mit der man jedes Smartphone, Tablet und andere Mobilgerät simulieren kann.

    Smartphones und Tablets emulieren und die Mobilversionen anzeigen

    Wer schon immer mal wissen wollte, wie eine Webseite auf einem iPhone oder Android-Handys aussieht, aber nicht gleich zu den verschiedenen Geräten greifen möchte (wer hat auch schon alle Smartphone-Versionen zu Hause rumliegen), nutzt einfach den Emulator in Google Chrome. Damit lassen sich alle gängigen Smartphones und Tablets simulieren. So funktioniert’s:

    1. Rufen Sie in Google Chrome die gewünschte Webseite auf, die Sie gerne mal in der Mobilversion sehen möchten.

    2. Dann öffnen Sie die Entwickerkonsole, indem Sie aus dem Menü oben rechts den Befehl Tools | Entwickertools aufrufen oder die Tase [F12] oder die Tastenkombination [Strg][Shift][I] (auf dem Mac [cmd][shift][i]) drücken.

    3. Am unteren Fensterrand erscheinen die Entwicklertools. Drücken Sie einmal die [Esc]-Taste, um die erweiterte Ansicht zu aktivieren und einen weiteren Bereich einzublenden.

    4. Hier können Sie im Bereich Emulation alle möglichen Endgeräte simulieren. Wählen Sie zunächst aus der Liste Device das gewünschte Gerät aus, etwa das Samsung Galaxy S4. Unterstützt werden alle gängigen Mobilgeräte und Android-Versionen, darunter:

    • Amazon Kindle
    • Apple iPad 1 / 2 / 3 / 4 iPad Mini
    • Apple iPhone 3GS / 4 / 4S / 5 / 5S
    • Blackberry PlayBook  / Z10 /Z30
    • Google Nexus S / 4 / 5 / 7.2 / 7 / 10
    • HTC Evo / Touch HD / Desire HD / Desire
    • HTC One X /EVO LTE
    • HTC Sensation / EVO 3D
    • LG Optiumus G / LTE / 2X / 3D / One / 4X HD / Black
    • Motorola Defy / Droid / Droid 3 / Droid 4 / Droid Razr / Droid Razr HD / Atrix 4G / Atrix 2 / Droid X / Milestone
    • Motorola Xoom / Xyboard
    • Nokia C5 / C6 / C7 / N97 / N8 / X7
    • Nokia Lumia 7X0 / 8XX / 900 / N800 / N810 / N900
    • Samsung Galaxy S / S II / S III / Galaxy Nexus / W / S4 / S5
    • Samsung Galaxy Tab 7.7 / 8.9 / 10.1
    • Sony Xperia S / Ion / Sola / U / Z / Z1

    Mit jeder neuen Chrome-Version wird auch die Liste der unterstützten Mobilgeräte erweitert. Das ist auch gut so, da fast jede Woche neue Geräte und Geräteversionen auf den Markt kommen.

    google-chrome-smartphone-tablet-simulieren-emulieren-emulation

    5. Nach einem Klick auf Emulate  stellt Chrome die Webseite so dar, wie sie auf dem gewählten Gerät aussehen würde. Sollte es nicht auf Anhieb klappen, drücken Sie die [F5]-Taste, um die Seite zu laden. Selbst die Finger-Navigation wird simuliert. Per Klick auf die simulierte Webseite lässt sich der Fingertipp auf Links und Menüs emulieren.

    google-chrome-smartphone-tablet-simulieren-emulieren-emulation-2

    Per Klick auf Screen können Sie verschiedene Bildschirmgrößen simulieren und prüfen, wie sich die mobile Webseite bei verschiedenen Displaygrößen verhält.

    google-chrome-smartphone-tablet-simulieren-emulieren-emulation-3

    Im Bereich User Agent lässt sich der User Agent manipulieren. Der User Agent ist praktisch das Erkennungszeichen, mit dem sich der Browser beim Webserver zu erkennen gibt. Hier können Sie neben den mobilen Browserversionen auch verschiedene Desktop-Versionen ausprobieren, etwa alte Opera-, Chrome- oder Firefox-Versionen.

    google-chrome-smartphone-tablet-simulieren-emulieren-emulation-4

    Mit Sensors können Sie die verschiedenen Sensoren eines typtischen Smartphones oder Tablets simulieren. Dazu gehören beispielsweise der Touch-Sensor, der GPS-Sensor oder andere Techniken zur Geo-Lokalisierung oder der Beschleunigungssensor. Selbst Multi-Touch lässt sich simulieren, indem man die [Shift]-Taste gedrückt hält.

    google-chrome-smartphone-tablet-simulieren-emulieren-emulation-5

    Um den Emulationsmodus und die Entwickerkonsole wieder zu verlassen, drücken Sie einfach erneut die Taste [F12] oder klicken oben rechts in der Entwicklerkonsole auf das X. Die Webseite wird dann wieder im normalen Desktopmodus angezeigt.

  • Internet Explorer: Bilder deaktivieren und Webseiten ohne Bilder drucken und anzeigen

    Es kommt immer wieder vor, dass eine Webseite auch ausgedruckt werden soll. In vielen Fällen wird dabei jedoch nur der Text benötigt. Das Drucken der Bilder kostet dagegen nur unnötig Tinte. Der Internet Explorer bietet ab der Version 8 eine praktische Funktion, um beim Drucken Tinte zu sparen.

    Starten Sie zunächst den Internet Explorer, und wechseln Sie auf die Webseite, die ausgedruckt werden soll. Drücken Sie anschließend die Taste [F12], um die Entwickler-Tools des Internet Explorers einzublenden. Hier können Sie einfach auf das Menü „Bilder“ klicken und die Option „Bilder deaktivieren“ auswählen.

    internet-explorer-bilder-deaktivieren-ausschalten-grafiken-ausblenden

    Im Anschluss wird die Webseite neu geladen, wobei jedoch keine Bilder mehr angezeigt werden. Das Layout der Seite bleibt jedoch komplett erhalten. Somit entspricht der Ausdruck nach wie vor der Originalseite. Einzig die Bilder werden nicht gedruckt, was eine Menge Tinte einspart. Auf dem Ausdruck erscheint statt des Bildes lediglich ein Kreuz sowie der eventuell hinterlegte Alternativtext. Ob ein solcher Text gedruckt wird, hängt davon ab ob der Betreiber der Webseite einen entsprechenden Text eingestellt hat.

    Um die Webseite auszudrucken, wählen Sie nun einfach den Befehl „Datei | Drucken“. Um die Bilder künftig wieder anzuzeigen, entfernen Sie einfach das Häkchen bei „Bilder deaktivieren“ wieder. Anschließend nochmals die Taste [F12] drücken, um die Entwickler Tools wieder auszublenden. Solange Sie die Option nicht deaktivieren, werden auf Webseiten generell keine Bilder mehr angezeigt.

    Bilder deaktivieren bei UMTS

    Sofern Sie mit einem Volumentarif surfen, können Sie durch das Deaktivieren der Bilder nícht nur schneller surfen, sondern auch jede Menge an Volumen sparen. Besonders wenn Sie unterwegs sind und beispielsweise nur die aktuellen Schlagzeilen lesen möchten, ist es ratsam, die Bilder auszublenden. Sie werden überrascht sein, wie schnell die Seiten ohne Bilder geladen werden.