A presentation at webclerks Meetup in in Vienna, Austria by Manuel Matuzovic
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
Dev Tools, browsersync, openstf, Emulatoren
for free. You
can too.