Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Testing For And With Windows Phone

Although Windows Phone usage is still low compared with other browsers1 it’s sometimes necessary to test your web work for Internet Explorer Mobile. For web developers, this could be a complication. Testing for the Windows Phone environment is not always optional, but it can be a chore — especially because the version of Internet Explorer that comes with the Windows Phone can be quirky at best. If you’re a developer without a Windows Phone device, you might have to get a little creative to ensure that your websites are being rendered properly.

Nokia Lumia 920
The Nokia Lumia 920. (Image credit: Microsoft2)

In this article I want to point out a few different tools and techniques which can help test websites for Windows Phone even if you don’t have the real device handy or if you are not developing on Windows. But first let’s quickly look into the differences between mobile and desktop Internet Explorer.

Further Reading on SmashingMag: Link

IE Mobile Explained Link

As Microsoft acknowledged in the past, the version of Internet Explorer found on mobile devices is similar but not identical6 to the desktop browser version. There are a few key features that are not available on Windows Phone:

These are all rather minor features but you still need to know about the rendering differences and take these into account.

Testing Tools Link

Accuracy is not always the most important thing about this kind of testing. During development it’s more important to test and iterate quickly than get a pixel-perfect implementation on the first try. But you do need to know how accurate your testing method is so you can plan the final test accordingly.

To help you get a sense of the accuracy of each testing method we’ll compare each test tool against the rendering of two websites on a real device (Nokia Lumia 920). For reference, let’s see how SmashingMag10 (responsive) and Quirksmode11 (not responsive) render on a real Windows Phone device:

Rendering on the Nokia Lumia 92012
Rendering on the Nokia Lumia 920. (View large version13)

Later in the article we’ll compare the original rendering with the rendering in the test tool to see how accurate the tool is. In the best case, a testing tool will produce the exact same rendering as the real device, with 100% accuracy. Let’s dive right in, shall we?

Internet Explorer Emulation Link

The fastest and easiest way to test a site for the Windows Phone environment is to use Internet Explorer and its built-in emulator service. Through the developer tools provided in the browser itself, you will be able to run a phone emulation. This includes options such as the browser profile, orientation and screen resolution. You can flip through settings in real time to look at different devices and resolutions, and you can complete testing locally on your computer before the site goes live. Furthermore, you can switch between the mobile versions of the website and the desktop version to ensure that none of your changes have affected the way the site looks on the desktop version of Internet Explorer.

Just like the device simulation in Chrome, this sounds like a great idea and an easy solution for quick testing. Most likely you’ll need to test for Internet Explorer at some point, so why not integrate Windows Phone into this testing step?

Nokia Lumia (left), IE emulation (right)14
Nokia Lumia (left), IE emulation (right). (View large version15)

Unfortunately the rendering results show us that the emulation inside Internet Explorer is not yet reliable for testing responsive websites.

Nokia Lumia (left), IE emulation (right)16
Nokia Lumia (left), IE emulation (right). (View large version17)

It seems like the emulation ignores any viewport settings and just resizes the page so it fits the screen. While this is one of the fastest methods of seeing a website in a Windows Phone environment, it’s mostly useful for quick checks of websites that are not responsive rather than more comprehensive testing.

Windows Phone Emulator Link

For designers who value accuracy more than a lightweight testing option, there is a Windows Phone Emulator3818 available for both Windows Phone 7 and Windows Phone 8. If you are not on Windows the emulators can also be used through a service such as BrowserStack19.

The standalone Windows Phone emulator is much better than the emulation embedded into Internet Explorer. The emulator runs a copy of the entire Windows Phone operating system, so you can test native applications alongside your web project. It’s the ideal solution for those who simply need to test on that one platform; using the emulator online may be a more comprehensive option for those who need to do a lot of cross-platform testing.

Nokia Lumia (left), Windows Phone emulator (right)20
Nokia Lumia (left), Windows Phone emulator (right). (View large version21)

