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
540
Accessibility für DeveloperInnen: Hello World!
matuzo
0
330
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
150
Level-Up your Career – Become a Focus Manager
matuzo
0
160
Accessible UX
matuzo
0
240
Other Decks in Programming
See All in Programming
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
Go製CLIツールをnpmで配布するには
syumai
1
930
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
720
Reactの歴史を振り返る
tutinoko
1
150
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
10k
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
300
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
300
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
760
iOS開発スターターキットの作り方
akidon0000
0
230
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.8k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
How to Ace a Technical Interview
jacobian
278
23k
We Have a Design System, Now What?
morganepeng
53
7.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Navigating Team Friction
lara
188
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Six Lessons from altMBA
skipperchong
28
3.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Designing for Performance
lara
610
69k
Unsuck your backbone
ammeep
671
58k
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