Tools
In a recent blog post i talked about what devices the BBC News team use for testing our responsive mobile site, in this post, i will talk about some of the tools you can use on these devices. This post will talk mostly about remote debugging, using Shadow and Chrome USB, but also front end work with Ripple and Proxylocal.
Chrome USB Debugging - https://developers.google.com/chrome/mobile/docs/debugging
Although Chrome for Android is only available on 4.0 (Ice Cream Sandwich), the options USB debugging and testing give you make it a valuable tool. The setup is very simple, the Android SDK and ADB(Android Device Bridge) need to be downloaded, PATH set, then load Chrome and you are away. You will need to run a terminal command to connect the device, but it is a near plug and play setup.
With Chrome loaded on the page you want to look at, Chrome desktop can then connect by using localhost:9222, this will then present the familiar inspector we have come to know and love.
So, just like the normal version of Chrome, you can edit your page with the phone updating instantly, allow for a real world version of you website, live on a device. This feature can help you develop around issues with other browsers, by finding solutions and experimenting on Chrome, you can quickly assert whether a change will work.
The other tabs in Chrome Inspector will allow you to test areas where you need reassurance, but more importantly, if real world interaction is correct. The stats for BBC use an image to identify Javascript interactions that we want to track. Switching between the 2 tabs on the front page, using the sections menu, wanting to read more live event comments, all of these creating a new response to track. The network tab in the inspector is where we can easily look at the images and requests being made, thereby ensuring the stats are being made available to be recorded.
Of course, this is just a snap shot of the possibilities of Chrome inspector. The excellent thing that Google have provide us here, is the chance to do the same desktop tasks on mobiles.
Ripple
The next tool that is still in beta is from RIM, called Ripple. It does what a lot of other responsive tools do, but makes device selection much easier. It also allows for other options like GPS and stats like PPI. One thing to note is that you can inspect the phone as you would a web page, so you can change things on the fly, good for front end stuff.
It is in beta right now, but has a lot of potential. If RIM implemented some updates like custom headers, adjustable browser reporting size and screen shot options, it could be a great testing platform. It also means you dont have to use the ridiculous Blackberry emulators anymore.
Proxylocal - http://proxylocal.com/
Something that we have been using extensively over the last couple of months is a tool to make a sandbox public for testing. Proxylocal is a simple install which allows you to take your latest build on your sandbox, or pull branches down from others, and test the functionality against devices and different screen sizes. We have found testing against our live site with early builds finds the issues and bugs much quicker than or standard build process. Although testing on a sandbox is not ideal, you may find inconsistencies, it will give you an insight into features and how they will look, which may reduce the back and forth between the team.
Adobe Shadow - http://labs.adobe.com/technologies/shadow/
Adobe Shadow is a tool that recently got an update, this is something that is useful for large scale testing of Android and iOS devices. You essentially sync up the devices to your browser via the shadow tool. This means when you visit a new page or website, the phones will follow you and display the same page. This is probably the best tool for people wanting to test multiple features or layouts across a large amount of devices at the same time. The tool allows you to refresh all the devices remotely, as well as take screenshots of the device, although it can be a little buggy.
The other feature is remote inspection, this will allow you to use weinre to inspect the devices browser, something that will help you test, but also change things on the fly to see if you decisions are correct. The network tab is not usable unfortunately, so backend services still have to be checked manually, but for front end devs, a very useful tool.
The image shows a device connected to shadow, with the control page and the weinre inspector open.
