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

IE F12

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.

Chrome F12

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 STOJANOVIC

Dejan 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

CONNECT WITH DEJAN  Loginlinkedin Logintwitter Logingoogleplus Logingoogleplus

.NET

read more

SQL/T-SQL

read more

Umbraco CMS

read more

PowerShell

read more

Comments for this article