Space48 Logo
phone
March 26, 2015

Debugging tools for mobile

Is your ecommerce site ready for mobile?

You can’t ignore it, the stats are rising.

Forty per cent of online sales are now made over mobile devices. 25% of mobile commerce sales were completed through smartphones, and 75% through tablets over the last quarter. These are the latest stats according to IMRG. Almost everyone is using mobile devices nowadays, even your gran. But, moving your site onto a mobile platform can be daunting, the range of mobile devices is vast and there are so many ways this can go wrong.

Inspect elements and simulators

The main problem When debugging mobiles is the lack of decent inspect element and debugging tools, debugging without any of these turns into a time consuming guessing game (especially with Magento).

There are several methods to solve this, the three I recommend are Adobe Edge Inspect, which is rather simple to set up and quite effective. Using iOS simulator and Safari to debug, not 100% accurate but it hasn’t failed me yet. The other is using Firefox Developer Edition but this requires extra steps and connecting the phone to your machine via USB.

The main disadvantage with the Adobe Edge Inspect method is you can’t choose what browser to use, so if you have a bug only in Chrome and not Firefox/Safari/default browser you may be better debugging using Firefox Developer Edition. It is also lacking JavaScript debugging, profiling, and network waterfall, which isn’t ideal.

Adobe edge inspect

Adobe Edge Inspect links any connected mobile devices to your computer’s web browser (currently only Chrome is supported), it automatically watches the browser and changes page when you do so on your machine (a lazy developer is a good developer, within reason). This is handy when developing/testing for mobile/tablets/computers at the same time as you can line the devices up and see the same page on all of them without clicking/typing the same URL several times.

Prerequisites:

  • OSX / Windows7 / Windows8
  • Mobile/Tablet
  • Adobe Edge Inspect Program
  • Adobe Edge Inspect Chrome Extension
  • Adobe Edge Inspect App on the device
    – Android
    – Apple

How to set it up:

1. Download and install the Adobe Edge Inspect program from here, as far as I know this is free (I think it limits you to one device, more devices if you have a creative cloud package). You will need to sign up for an Adobe ID if you don’t already have one.

2. Install the Chrome extension from here.

3. Install the app on your device(s):
– Android
– Apple
– Kindle

Adobe_Edge_5

4. Ensure the program and the Chrome extension are running

5. Open the app on your device (that is connected to the same Wi-Fi as your computer). It should automatically pick up your computer as long as both are on the same Wi-Fi, if not just enter the IP address of the computer. It may ask you to enter a security code; this should be display in the Chrome extension.

6. To view the debugging tools open the Chrome Extension and click on the <> symbol: From there you can access inspect element, network resources, the console etc. etc.

Adobe_Edge_6

Adobe edge alternatives

1. Ghostlab (https://vanamco.com/) Р£32.55 (Ghostlab 2 now available at a discounted price of £24.02 for a limited period).

2. Remote Preview – Open source.

3. MUIR – Desktop server is free, $4.99 per platform (iOS, android, Kindle Fire, Nook), no device limit.

4. Emmet LiveStyle ‚Äì LiveStyle will be a paid product but it’s free during public beta test.

The main issue with Inspect Edge alternatives are the devices will go to sleep which can be frustrating, disabling sleep every time will also be annoying and will drain your battery if you forget to turn it off.

iOS simulator and safari

This method is quick, simple and quite accurate as far as simulators go.

Safari links to iOS simulator so you can use Safari’s dev tools to debug iPads and iPhones, the obvious downside is it only supports iOS.

Pre-requisites

  • Mac only
  • Xcode (iOS simulator comes with Xcode)
  • Safari (with developer mode enabled)

How to set it up

  1. 1. Open Xcode (https://developer.apple.com/xcode/downloads/).
  2. 2. In the top left corner click on Xcode > Open Developer Tool > iOS Simulator.
  3. 3. You can choose the device under hardware in the menu.

iOS_01

To debug this, open safari:

  • In the menu go to develop > iOS Simulator > choose the page you want to debug.

If you don’t have the develop option go to safari > preferences > advanced > show develop in menu bar. You should now see develop in the menu between Bookmarks and Window.

Firefox developer edition

This method is useful but involves more messing around and isn’t as useful for debugging multiple devices. These instructions are based on the Firefox/Chrome app on Android, for other devices/browsers please see here.

Prerequisites;

  • Windows / OSX / Linux / Linux 64bit
  • Mobile/Tablet
  • USB cable
  • Firefox/Chrome app on the mobile/tablet

How to set it up:

Official instructions – Here

Thanks for reading

I really hope that this list of debugging tools for mobile helps you out, if you have any questions or comments, maybe you’ve found a better solution(?), then just pop them in a comment below.

Cheers!

Related Articles