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
130
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
250
Designed for Inclusion: Writing CSS with Accessibility in Mind
matuzo
6
1.4k
Accessible UX @ pitercss
matuzo
0
210
Keyboard controls for an international user base
matuzo
0
130
Level-Up your Career – Become a Focus Manager
matuzo
0
130
Accessible UX
matuzo
0
220
Other Decks in Programming
See All in Programming
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
今インフラ技術をイチから学び直すなら
yuhta28
1
140
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
How to Break into Reading Open Source
kaspth
2
210
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
790
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
160
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
Featured
See All Featured
Writing Fast Ruby
sferik
623
60k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
1
53
It's Worth the Effort
3n
182
27k
Raft: Consensus for Rubyists
vanstee
135
6.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
How to Think Like a Performance Engineer
csswizardry
16
960
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