As the results show, the Windows Phone emulator is not quite as accurate in rendering as you would hope. In particular, the SVG icons of SmashingMagazine in the top-right do not work in the emulator, but display as intended on the actual device.

Nokia Lumia (left), Windows Phone emulator22
Nokia Lumia (left), Windows Phone emulator. (right) (View large version23)

The emulator has some system limitations. For instance, the Windows Phone 8 emulator only runs on Windows 8 and higher. For those who have Mac OS X or other operating systems, it’s impossible to install and use the emulator directly without using a virtual machine. Using a web-based solution is usually the best option.

As with all emulators, although the emulator provided by Microsoft is likely the most accurate available, it still won’t be able to display the site with complete accuracy for each device. Some hardware issues remain that cannot be compensated for by an emulator. Still, the Windows emulator is probably the best emulator that you can find should you want to use a software emulator.

Real Device Link

The best method of testing for Windows Phone is undoubtedly testing with a real device. As we’ve seen, the emulator comes close but is not as accurate as we would like it to be. And, of course, there are certain things that just can’t be simulated or emulated. For instance, the user experience might be altered by the way that the user needs to manipulate their touchscreen. When using a real device, most developers will focus on Windows Phone 8 as Windows Phone 7 is already in decline24. The browser rendering may also vary depending on device, as the device resolution will differ from mobile device to mobile device.

If you don’t want to purchase a dedicated testing device I would recommend you take a look at the services offered by Perfecto Mobile25, CrossBrowserTesting.com26 or DeviceAnywhere4227, which give you online access to Windows Phone devices among many more. These real devices render just like my testing device so you’ll be one the safe side here.

If you want to purchase a testing device you can go with the high-end solution and purchase the most powerful Lumia 152028; choose something in the middle like the Lumia 92029; or stick to the low end with a Lumia 43030, the cheapest Windows Phone.

Remote Debugging Link

Now that you can find all the design bugs, how can you fix them? I find nothing more frustrating than relying on random guesswork to fix a bug. Luckily you can use weinre (WEb INspector REmote) to get a decent remote debugger going for Windows Phone. It’s similar to remote debugging on Android in Chrome31 but with fewer features.

Weinre Link

Weinre is an open source remote debugging tool for debugging websites on a Windows Phone (and any other mobile device, of course). As an open source tool, it is entirely free and more advanced developers can even modify its code. Microsoft even advises developers to use weinre32 to debug on Windows Phone.

With weinre you are able to inspect the DOM and change it on the fly, allowing for real-time changes. Though the tool does not allow for advanced features like JavaScript debugging — the entire thing runs on JavaScript, which limits it a little — it’s still an excellent solution for remote testing and debugging.

Using weinre is really easy. It runs on Node.js33. With two simple commands you can install and start the weinre server. On Windows:

npm -g install weinre
weinre --httpPort 8080 --boundHost -all-

And on Mac OS X and Linux:

sudo npm -g install weinre
weinre --httpPort 8080 --boundHost -all-

Weinre will now run at your localhost:8080. To debug your Windows Phone device you need to follow the steps below:

  • Open localhost:8080 on your development machine.
  • In the Target Script section of the website that opens you’ll find the <script> element you need to add to the website you want to test.
  • Now open the page on your Windows Phone as normal.
  • On your development machine, the developer tools are now available here: localhost:8080/client/#anonymous.

Note that weinre is a debugging tool should never be run in production as this could pose a security risk.

Web Inspector Remote34
Web Inspector Remote. (View large version35)

If you want to use weinre as a development tool, you will need to have the devices that you intend to test for either physically, in the cloud, or emulated. Still, it is an excellent method of testing in real time and should be included in the arsenal of any web developer. The weinre debugging environment can be opened in any major browser.

What about Windows Phone 10? Link

