Thursday, October 27, 2011

Use your browser to test your mobile website

Mobile Traffic has become a quintessential part of traffic for most of the projects i have worked on and the traffic has blown out of proportion in the last couple of years. A few years back this traffic could have been ignored as they represented only a small percentage of the traffic and they were mere visitors and never enjoyed transcating using their devices. In the recent past we have witnessed a breakthrough performance of this traffic, they are not just checking you out on their Smart Phones...they are also interacting, sharing & transacting.

If you still do not have a mobile site this is not for you... if you dont have one but need to test something for your client. You will love this Add-On on your  Mozilla browser. The add-on is called Modify Header and you can use it to emulate any type of phone browsing experience on the mobile website you are testing.

This addon helps you modify the user-agent (something which is used to recognize your device) which makes the servers feel that you are  mobile device :). User-agents are universal way to understand your browser & device and you can understand this in more detail here.


All you have to do is get this addon installed on Mozilla and change the UA-Prof to the Phone you would like to emulate. To emulate a specific device you will have to know the user-agent profile (UAProf) for that device. Or you can just type "UA Prof <<Device Name>>" on Google to get this value, alternatively you can use the UA-Prof list here. Once you have the UA-Prof value you will have to browse to Tools>Default User agent & Tools> Modify Headers  should appear.



Click on Select> choose 'Modify'> enter 'user-agent' > 'UA- Prof value' and then select 'Add'.

I used the following UA-Prof value to emulate an iPhone
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

Once you Add the User-Agent, select 'Enable' and bingo you should be ready to browse through an iPhone or a mobile device of your choice.

go to http://www.google.com/ and it should automatically redirect you to the mobile version of Google.

In some versions of Mozilla you will have to go to the 'Configuration' tab in the add-on options and select 'Always On' then close the browser and restart it. It should work fine.

I have tried this on Mozilla 4 and I could emulate an iPhone in 2 mins.


For a browser independent application you can use the Fiddler Debugger.

Do let me know if you have better ideas would be glad to test them and post them here.

No comments:

Post a Comment