• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Web Testing & Debugging Best Practices
 

Mobile Web Testing & Debugging Best Practices

on

  • 9,430 views

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.

Statistics

Views

Total Views
9,430
Views on SlideShare
8,705
Embed Views
725

Actions

Likes
13
Downloads
83
Comments
4

13 Embeds 725

http://lanyrd.com 359
http://www.denkwerk.com 235
http://eventifier.co 88
http://www.techgig.com 9
http://accessibility_checker.siteimprove.com 8
http://karlacardona.blogspot.com 6
http://favtile.com 5
http://pinterest.com 5
http://coderwall.com 4
http://localhost 3
http://kred.com 1
https://twitter.com 1
http://denkwerk.com.oheeger.dev.nil 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Another update, gave that session seven times now and it always evolved due to your great feedback. Thanks for that! The new version is still text based for this archive, but now contains the images I solely use for the live version.
    Are you sure you want to
    Your message goes here
    Processing…
  • Folks, due to your excellent feedback over the several times I presented this session I just updated the deck to the current state. Thank you all for sharing your knowledge.
    Are you sure you want to
    Your message goes here
    Processing…
  • geile Präsentation und beeindruckendes Tool!
    Are you sure you want to
    Your message goes here
    Processing…
  • one of the best sessions at mcdd12.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile Web Testing & Debugging Best Practices Mobile Web Testing & Debugging Best Practices Presentation Transcript

    • Mobile Web Testing &Debugging Best Practices Andre Jay Meissner BDM/DevRel Web & Mobile @klick_ass // klick-ass.com ajm@adobe.com
    • 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.
    • Do not hire a Webdeveloper... ...that doesn‘t do this
    • 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?
    • Tools FTW
    • 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
    • 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 flipsides)+ 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 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.
    • 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 solutions Let‘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 therange of OSs and devices you test against.
    • 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
    • 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
    • Can‘t or don‘t want to acquire own devices? No way? 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 portfeatures remote debugging from day one!
    • 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)
    • More Tips & Tricks: • Using Edge Inspect withWordPress on localhost (Joel Eade) h"p://klk.as/QJr8ja
    • 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
    • Got questions?ajm@adobe.com // @klick_ass // klick-ass.com