As the time of writing no web service offered testing on the beta version of Windows Phone 10, and currently there is no device available which will have it preinstalled. But if you want to test for the upcoming new operating system you can either update your device36 to Windows 10 or run the emulator inside a Windows 10 installation37 on your desktop machine using the latest Windows Phone SDK and Visual Studio 2013.

Summary Link

How does your website look on the Windows Phone platform? Approximately 3% of your mobile users will be using a Windows Phone — so you may need to make sure that your site renders properly. As we’ve seen, it’s not that easy to test for Windows Phone as all testing tools (even the emulator by Microsoft) don’t render that reliably. I suggest going with one of the online services to access the real device as this works rather well. The only downside is that weinre will not work if you don’t make your development machine reachable externally.

Resources Link

(da, ml, og)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43

↑ Back to top Tweet itShare on Facebook

Daniel is author, web developer and head of development at the cross browser testing tool BrowseEmAll. He currently lives in Augsburg, Germany and loves to chat about browsers, mobile devices and web development.

  1. 1

    Or we, the webdevelopers, do absolutely nothing unless it’s explicitely asked (and paid for) by the client to support yet another mobile device.

    It’s as painstaking enough already with having to keep in mind multiple versions of iOS safari and Android Chrome/Android Browser, the least we can do is not support Windows Phone, hope the end-users have a lousy experience and switch to one of the previous mentioned options.

    Back in the day when Explorer dominated with a 95% market share you didn’t spend many hours on making sure it worked on Mac Netscape… And this is coming from someone who has always owned a Mac (So my stuff always worked on a Mac)

    • 2

      That’s a dick-headed approach. If you don’t care about having your stuff work on WP, fine. But to be an advocate for purposefully delivering a bad experience to end users in order to get them to jump ship is narcissistic and unprofessional.

      The Windows 10 ‘edge’ browser will be the same code on desktop, phone, tablet, Xbox, etc. MS is targeting a billion devices running Windows 10 in 36 months. Ignore it at your peril.

      • 3

        Adam Nemeth

        May 20, 2015 12:03 am

        On one hand, I understand your approach.

        On the other hand, we also looked at the stats, and delibereately decided that those around 1% of people who visit our websites on Windows Phones according to our statistics aren’t making supporting the platform commercially viable.

        Also, we saw that app adoption with Windows Phone users is really-really low. So, the common ground of “people who want to use apps outside the built-in ones and facebook” and “Lumia owners” is a really-really small niché.

        We also know that the Phone HW department at Microsoft (meaning the former Nokia) might be facing a write-off next quarter. This is not just simply gossip: a lot of analysts interpreted the last financial quarter report of Microsoft this way.

        So, all in all, I wouldn’t bet on the Windows Phone platform.

        And thinking globally, I’m not sure if the long-term existence of the platform overall would be a good user experience: after all, following current Microsoft strategy, it will be full of after-thought applications, either ported from a more popular platform using a bridge, or directly written in Cordova.

        Even right now, it’s an afterthought in its current form as well, full of community-written and/or abandoned applications.

        So, do we as a community want to support a 3rd platform which might never reach 10% or do we want to make sure that we support 2 mobile platforms perfectly?

        • 4

          Choosing not to support a device with a native app or test for rendering in mobile IE is different from promoting a purposefully bad experience for a set of users on a specific platform in order to drive abandonment.

          I take issue with other points you made, but they are outside the scope of my original comment. I would only say that those who speak poorly of the WP experience typically parrot conventional wisdom from a community of fellow non-WP users. I’d challenge you to pick up a no-contract Lumia 635 and use it for a month.

        • 5

          You have a good point here. I am saying you should limit user experience but I have noticed several reasons why you might not want to develop primarily for this platform.

          1.) Microsoft obviously does not put enough time and thought into how there browsers render sites, if they did they would be on more of a equal footing with Google and Firefox in that they would make the developer tools easier to manage and operate. Plus, not even their own website works well in their own internet emulator. This makes me wonder if Microsoft even does extensive testing in their own browsers. Microsoft browsers are like Linux, they are there for convenience so you can install Chrome.

          2.) Price point and goodies. Would you rather buy the Windows Phone and only get 50 apps at a cheaper price or buy something a little bit better (Android) and get more apps then the IPhone at a discount?

          Point blank, IE, OutLook, and many of the other apps are just plain ugly. I feel less restricted with Linux then I do Microsoft with development. Let’s say you don’t upload your project solution to GitHub, you are screwed. However if you upload all your PHP files you are good to go. Why should you learn 1,000 different things (tools, apps, and more) when you can learn one language and start developing something in less time with a smaller learning curve?

          I think it has to do with were you start in development. If you started with Microsoft you will probably disagree with my statement, however if you’ve used open source tools you’re opinion may be different.

      • 6

        Well not on purpose, but I’m not testing my stuff on Windows phone and unless the market share suddenly explodes I won’t be doing so in the near future. The amount of complaints I have received of customers about their sites not working in Windows Phone: 0. Mostly because they and the majority of the consumers don’t have one. But I do hope that this browser’s market penetration stays as is, or worse because it’s in nobody but Microsoft’s interest that we have yet another browser to debug our sites for.

        Edge is a different thing altogether. I really hope it will put the nails in the coffin of IE and all of its different versions which have to be tested in VirtualBox and that its update system is as automated as that of Chrome and Firefox so that we can just create websites for the latest browsers, instead of browser that are 5 years old.

    • 7

      Dear MikeyMo,
      I am a web developer and I am using Windows Phone and I am happy with it. So you want me to change just because you don´t want to optimise for my device?

    • 8

      Ian Trembirth

      June 2, 2015 2:04 pm

      Your clients may not have complained about their sites on Windows Phone but where are their clients based? 3% may be the worldwide share but in Europe it’s almost 7% and some countries (including Italy I believe) it’s heading for 10%.

  2. 9

    Nice article. :) It’s refreshing to see articles here about Windows in general, phone or Edge or otherwise. Remote debugging can be a real pain (looking at you, Android native browser!) so it’s great that you provided links to a solution for that.

  3. 10

    Great to see our website is working as expected. =)

    I’m always cross-browser testing with Browserstack (great tool, I can only recommend, especially if you’re not able to get your hands on every mobile device out there).

  4. 11

    FYI, your link on “Microsoft even advises developers to use weinre to debug on Windows Phone.” doesn’t mention anything about Weinre. Also worth mentioning that Microsoft is building a similar device agnostic remote debugger called VorlonJS (

  5. 12

    Shakher Deval

    May 21, 2015 6:54 am

    Great Article!

    It is necessary to test all mobile platforms Window’s, MAC or Android. I am working on responsive web designing.

  6. 13

    Earlier i knew about remote debugging but from your blog i actually understand its real facts..thanks for sharing..

  7. 14

    I hate how Microsoft has restricted access to their Windows Phone emulator just for Window’s 8 without support for other operating systems.

  8. 15

    David Catuhe

    May 27, 2015 5:57 am

    For remote debug on wp (and any other device) is also a great alternative… you have interactive dom, but also a remote console and a js object inspector :)

  9. 16


    June 11, 2015 6:40 pm

    In the section ‘WEINRE’. The link saying Microsoft recommends WEINRE is just a link back to the microsoft emulator. There is no mention on that page of WEINRE.

  10. 17

    Well, your approach is quite appreciating. I bet very less people have vast knowledge about windows phone. Why don’t you share your words at

  11. 18

    there are a bug with some versions of ‘npm’
    for installing weinre :
    npm -g install weinre@latest

    thank you for this tuto !!

  12. 19

    Salvus App Solutions

    August 20, 2015 10:50 am

    Everyone suggest me windows phone are very effected product for testing the mobile app. But how as I know it’s very hard to crack the windows system.


↑ Back to top