Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Mobile Web Testing & Debugging Best Practices

18.038 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie

Mobile Web Testing & Debugging Best Practices

  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