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
150
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
550
Accessibility für DeveloperInnen: Hello World!
matuzo
0
340
Designed for Inclusion: Writing CSS with Accessibility in Mind
matuzo
6
1.5k
Accessible UX @ pitercss
matuzo
0
230
Keyboard controls for an international user base
matuzo
0
160
Level-Up your Career – Become a Focus Manager
matuzo
0
160
Accessible UX
matuzo
0
240
Other Decks in Programming
See All in Programming
AIコーディングAgentとの向き合い方
eycjur
0
270
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
850
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
320
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
Cache Me If You Can
ryunen344
2
700
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
3.9k
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.4k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
360
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
How STYLIGHT went responsive
nonsquared
100
5.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Facilitating Awesome Meetings
lara
55
6.5k
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