Developing locally for mobile devices
James Basoo / February 4, 2014
Theres no actual development in this development article (sorry!). Instead Ill 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 theres nothing quite like the real thing. Its usually faster and gives you a better idea of real device behaviour; a mouse often cant replace real touch events, especially multi finger ones.
So, first things first, get Charles. Once its installed follow these configuration steps. Ill assume youve set up a local development url e.g. awesomesite.dev , not localhost:8100 . If not, Id recommend it.
- 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
Configuring your device
- Open the WiFi settings of the network youre connected to
- If youre on Android check Show advanced options
- Select manual http proxy
- Server/Hostname = your machines IP address (192.168.???.???)
- Port = 8888
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 wont 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. Theyll 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.
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 youll need Chrome Beta on your device and Chrome Canary on desktop. Were 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 youll have Dev Tools open like youre used to, but youre 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, youre 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 Irishs article and demos .
Debugging & inspecting Safari on iOS
As it always has been, inspecting iOS Safari is dead easy (but only if youre on a Mac, theres no PC support). You just need to turn on Web Inspector in Safaris 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!
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. Im sure theres alternatives around to some of these, and things that Ive missed so if you have any more info, please leave a comment. Thanks for reading, I hope you found it useful!