Cross Device Testing - Speaker Deck

Slide 1

Slide 1 text

CROSS DEVICE TESTING Geht das auch weniger mühsam?

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

BROWSER

Slide 4

Slide 4 text

WEITERE BROWSER

Slide 5

Slide 5 text

DEVICE MODE & EMULATION Bildschirmgröße simulieren Netzwerkverbindung drosseln Device Pixel Ratio anpassen Touch / No Touch User Agent umstellen

Slide 6

Slide 6 text

GEOLOCATION

Slide 7

Slide 7 text

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/

Slide 8

Slide 8 text

SAFARI

Slide 9

Slide 9 text

BROWSERSYNC https://www.browsersync.io

Slide 10

Slide 10 text

BROWSERSYNC Live reload Click, Scroll und Refresh Synchronisierung Form Synchronisierung Netzwerkverbindung drosseln Features

Slide 11

Slide 11 text

BROWSERSYNC npm install -g browser-sync cd pfad/zu/meinem/projekt browser-sync start --server --files “css/*.css” (HTML/Statisch) oder browser-sync start --proxy “myproject.dev” --files “css/*.css” (Dynamisch) Installation und Setup

Slide 12

Slide 12 text

BROWSERSYNC Access URLs

Slide 13

Slide 13 text

BROWSERSYNC User Interface

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

EMULATOREN iOS Simulator (kommt mit Xcode) Android SDK Tools Windows Phone Emulator Opera Mini und weitere...

Slide 16

Slide 16 text

EMULATOREN Safari iOS Simulator

Slide 17

Slide 17 text

EMULATOREN FFDE (WebIDE) iOS Simulator

Slide 18

Slide 18 text

EMULATOREN Chrome Android Emulator chrome://inspect/#devices

Slide 19

Slide 19 text

EMULATOREN Chrome ~ iOS Simulator https://github.com/google/ios-webkit-debug-proxy brew install ios-webkit-debug-proxy ios_webkit_debug_proxy http://localhost:9222/

Slide 20

Slide 20 text

EMULATOREN Vorlon alle http://www.vorlonjs.com/ OS unabhängig, lässt sich mit Android, Windows, iOS, etc. verbinden

Slide 21

Slide 21 text

GERÄTE Chrome Remote Debugging & Screencasting Browser in Chrome screencasten und inspecten

Slide 22

Slide 22 text

GERÄTE 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.

Slide 23

Slide 23 text

GERÄTE Safari iPad/iPhone: Settings > Safari > Privacy & Security > Fraudulent Website Warning [OFF] iPad/iPhone: Settings > Safari > Advanced > Web Inspector [ON]

Slide 24

Slide 24 text

GERÄTE FFDE (WebIDE)

Slide 25

Slide 25 text

GERÄTE openstf.io - Smartphone Test Farm Android Geräte über den Browser steuern Mit Desktop-Tastatur tippen Screenshots erstellen Multitouch support Urls in allen installierten Browsern öffnen uvm.

Slide 26

Slide 26 text

GERÄTE openstf.io - Installation brew install rethinkdb graphicsmagick zeromq protobuf yasm pkg-config npm install -g stf brew install android-platform-tools

Slide 27

Slide 27 text

GERÄTE openstf.io - Setup rethinkdb stf local Aufrufen über http://localhost:7100

Slide 28

Slide 28 text

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/

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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/>

Slide 34

Slide 34 text

Happy Testing