Your SlideShare is downloading. ×
0
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Mobile Web Testing & Debugging Best Practices
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Web Testing & Debugging Best Practices

9,842

Published on

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 …

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.

Published in: Technology
4 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,842
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
112
Comments
4
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 topicand 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, 2012This 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 Inspector6. 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 therange 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 SAndroid 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 9700Windows Phone 7.5 - Nokia Lumia 900 Symbian S60 - Nokia N95
  • 20. Don‘t Rob Grandma!Read my article in the applinessMagazine (Sep 2012):- how to acquire devices (for free)- which accessories you should look for- also on how to analyze your stats anddefine your test field- includes a detailled list of all the toolsdiscussed 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 portfeatures remote debugging from day one!
  • 23. Not to forget: webOS - Palm pre/Palm pixi Open webOS - Galaxy NexusFirefox 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 withWordPress 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

×