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

Debugging Mobile
Web Applications

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


  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 (see Android)

Remote Debugging in Android

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


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/


How long to load your page?


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

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.


  • Charles Proxy
    HTTP proxy / HTTP monitor / Reverse Proxy
  • Fiddler
    Proxy Debugger


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


Clown Car Technique


Test on Real Devices!!!


Estelle Weyl

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