Estelle Weyl | @estellevw | Github | Press to advance, 2 for comments, 4 to read/write notes.

Debugging Mobile
Web Applications

http://estelle.github.com/debugging/

Path to Awesomeness

  1. Set up
  2. Development
  3. Testing

... and if time permits

  1. Clown Car Technique

Note: Click on the #4 to show some notes stored with local storage

Set Up

Tools

  1. IDE
  2. Source Control (git)
  3. Server (staging, production)
  4. Testing tools
    • Operating Systems
    • Browsers
    • Devices

Emulators & Simulators

  • They are convenient
  • Good for ease of development
  • They are NOT devices!
    1. more memory
    2. better performance
    3. no touch
    4. different hardware
  • SDKs

Android Developer Tools

  • Android Debug Bridge (ADB)
    In tools, open "Android"
  • Android Device Monitor (Monitor)
    In tools, open "Moniter"
    • Under Window > Anroid SDK Manager
    • and Android Virtual Device Manager
    • Console.log() viewable in console

Android local host

10.0.2.2

10.0.2.2:9999 (see Android)

Remote Debugging in Android

itunes.apple.com/us/app/xcode/

iOS simulator
  • iOS simulator
  • XCode > Open Developer Tools > iOS Simulator
  • Hardware > Device: to pick iPhone/iPad

Debugging FF HTML Applications

  1. Install Firefox-OS-Simulator Add on
  2. Tools > Web Developer > Firefox-OS-Simulator
  3. Add Directory > link to .webapp file
    This will open simulator
  4. Connect (on left)
  5. Connect (on popup)
  6. XUL Link (on pop up)

Blackberry Remote Inspector

Enable Web Inspector in BB Browser options

  • Open the BlackBerry Browser.
  • Swipe down to display menu bar
  • Settings icon > Developer Tools
  • Web Inspector setting to On

Enter IP and port number provided into your desktop browser

Development

Desktop v. Mobile

  1. Desktop tools are quite mature
    (Firebug 1 came out in 2007)
  2. There is only one web!

Google Chrome Workspaces

Enabling Workspaces

  • Currently in Chrome Canary
  • View > Developer > Developer Tools (or alt-cmd-i)
  • DevTools > Settings > Workspaces
  • Add local folders
  • Under "sources" tab, see sources, map to local files, etc.

Enabling Sass & Workspaces

  1. Enable Developer Tools experiments (chrome://flags)
  2. Sass stylesheet debugging in Experiments (devTools settings)
  3. Add sourcemap flag: Command Line
    $ sudo gem install sass --pre
    
    $ sudo gem install compass
    
    $ sass --watch --compass --sourcemap sass/:css/

Testing

How long to load your page?

WebWait.com

Weinre

  1. Download & Install Node.js (includes NPM)
  2. Install Weinre
    npm -g install weinre
  3. Start Weinre
    weinre
  4. Add Weinre to web page
    <script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
  5. Open the inspector
    http://localhost:8080/client/

Adobe Shadow/Edge Inspect

  • Download Adobe Shadow/Edge Insepect desktop app Windows 7? install bonjour.
  • Install Adobe Inspect Chrome Extension
  • Install mobile Edge Inspect app on each device (free in the app stores)
  • Run app on desktop, minimize window
  • Open Chrome Edge Inspect browser extension
  • Run the application in your devices
  • Enter phone "pairing" number into Chrome extension pop up
Adobe Shadow browser extension

Basically, Weinre on crack, and free version is like automated Weinre.

Testing

  • Charles Proxy
    HTTP proxy / HTTP monitor / Reverse Proxy
    www.charlesproxy.com
  • Fiddler
    Proxy Debugger
    www.fiddler2.com

Testing

Chrome Timeline

Average Download Speed

If you have Google Analytics

Page Speed

  • Content > Site Speed > Overview
  • Advanced Segments > Mobile Traffic + Tablet Traffic

User Agent Switching

Browser Sizes

If you have google analytics

Google Analytics - BreakPoints

  • Audience > Mobile > Devices
  • Primary Dimensions > Other > Screen Resolution

Chrome Performance

chrome://performance

Clown Car Technique

Go

Test on Real Devices!!!

Thanks

Estelle Weyl
www.standardista.com
@estellevw
@standardista
estelle.github.io/debugging/

HTML5 and CSS3 for the Real WorldHTML5: The Definitive GuideMObile HTML5Web Performance Daybook