Skip to content

Mobile Testing & Debugging Environments

Suggested Web Browser Testing Environment
Browser Detection

Testing web applications that are targeted to mobile/touch devices presents special challenges, as the browser environment on these devices is typically very different from a desktop browser.

It is not sufficient to simply resize your desktop browser to the approximate size of your mobile/touch device. When testing a mobile/touch web application, you will want to ensure that you are testing the following:

  • The web application sizes correctly on your device browser.
  • The web application reacts and sizes properly when switching between landscape and portrait.
  • The web application responds properly to touch actions and can be operated without a physical keyboard or mouse.
  • The web application scrolls properly.
  • The web application works on the device-specific browser.
  • Etc.

None of these tests can be satisfied by simply resizing your desktop browser.

Chrome Emulation

The simplest way to test your web application on a wide range of mobile devices is to use the Chrome Browser’s built-in device emulator:

  1. Load your web application in the Chrome browser.
  2. Activate the Developer Tools panel. This can usually be found in the Chrome hamburger menu or by pressing the F12 hotkey.

  1. If the Device Mode is not already active, click the “Toggle Device Mode” toolbar button in the Developer Tools panel. The main browser panel will now display your web page in a grid showing the size of the emulated device and various other controls.
  2. Select the desired target device from the “Device” combo list, e.g., Apple iPhone 6. Usually, after selecting a target device, you will need to refresh your web page to ensure that it is rendering itself according to the selected device.

Touch gestures and smooth scrolling can be emulated with the mouse; you can switch between portrait and landscape modes.

At the time of writing, Chrome does a pretty good job of emulating a large range of devices and is constantly improving, but it does not perfectly replicate all the peculiarities of every device. As good as it is, it is not sufficient to pass production testing for your most important target devices.

Native Device Testing Across Local Network

The best way to production test your web application is to run it on the actual devices you are targeting. The most convenient way to do this is to set up your development environment so that your web application can be accessed from a remote device over your local network. The following section explains the various steps involved in setting this up.

  1. Connect your Mobile/Touch Device to your local wireless network.
    This should be the same network that your web application server machine is connected to. This is a typical thing to do with your mobile device on any private home network and should be easy to perform. On a more sophisticated office network, you may need the assistance of your network supervisor.

  2. Open port 80 on your Server’s Firewall.
    Make sure to open the Windows Firewall inbound port 80 (http) and 443 (https) connections (TCP and UDP). Windows Firewall will block these by default.

  3. Query your IP Address.
    Open a Command Prompt and type in the command: ipconfig. This will display various values, but the one you are interested in is the IPv4 Address, e.g.,

IPv4 Address........: 192.168.1.6

This is the address that you can use to route to your IIS managed virtual directories (i.e., your web application virtual directories).

Enter this address into your mobile device’s browser followed by the path to your web application.

Example: If you have the above IP Address and the local host address to your web application is:

http://localhost/WebOrderMobile_18_1

Then you would enter the following URL in your mobile device’s browser address:

http://192.168.1.6/WebOrderMobile_18_1

Notes:
LAN IPs are usually reassigned after rebooting the LAN-connected computers or the router. This means that each time you reboot your server, you will need to query its new IP address and modify the address you type into your mobile device.

Previous Topic: Suggested Web Browser Testing Environment
Next Topic: Browser Detection

See Also

Developing Web Applications