Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cross Device Testing
Search
Manuel Matuzovic
March 17, 2016
Programming
0
120
Cross Device Testing
Dev Tools, browsersync, openstf, Emulatoren
Manuel Matuzovic
March 17, 2016
Tweet
Share
More Decks by Manuel Matuzovic
See All by Manuel Matuzovic
Designed for Inclusion: Writing CSS with Accessibility in Mind
matuzo
3
520
Accessibility für DeveloperInnen: Hello World!
matuzo
0
220
Designed for Inclusion: Writing CSS with Accessibility in Mind
matuzo
6
1.4k
Accessible UX @ pitercss
matuzo
0
200
Keyboard controls for an international user base
matuzo
0
120
Level-Up your Career – Become a Focus Manager
matuzo
0
130
Accessible UX
matuzo
0
210
Other Decks in Programming
See All in Programming
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
CSC307 Lecture 09
javiergs
PRO
1
500
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
継続的な活動で築く地方エンジニアの道
myamashii
2
350
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
CSC307 Lecture 06
javiergs
PRO
0
360
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
AHC035解説
terryu16
0
710
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Code Review Best Practice
trishagee
58
16k
Debugging Ruby Performance
tmm1
71
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Statistics for Hackers
jakevdp
792
220k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Designing for humans not robots
tammielis
247
25k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Thoughts on Productivity
jonyablonski
64
4.1k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Transcript
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 Pixel
Ratio anpassen Touch / 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 Refresh Synchronisierung Form Synchronisierung
Netzwerkverbindung drosseln Features
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
BROWSERSYNC Access URLs
BROWSERSYNC User Interface
BROWSERSYNC https://www.browsersync.io/docs/gulp/ https://www.browsersync.io/docs/grunt/ Gulp & Grunt
EMULATOREN iOS Simulator (kommt mit Xcode) Android SDK Tools Windows
Phone Emulator Opera Mini und weitere...
EMULATOREN Safari iOS Simulator
EMULATOREN FFDE (WebIDE) iOS Simulator
EMULATOREN Chrome Android Emulator chrome://inspect/#devices
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/
EMULATOREN Vorlon alle http://www.vorlonjs.com/ OS unabhängig, lässt sich mit Android,
Windows, iOS, etc. verbinden
GERÄTE Chrome Remote Debugging & Screencasting Browser in Chrome screencasten
und inspecten
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.
GERÄTE Safari iPad/iPhone: Settings > Safari > Privacy & Security
> Fraudulent Website Warning [OFF] iPad/iPhone: Settings > Safari > Advanced > Web Inspector [ON]
GERÄTE FFDE (WebIDE)
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.
GERÄTE openstf.io - Installation brew install rethinkdb graphicsmagick zeromq protobuf
yasm pkg-config npm install -g stf brew install android-platform-tools
GERÄTE 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