Cross Device Testing

CROSS DEVICE TESTING Geht das auch weniger mühsam?

@mmatuzo matuzoat matuzo matuzo Manuel Matuzović Frontend Developer, Dozent, Artikel-Schreiber matuzo.at

BROWSER

WEITERE BROWSER

DEVICE MODE & EMULATION

Bildschirmgröße simulieren

Netzwerkverbindung drosseln

Device Pix el Ratio anpassen

T ouch / No Touch

User Agent umstellen

GEOLOCATION

STYLE EDITOR IN FFDE CSS live bearbeiten und Speichern https://www.youtube.com/watch?v=KuilgmtM-JE https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/

SAFARI

BROWSERSYNC https://www.browsersync.io

BROWSERSYNC

Live reload

Click, Scroll und R efresh Synchronisierung

Form Synchronisierung

Netzwerkverbindung drosseln Features

BROWSERSYNC

npm install -g browser-sync

cd pfad/zu/meinem/projekt

browser-sync start --ser ver --files “css/*.css” (HTML/Statisch) oder

browser-sync start --pro xy “myproject.dev” --files “css/*.css” (Dynamisch) Installation und Setup

BROWSERSYNC Access URLs

BROWSERSYNC User Interface

BROWSERSYNC https://www.browsersync.io/docs/gulp/ https://www.browsersync.io/docs/grunt/ Gulp & Grunt

E M U L AT O R E N

iOS Simula tor (kommt mit Xcode)

Android SDK T ools

Windows Phone Emula tor

Opera Mini und w eitere...

E M U L AT O R E N Safari iOS Simulator

E M U L AT O R E N FFDE (WebIDE) iOS Simulator

E M U L AT O R E N Chrome Android Emulator chrome://inspect/#devices

E M U L AT O R E N Chrome ~ iOS Simulator https://github.com/google/ios-webkit-debug-proxy brew install ios-webkit-debug-proxy ios_webkit_debug_proxy http://localhost:9222/

E M U L AT O R E N Vorlon alle http://www.vorlonjs.com/ OS unabhängig, lässt sich mit Android, Windows, iOS, etc. verbinden

G E R ÄT E Chrome Remote Debugging & Screencasting Browser in Chrome screencasten und inspecten

G E R ÄT E Chrome Remote Debugging & Screencasting Voraussetzungen:
Android 4.0+ (Screencasting: 4.4.3) und Chrome for Android und die neueste Chrome Version (am besten Canary). USB Debugging aktivieren: Settings > Developer options > USB Debugging.

G E R ÄT E Safari iPad/iPhone: Settings > Safari > Privacy & Security > Fraudulent Website Warning [OFF] iPad/iPhone: Settings > Safari > Advanced > Web Inspector [ON]

G E R ÄT E FFDE (WebIDE)

G E R ÄT E openstf.io - Smartphone Test Farm

Android Gerä te über den Browser steuern

Mit Desktop- Tastatur tippen

Screenshots erstellen

Mul titouch support

U rls in allen installierten Browsern öffnen uvm.

G E R ÄT E openstf.io - Installation brew install rethinkdb graphicsmagick zeromq protobuf yasm pkg-config npm install -g stf brew install android-platform-tools

G E R ÄT E openstf.io - Setup rethinkdb
stf local Aufrufen über http://localhost:7100

BETRIEBSSYSTEME UND MEHR Virtuelle Maschinen

https://www.virtualbox.org/

http://www.parallels.com/eu/products/desktop/

http://www.vmware.com/at

https://www.vagrantup.com/ IE/Edge: https://dev.windows.com/en-us/microsoft-edge/tools/vms/mac/

BETRIEBSSYSTEME UND MEHR Ghostlab http://www.vanamco.com/ghostlab/ Ähnlich wie browsersync

BETRIEBSSYSTEME UND MEHR weinre - WEb INspector REmote Bspw. für Windows Phone http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

BETRIEBSSYSTEME UND MEHR Browserstack Live, Web-Based Browser Testing https://www.browserstack.com/ ab $29,00 im Monat

BETRIEBSSYSTEME UND MEHR Saucelabs Automatisiertes Testing https://saucelabs.com/ ab $19,00 im Monat

BETRIEBSSYSTEME UND MEHR Open Device Labs

https://opendevicelab.com/

http://www.open-device-lab-vienna.at/

https://www.catalysts.cc/innovation/opendevicelab-vienna/

https://www.catalysts.cc/innovation/opendevicelab-linz/>

http://opendevicelab.at/>

Happy Testing