Testing mobile website client side functionality on desktop
Development and testing of mobile websites on desktop
Recently I have posted an article about new HTML5 features for mobile devices where some of the new JavaScript APIs are described.
If you decide to apply any of these new cool features on your mobile website you would first want to test them before you publish them on the real website. You can always expose the website to you mobile device and navigate, but it really takes additional time and after 10th time you would really get annoyed by doing this.
That's why there are emulators for pretty much every modern mobile phone which you can use. Some of these emulators are really hard to install and start. First you might lose some time to find them and download and then the real horror begins. Even when you manage to install, story does not end. Usually they are pretty large and when they start, they consume really large amount of system memory which makes your working environment (the whole machine) pretty slow. Fortunately browser vendors thought about this so some of them provided mobile browser emulation to make you mobile website development much easier.
So far used Internet Explorer 11 and Chrome for this purposes. I could not find similar option in other mainstream browsers and I'm not sure that they have event implemented this functionalities out of the box.
Microsoft Internet Explorer 11
When you start the browser navigate to a page you are working on and then
- Start developers tools dialog by hitting F12 or by clicking on options icon (gear icon) in top-right corner of browser window and selecting "F12 Developer Tools"
- Click on the last option on opened dialog (Emulation option) on just hit Ctrl+8
- Select the browser you want to emulate and window layout will change acoording to device and browser you selected
Google Chrome
Although Internet Explorer emulation tools are pretty good, still 80% of the mobile platforms is Android. That is why I preffer to use Chrome to emulate mobile device for testing during development.
Similar to IE, when you navigate to your page hit F12 to start developer tools and select your browser to emulate the device.
Checkout an example of testing Oriantation HTML5 API using Google Chrome on desktop
Disclaimer
Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.
About the author
DEJAN STOJANOVICDejan is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform including ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects
Comments for this article