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
140
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
540
Accessibility für DeveloperInnen: Hello World!
matuzo
0
310
Designed for Inclusion: Writing CSS with Accessibility in Mind
matuzo
6
1.5k
Accessible UX @ pitercss
matuzo
0
220
Keyboard controls for an international user base
matuzo
0
140
Level-Up your Career – Become a Focus Manager
matuzo
0
140
Accessible UX
matuzo
0
230
Other Decks in Programming
See All in Programming
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
thousanda
1
120
エンジニア向けCursor勉強会 @ SmartHR
yukisnow1823
3
12k
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
algoartis
0
210
SwiftDataのカスタムデータストアを試してみた
1mash0
0
150
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
4
1.3k
実践Webフロントパフォーマンスチューニング
cp20
45
10k
Laravel × Clean Architecture
bumptakayuki
PRO
0
150
エンジニアが挑む、限界までの越境
nealle
1
330
On-the-fly Suggestions of Rewriting Method Deprecations
ohbarye
3
5.3k
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
170
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
1.9k
データと事例で振り返るDevin導入の"リアル" / The Realities of Devin Reflected in Data and Case Studies
rkaga
1
980
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.6k
Faster Mobile Websites
deanohume
307
31k
Side Projects
sachag
453
42k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building Applications with DynamoDB
mza
94
6.4k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Become a Pro
speakerdeck
PRO
28
5.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
4 Signs Your Business is Dying
shpigford
183
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Writing Fast Ruby
sferik
628
61k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
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