Mobile Development Tools

Being able to develop on Mobile browsers is no longer an option, it's a necessity and lately, becoming a requirement for front-end developers. Developing your apps on desktop browsers alone, and hoping for the best is no longer going to work. Because you'll end up like this when you hook it up to your phone and you see bunch of garbage.

So to avoid that, I will introduce some tools that will make your life a lot easier as a front-end web/mobile developer. (Edit: list will be updated as I go along discovering new tools ;) )

Mobile Simulation

These are tools that allow you to have the desktop browser imitate the behaviour of their mobile counterparts.

• Chrome DevTools
  • http://www.html5rocks.com/en/tutorials/developertools/mobile/
  • https://developers.google.com/chrome-developer-tools/docs/mobile-emulation
• IE11 Developer Tools http://msdn.microsoft.com/en-us/library/ie/dn255001(v=vs.85).aspx

Mobile Emulator

These are the apps/tools that will create an instance of the mobile device with the browser for testing.

• Safari - Fire up your XCode and select iOS Simulator from XCode menu.
• Opera - http://www.opera.com/developer/mobile-emulator
• IE - http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402563(v=vs.105).aspx

Remote Debugging

Whether you have your page served up in the mobile emulator or the actual device itself. If you want to take a peek into what's going on in the browser, use remote debugging.

• Chrome - https://developers.google.com/chrome-developer-tools/docs/remote-debugging
• Firefox - https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging
• Opera - http://www.opera.com/dragonfly/documentation/remote/
• IE - http://msdn.microsoft.com/en-us/library/windows/hardware/br230785.aspx
• WinRE - Uniform remote debugging for all Webkit-based browsers http://people.apache.org/~pmuellr/weinre/docs/latest/

Synchronisation

When you have more than a handful of device to test, you wouldn't want to scroll a page a dozen time to see the effects on all devices. Rather you would want the actions to synchronise, whether it's filling out a form or clicking on a link.

• Browser-Sync - Easy to install, and free to use too! https://github.com/shakyShane/browser-sync
• GhostLab - Premium app for mobile sync testing with its own inspector. http://vanamco.com/ghostlab/