Developing locally for mobile devices
James Basoo / February 4, 2014

There’s no actual development in this development article (sorry!). Instead I’ll simply give you a run-down of my dev environment, and the tools I use to make developing for mobile easier.

The first hurdle when developing for mobile is viewing your work on a device. Sure you could use an local emulator or maybe BrowserStack but there’s nothing quite like the real thing. It’s usually faster and gives you a better idea of real device behaviour; a mouse often can’t replace real touch events, especially multi finger ones.

So, first thing’s first, get Charles. Once it’s installed follow these configuration steps. I’ll assume you’ve set up a local development url e.g. awesomesite.dev , not localhost:8100 . If not, I’d recommend it.

Configuring Charles

  • Go to Tools/Rewrite
  • Add a rewrite set.
  • Add a location. Leave everything blank apart from the query, here you put your local url e.g. awesomesite.dev and click ok.
  • Add a rule.
    • Type = Host
    • Match Value = awesomesite.dev
    • Replace Value = awesomesite.dev

Charles

Configuring your device

  • Open the WiFi settings of the network you’re connected to
    • If you’re on Android check “Show advanced options”
  • Select manual http proxy
    • Server/Hostname = your machine’s IP address (192.168.???.???)
    • Port = 8888

WiFiSettings

Go to awesomesite.dev and you should receive an Allow/Deny prompt in Charles. Allow it and you should now be connected to the internet via your machine and be able to view your local sites with dev urls. Being heavy Magento developers here at GPMD, we like being able to view our local sites with the same dev url as on desktop without changing any site settings.

N.B. Charles must stay on for your device to maintain connectivity.

Neat trick on Macs (connected to the network via Ethernet)

You can create an ad-hoc network on your Mac using Sharing in System Preferences. If you do this you won’t need to edit your network settings on your device when switching between working on local sites or just browsing, you can just switch networks. This could be really helpful in a team environment e.g. testing a site on your all your colleagues’ devices. They’ll just need to switch to your network instead of adding your IP as their proxy host.

All these hardware and software requirements make for a kind of spherical cow in a vacuum situation but if you happen to have this setup then it could make your development life a touch easier.

OSX Sharing

Debugging & inspecting Chrome on Android

Recent developments in Chrome allow you to easily inspect Chrome on your Android device. Before any of that you need to enable USB debugging on your device and at the time of writing you’ll need Chrome Beta on your device and Chrome Canary on desktop. We’re living on the edge here people!

  • Plug your device in and open Chrome Beta
  • Open Chrome Canary and under the hamburger/hotdog menu go to Tools>Inspect Devices and make sure “Discover USB devices is checked”
  • Either open a url e.g. awesomesite.dev through desktop or device and then click inspect

Now you’ll have Dev Tools open like you’re used to, but you’re inspecting the page on your device. Try it out, modify the dom, edit css properties, use the console etc. Do whatever you need to but before you do, click the rectangle next to the Elements tab. Voila, you’re screencasting! You can even click the magnifying glass icon and inspect an element. For a more in depth look on the new mobile dev tools see Paul Irish’s article and demos .

Chrome DevTools

Debugging & inspecting Safari on iOS

As it always has been, inspecting iOS Safari is dead easy (but only if you’re on a Mac, there’s no PC support). You just need to turn on Web Inspector in Safari’s advanced settings. You will of course need developer tools enabled on desktop Safari too.

  • Plug your device in open Safari and go to awesomesite.dev
  • Open desktop Safari and go to Develop>YourDeviceName>awesomesite.dev
  • Done, inspect away!

Safari DevTools

In conclusion

I happen to have all these tools at my fingertips and for me they make developing for mobile almost as easy as developing for desktop. I’m sure there’s alternatives around to some of these, and things that I’ve missed so if you have any more info, please leave a comment. Thanks for reading, I hope you found it useful!

References:

http://techportal.inviqa.com/2013/03/05/manipulating-http-with-charles-proxy/

http://stackoverflow.com/questions/6917107/how-can-i-redirect-http-requests-made-from-an-ipad

http://www.html5rocks.com/en/tutorials/developertools/mobile/

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

http://robandlauren.com/2013/09/14/test-on-devices/