Zayko in the Net

Personal blog of Vitaly Zayko


How to debug mobile web sites using IE9?

If you are a web developer who works on a mobile web site, you need to test look and feel of your job at least in major mobile OS. It’s easy if you optimize your site just for iOS or Android and you have these devices physically or their emulators. But in case you can’t, you can use desktop browsers to make this job done by using different user-agent strings. Safari already has something that helps; Chrome (as I heard) has command line switchers; Firefox – a plugin. But what about IE?

IE9 also includes dev tool as well: just press F12 key to bring it on. This is the place where we will put custom user-agent strings. So…

  1. Open up IE development tools by pressing F12 in IE9 main window. step-1
  2. Click menu Tools -> Change user agent string -> Custom…
  3. Put a Friendly Name that will help you to recognize this string. step-2
  4. Finally put user-agent string to “User Agent String” field and you are done!

Now every time when you will need to test your site with different browsers mode, simply go to IE dev mode (F12), click Tools -> Change user agent string and select a user-agent from the very bottom menu part. Of course, this way just emulate another browser but script and rendering engines will stay the same but this realy helps especially when you need to debug your site when logic is depended from browser that connects to.

When you played enough with custom string, just close IE – user-agent string will return to default, no manual changes required.

Just one thing we left: where to get browser agent strings? I found many sites in the Internet which spread this data and this one is a good example.