Jay is going to cover a number of approaches to quality-check consistency and performance of code in production across multiple mobile operating systems and browser engines. This is no one-way presentation, since Jay wants to hear about your experiences and discuss best practices in that important area with all session attendants.

1. Mobile Web Testing &
Debugging Best Practices
Andre Jay Meissner
BDM/DevRel Web & Mobile
@klick_ass // klick-ass.com
ajm@adobe.com

2. I gave this session multiple times. Due to the nature of the topic
and the awesome crowd on the fine events listed below, more
facts and details were added over time.
Thanks to all contributors for sharing your knowledge!
Berlin Desknots Meetup, October 17, 2012
JavaScript Conference Dusseldorf, October 16, 2012
Frontend Conference Zurich, September 6, 2012
BrainCamp Cologne, September 1, 2012
Campus Party Europe, Berlin, August 23, 2012
MobileCamp Hamburg, August 3/4/5, 2012
MobileCamp Dresden, June 16/17, 2012
This is a text version of the deck. The one presented at conferences,
less useful as an online archive, contains mostly images.

3. Do not hire a Webdeveloper...
...that doesn‘t do this

4. Coding for the „Mobile Web“
Current Reality in 2 Debugging Cycles:
Step 1: Code
2: Preview in Browser
3: Enter URL on mobile Device
4-11: Repeat #3 (for 8 Devices)
Step 12: Change Code
13: Preview in Browser
14-21: Refresh 8 Devices
22: Run into debugging need
Step 23: ...Yikes! Step 23! WTF?

5. Tools FTW

6. Tools FTW
1. Safari Mobile Debugger
2. Webkit Remote Debugger
3. iWebInspector
4. Opera Dragonfly
5. Chrome for Android Web Inspector
6. Firefox for Android Remote Debugging
7. Socketbug
8. weinre
9. jsconsole.com, jsbin.com
10. Adobe Edge Inspect

7. 1. Safari Mobile Debugger (Apple, iOS4/5)
+ Convenient: built in
– no CSS/DOM editing
– no breakpoints
– JS Logs are truncated
== Limited use for real world needs.

8. 2. WebKit Remote Debugger (Apple)
– Mac only, requires Xcode & iOS4 + 5 SDK
– Simulator only, no code injection on device
– not for iOS <5
– a lot to setup/maintain (for just a fraction)
+ Finally done right with iOS6, BUT iOS6 only,
USB cable needed, no iOS4/5 testing
== Limited use for real world needs.

9. 3. iWebInspector (Maximiliano Firtman)
– uses Webkit Remote Debugger…
(so see previous slide for the flipsides)
+ runs PhoneGap & chrome-less webapps
& native apps that use UIWebView
+ Huge Plus: remote JS source
debugging works!
== Limited use for real world needs.

10. 4. Opera Dragonfly (Opera)
+ job done right, since 2008
+ remote debugging on Device
+ all Opera Presto 2.1+ Browsers
(Opera Mobile 9.5+ Android, Symbian, Win Mobile,
MeeGo & Opera Mobile 11+ Tablets Android,
Windows 7 & Opera 10+ emulator)
– Opera Mini not supported (compression)
– a lot to setup/maintain (for just a fraction)
== Limited use for real world needs.

11. 5. Chrome for Android Web Inspector
(Google)
+ remote debugging on Device (using GDT)
– requires ADK/ADB, USB Cable (or hack)
– not for Android <4 ICS, no Android 2/3!
– a lot to setup/maintain (for just a fraction)
== Limited use for real world needs.

12. 6. Firefox for Android Remote Debugging
(Mozilla)
+ remote debugging on Device
+ Android 2.2+
+ Wireless
- Firefox 15+ (Desktop & Android) only
– a lot to setup/maintain (for just a fraction)
== Limited use for real world needs.

13. 7. Socketbug (Peter Schmalfeldt)
+ Simulators & Devices
+ iOS & Android & Palm webOS
+ neat JS console (e.g. autocompletion)
– still need to go device by device
== close to it.

14. 8. weinre (Patrick Mueller)
+ remote DOM on Device
+ iOS, Android & BlackBerry
+ node.js port now much less hairy to
setup than former Java based one
- needs js inside your code to connect
– still need to go device by device
== powerful partial solution.

15. 9. jsconsole.com (Remy Sharp)
+ remote DOM on Device
+ any browser/any OS
+ sits online, no local stuff to maintain
+ truly remote
– console „only“
– needs js inside your code to connect
– still need to go device by device
== powerful partial solution.

16. 10. Edge Inspect (Adobe)
+ iOS 4/5/6 & Android 2/3/4 & Kindle Fire
+ Mac OS X & Windows
+ Synced browsing!
+ no proprietary vertical solution
+ Wireless - look Mum, no USB cables!
+ useful features not found in other solutions
Let‘s check it out!

17. Get real devices.
Your users do not consume your content
in simulators nor ideal environments!

18. Don‘t just get any devices.
It‘s your project.
Check your statistics and determine the
range of OSs and devices you test against.

19. Yikes! A shopping list:
iOS4 - iPad1, iPhone3G(S), iPod touch
iOS5, iOS6 - iPad3, iPad2, iPhone4(S)
Android 2.1 - HTC Desire
Android 2.2 - Samsung Galaxy S
Android 2.3 Fork - Amazon Kindle Fire
Android 3.1 - Sony Tablet S
Android 3.2 - Samsung GT-P7100
Android 4.1 - Galaxy Nexus
Blackberry OS 5 - Bold 9700
Blackberry OS 6 - Bold 9700
Windows Phone 7.5 - Nokia Lumia 900
Symbian S60 - Nokia N95

20. Don‘t Rob Grandma!
Read my article in the appliness
Magazine (Sep 2012):
- how to acquire devices (for free)
- which accessories you should look for
- also on how to analyze your stats and
define your test field
- includes a detailled list of all the tools
discussed today
- By the way: appliness rocks!
appliness.com

21. Can‘t or don‘t want to acquire own devices?
No way?
Leverage Open Device Labs!
Global List: klk.as/OpDevLabs

22. Let‘s talk about Blackberry
• BBOS6+ sports Webkit, but ~50%
of BB users are on BBOS <6! Fun!
• Non-Touch Interface! Eeek! ;)
• BB Playbook mobile Webkit port
features remote debugging from day one!

23. Not to forget:
webOS - Palm pre/Palm pixi
Open webOS - Galaxy Nexus
Firefox OS - Galaxy S3, Raspberry Pi
Firefox Mobile
Chrome for Android 4 ICS
Chrome for iOS
Opera Mobile
Opera Mini
Dolphin HD
Dolphin Mini
Nokia Xpress for Lumia (Beta)

24. More Tips & Tricks:
• Using Edge Inspect with
WordPress on localhost (Joel Eade)
h"p://klk.as/QJr8ja

25. Even Moaaarrr Tips & Tricks:
• Virtual Hosts Workflow using xip.io
(Sam Stephenson of 37signals)
or Charles Proxy (Karl von Randow)
• Edge Inspect & LiveReload (Andrey Tarantsov)
• Edge Inspect & Typekit on localhost
blogs.adobe.com/edgeinspect

26. Got questions?
ajm@adobe.com // @klick_ass // klick-ass.com