Mobile Web Testing & Debugging Best Practices

Mobile Web Testing & Debugging Best Practices

Andre Jay MeissnerBDM/DevRel Web & Mobile@klick_ass // klick-ass.com

ajm@adobe.com

I gave this session multiple times. Due to the nature of the topic and the awesome crowd on the !ne events listed below, more

facts and details were added over time.

"anks to all contributors for sharing your knowledge!

Berlin Desknots Meetup, October 17, 2012JavaScript Conference Dusseldorf, October 16, 2012

Frontend Conference Zurich, September 6, 2012BrainCamp Cologne, September 1, 2012

Campus Party Europe, Berlin, August 23, 2012MobileCamp Hamburg, August 3/4/5, 2012

MobileCamp Dresden, June 16/17, 2012

!is is a text version of the deck. !e one presented at conferences, less useful as an online archive, contains mostly images.

Do not hire a Webdeveloper...

...that doesn‘t do this

Step 1: Code2: Preview in Browser3: Enter URL on mobile Device4-11: Repeat #3 (for 8 Devices)Step 12: Change Code13: Preview in Browser14-21: Refresh 8 Devices22: Run into debugging needStep 23: ...Yikes! Step 23! WTF?

Coding for the „Mobile Web“Current Reality in 2 Debugging Cycles:

Tools FTW

Tools FTW1. Safari Mobile Debugger2. Webkit Remote Debugger

3. iWebInspector4. Opera Dragon!y

5. Chrome for Android Web Inspector6. Firefox for Android Remote Debugging

7. Socketbug 8. weinre

9. jsconsole.com, jsbin.com10. Adobe Edge Inspect

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.

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.

3. iWebInspector (Maximiliano Firtman)

– uses Webkit Remote Debugger…(so see previous slide for the !ipsides)

+ runs PhoneGap & chrome-less webapps & native apps that use UIWebView

+ Huge Plus: remote JS source debugging works!

== Limited use for real world needs.

4. Opera Dragon#y (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.

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.

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.

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.

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.

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.

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 solutionsLet‘s check it out!

Get real devices.

Your users do not consume your content in simulators nor ideal environments!

Don‘t just get any devices.

It‘s your project.

Check your statistics and determine the range of OSs and devices you test against.

Yikes! A shopping list:

iOS4 - iPad1, iPhone3G(S), iPod touchiOS5, iOS6 - iPad3, iPad2, iPhone4(S)

Android 2.1 - HTC DesireAndroid 2.2 - Samsung Galaxy S

Android 2.3 Fork - Amazon Kindle FireAndroid 3.1 - Sony Tablet S

Android 3.2 - Samsung GT-P7100Android 4.1 - Galaxy NexusBlackberry OS 5 - Bold 9700Blackberry OS 6 - Bold 9700

Windows Phone 7.5 - Nokia Lumia 900Symbian S60 - Nokia N95

Don‘t Rob Grandma!

appliness.com

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 de#ne your test #eld- includes a detailled list of all the tools discussed today- By the way: appliness rocks!

No way?Can‘t or don‘t want to acquire own devices?

Leverage Open Device Labs!Global List: klk.as/OpDevLabs

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!

Not to forget:webOS - Palm pre/Palm pixiOpen webOS - Galaxy Nexus

Firefox OS - Galaxy S3, Raspberry PiFirefox Mobile

Chrome for Android 4 ICSChrome for iOSOpera Mobile

Opera MiniDolphin HD

Dolphin MiniNokia Xpress for Lumia (Beta)

More Tips & Tricks:

• Using Edge Inspect with WordPress on localhost (Joel Eade)

h"p://klk.as/QJr8ja

Even Moaaarrr Tips & Tricks:

• Virtual Hosts Work!ow 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

ajm@adobe.com // @klick_ass // klick-ass.com

Got questions?