A Quick Guide To Mobile Web Testing

Different Methods

  • software simulation
  • hardware simulation
  • actual hardware

Chrome Dev Tools

  • use the dev tools you love
  • has a good assortment of screen sizes
  • simulates touch events
  • doesn't always accurately simulate how other browser engines will behave

Genymotion

  • Android simulation
  • Load many different OS versions/devices
  • Pretty accurate rendering for debugging/testing

iOS Simulator

  • Mac only
  • Pretty accurate rendering
  • not so great developer tools, relies on safari
  • Pretty good, but have found simulation to sometimes perform terribly and kind of hard to work with

Android/iPhone

  • Most accurate
  • Both have remote debugging abilities with Chrome or Safari
  • Final testing

Other Tools

  • Charles Proxy
  • Reflector

Thank You

Ian Quattlebaum

mobile web developer

ian@qrift.com

iPhone (enable web inspector) 

  • open the settings
  • tap safari
  • scroll down and select advanced
  • switch web inspector to on

In Safari . . .

  • open Develop menu
  • pick your iOS Simulator or actual hardware from the list

Android ( enable chrome dev tools )

  • go to settings

  • about phone/tablet

  • find the build number

  • tap it about 10 times

  • back to settings

  • enable USB debugging ( under the developer options )

In Chrome . . .             

  • type 'about:inspect' in your chrome url field
  • check the box next to "Discover USB Devices"
  • click the inspect link next to your device when it shows up

Mobile Web Testing

By ianqueue

Made with Slides.com

Mobile Web Testing

  • 636

More from ianqueue