Cross Device Testing

Dev Tools, browsersync, openstf, Emulatoren

Transcript

1. CROSS DEVICE TESTING Geht das auch weniger mühsam?
2. @mmatuzo matuzoat matuzo matuzo Manuel Matuzović Frontend Developer, Dozent, Artikel-Schreiber matuzo.at
3. BROWSER
4. WEITERE BROWSER
5. DEVICE MODE & EMULATION Bildschirmgröße simulieren Netzwerkverbindung drosseln Device Pixel Ratio anpassen Touch / No Touch User Agent umstellen
6. GEOLOCATION
7. 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/
8. SAFARI
9. BROWSERSYNC https://www.browsersync.io
10. BROWSERSYNC Live reload Click, Scroll und Refresh Synchronisierung Form Synchronisierung Netzwerkverbindung drosseln Features
11. 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
12. BROWSERSYNC Access URLs
13. BROWSERSYNC User Interface
14. BROWSERSYNC https://www.browsersync.io/docs/gulp/ https://www.browsersync.io/docs/grunt/ Gulp & Grunt
15. EMULATOREN iOS Simulator (kommt mit Xcode) Android SDK Tools Windows Phone Emulator Opera Mini und weitere...
16. EMULATOREN Safari iOS Simulator
17. EMULATOREN FFDE (WebIDE) iOS Simulator
18. EMULATOREN Chrome Android Emulator chrome://inspect/#devices
19. 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/
20. EMULATOREN Vorlon alle http://www.vorlonjs.com/ OS unabhängig, lässt sich mit Android, Windows, iOS, etc. verbinden
21. GERÄTE Chrome Remote Debugging & Screencasting Browser in Chrome screencasten und inspecten
22. 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.
23. GERÄTE Safari iPad/iPhone: Settings > Safari > Privacy & Security > Fraudulent Website Warning [OFF] iPad/iPhone: Settings > Safari > Advanced > Web Inspector [ON]
24. GERÄTE FFDE (WebIDE)
25. 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.
26. GERÄTE openstf.io - Installation brew install rethinkdb graphicsmagick zeromq protobuf yasm pkg-config npm install -g stf brew install android-platform-tools
27. GERÄTE openstf.io - Setup rethinkdb stf local Aufrufen über http://localhost:7100
28. 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/
29. BETRIEBSSYSTEME UND MEHR Ghostlab http://www.vanamco.com/ghostlab/ Ähnlich wie browsersync
30. BETRIEBSSYSTEME UND MEHR weinre - WEb INspector REmote Bspw. für Windows Phone http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
31. BETRIEBSSYSTEME UND MEHR Browserstack Live, Web-Based Browser Testing https://www.browserstack.com/ ab $29,00 im Monat
32. BETRIEBSSYSTEME UND MEHR Saucelabs Automatisiertes Testing https://saucelabs.com/ ab $19,00 im Monat
33. 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/>
34. Happy Testing