Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. 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. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Testing Mobile: Emulators, Simulators And Remote Debugging

In the early days of mobile, debugging was quite a challenge. Sure, you could get ahold of a device and perform a quick visual assessment, but what would you do after discovering a bug?

With a distinct lack of debugging tools, developers turned to a variety of hacks. In general, these hacks were an attempt to recreate a given issue in a desktop browser and then debug with Chrome Developer Tools or a similar desktop toolkit. For instance, a developer might shrink the size of the desktop browser’s window to test a responsive website or alter the user agent to spoof a particular mobile device.

To put it bluntly, these hacks don’t work. If you’re recreating issues on the desktop, then you can’t be certain that any of your fixes will work. This means you’ll be constantly bouncing back and forth between the mobile device and the hacks in your desktop browser.

Fast forward to today, when we have a robust suite of debugging tools that provide meaningful debugging information directly from a physical device. Best of all, you can use the same desktop debugging tools that you know and love, all on an actual mobile device.

In this article, we’ll explore a variety of emulators and simulators that you can use for quick and easy testing. Then, we’ll look at remote debugging tools, which enable you to connect a desktop computer to a mobile device and leverage a rich debugging interface.

Emulators And Simulators Link

Testing on real physical devices always pays off. But that doesn’t mean you shouldn’t also test on emulators and simulators. These virtual environments not only expand your testing coverage to more devices, but also are a quick and easy way to test small changes on the fly.

iOS Simulator Link

To test iOS devices, such as the iPhone and iPad, you have a number of options, most notably Apple’s official iOS Simulator. Included as part of Xcode, this simulator enables you to test across different software and hardware combinations, but only from a Mac.

Viewing a website in iOS Simulator1

Viewing a website in iOS Simulator (Image: Jon Raasch2) (View large version3)

First, install and open Xcode. Then, in Xcode, right-click and select “Show Package Contents.” Go to “Contents” → “Applications” → “iPhone Simulator.”

Finding iOS Simulator in Xcode4

Finding iOS Simulator in Xcode (View large version5)

Although iOS Simulator is difficult to find, using it is fortunately easy. Simply open up Safari in the simulator and test your website. You can switch between different iPhone and iPad devices, change the iOS version, rotate the viewport and more.

Note: If you’re not working on a Mac, you’ll have to find another option. You could look to iPadian6, a Windows-based iPad simulator. Beyond that, a handful of other simulators exist, including certain web-based offerings7. But, to be honest, none of these are very promising.

Android Emulator Link

Android also provides an emulator. Luckily, this one is cross-platform. Unfortunately, setting it up is a bit of a pain.

First, download the bundle8 that includes Android Development Tools (ADT) for Eclipse and the Android software development kit (SDK). Next, follow Google’s instructions9 to install the SDK packages, making sure to install the default selections as well as the “Intel x86 Emulator Accelerator (HAXM installer)”. You’ll also need to track down HAXM — search your Mac for IntelHaxm.dmg or your PC for IntelHaxm.exe, and run the file to install it.

Installing Android SDK packages. HAXM improves performance for the emulator.10

Installing the Android SDK packages: HAXM improves the performance of the emulator. (View large version11)

Next, create an Android virtual device (AVD) for whichever device you’re testing. If you go into the AVD manager, you’ll see a list of preset devices in “Device Definitions.” These cover a variety of Google products and some generic devices. To get started, select one of these presets and click “Create AVD.”

The Device Definitions tab provides preset AVDs. Use one of these or create your own.12

The “Device Definitions” tab provides preset AVDs. Use one of them or create your own. (View large version13)

Set whatever you like for the CPU, and set “No skin“ and “Use host GPU.” Now you can run the virtual device and use Android’s browser to test your website.

Viewing a website in Android Emulator.14

Viewing a website in the Android emulator (Image: Smashing Magazine15) (View large version16)

Finally, you’ll probably want to learn some keyboard commands17 to better interact with the emulator.

Note: Manymo18 is an alternative, in-browser Android emulator. You can even embed it in a web page, which is pretty darn cool.

Other Simulators and Emulators Link

Remote Testing Link

Emulators and simulators are useful, but they’re not 100% accurate. Always test on as many real devices as possible.

That doesn’t mean you need to buy a hundred phones and tablets. You can take advantage of remote testing resources, which provide a web-based interface to interact with real physical devices. You’ll be able to interact with a phone remotely and view any changes in the screencast that is sent back to your machine.

If you want to test a Samsung device, such as the Galaxy S5, you can do so for free using Samsung’s Remote Test Lab21, which enables you to test on a wide selection of Samsung devices.

Additionally, you can use the resources in Keynote Mobile Testing22. They’re not cheap, but the number of devices offered is pretty astonishing, and you can test a handful of devices for free.

Note: If you’re looking to get your hands on real devices, Open Device Lab23 can point you to a lab in your area, where you can test on a range of devices for free.

Remote Debugging Link

Remote debugging addresses a variety of the challenges presented by mobile debugging. Namely, how do you get meaningful debugging information from a small and relatively underpowered device?

Remote debugging tools provide an interface to connect to a mobile device from a desktop computer. Doing this, you can debug for a mobile device using the development tools on a more powerful, easier-to-use desktop machine.

iOS Link

With the release of iOS 6.0, Apple introduced a tool that enables you to use desktop Safari’s Web Inspector to debug iOS devices.

To get started, enable remote debugging on your iOS device by going to “Settings” → “Safari” → “Advanced” and enabling “Web Inspector.”

First enable Web Inspector in Settings > Safari > Advanced.24

First, enable Web Inspector in “Settings” → “Safari” → “Advanced.” (View large version25)

Next, physically connect your phone or tablet to your machine using a USB cable. Then, open Safari (version 6.0 or higher), and in “Preferences” → “Advanced,” select “Show Develop menu in menu bar.”

Now, in the “Develop” menu you should see your iOS device, along with any open pages in mobile Safari.

Once your iOS device is connected, you'll see it in the Develop menu.26

Once your iOS device is connected, you’ll see it in the “Develop” menu. (View large version27)

Select one of these pages, and you’ll have a wide range of developer tools at your fingertips. For example, try out the DOM Inspector, which enables you to tap DOM elements on your mobile device and see debugging information on the desktop.

The Web Inspector in desktop Safari is inspecting this iPhone.28

Web Inspector in desktop Safari is inspecting this iPhone. (View large version29)

The DOM Inspector is really just the beginning. iOS’ remote developer tools provide a ton of features, such as:

  • timelines to track network requests, layout and rendering tasks and JavaScript;
  • a debugger to set breakpoints and to profile the JavaScript;
  • a JavaScript console.

To learn more about what you can do, read through the documents in the “Safari Web Inspector Guide30.”

You don't need a physical iOS device to use remote debugging. You can also debug instances of the iOS Simulator.31

You don’t need a physical iOS device to use remote debugging. You can also debug instances of iOS Simulator. (View large version32)

Note: Much like iOS Simulator, you can only do remote debugging for iOS on Mac OS X.

Android Link

Similar to iOS, Android has a remote debugging solution. The tools in it enable you to debug an Android device from a desktop machine using Chrome’s Developer Tools. Best of all, Android’s remote debugging is cross-platform.

First, go to “Settings” → “About Phone” on your Android 4.4+ phone (or “Settings” → “About Tablet”). Next, tap the “Build Number” seven (7) times. (No, I’m not joking. You’ll see a message about being a developer at the end.) Now, go back to the main settings and into “Developer Options.” Here, enable “USB debugging,” and you’re all set.

Left: Tap the Build Number seven times to enable developer mode. Right: Enable USB Debugging.33

Left: Tap the “Build Number” seven times to enable developer mode. Right: Enable “USB debugging.”(View large version34)

Go into your desktop Chrome browser, and type about:inspect in the address bar. Enable “Discover USB devices,” and you’ll see your device in the menu.

Once you enable Discover USB devices, you'll see a list of devices that are connected remotely to Chrome, along with a list of debuggable web pages or apps for each device.35

Once you enable “Discover USB devices,” you’ll see a list of devices connected remotely to Chrome, along with a list of debuggable web pages or apps for each device. (View large version36)

You should also see any open tabs in your mobile browser. Select whichever tab you want to debug, and you’ll be able to leverage a ton of useful tools, such as:

  • a DOM Inspector,
  • a network panel for external resources,
  • a sources panel to watch JavaScript and to set breakpoints,
  • a JavaScript console.

To learn more about what’s possible, read HTML5 Rocks’ tutorial “Introduction to Chrome Developer Tools, Part One5037.”

Remote debugging Android. Here the DOM Inspector in the desktop browser is inspecting the page on the mobile device.38

Here, the DOM Inspector in the desktop browser is remotely inspecting a page on the Android device. (Image: Google39) (View large version40)

Note: You can also remotely debug with the Android emulator.

Weinre Link

You now know how to remotely debug a variety of devices. But if you want to debug iOS on Windows or on Linux or debug other devices, such as Windows Phone or BlackBerry, then try Weinre, which works on any device.

Setting up Weinre is a bit more complicated because you have to install it on both the server and the page. To get started, install Node, and then install the Weinre module with the following command:

npm install –g weinre

Next, run the debugging server using your development machine’s IP:

weinre --boundHost 10.0.0.1

Note: Make sure to insert your own IP in the command above. You can find your IP on a Mac using the command ipconfig getifaddr en0 and on Windows using ipconfig.

Next, go to the development server that is outputted by Weinre in the console (in my case, it’s localhost:8080). Here, look at the “Target Script” section, and grab the <script> tag. You’ll need to include that on whichever pages you want to debug.

The Weinre development server gives you the client-side script embedding code, along with a link to the debugging interface.41

The Weinre development server gives you the client-side script to embed, along with a link to the debugging interface. (View large version42)

Finally, click on the link at the top of this page for the user interface for debugging clients (in my case, it’s http://localhost:8080/client/#anonymous). Now, once you open the page in your device, you should see it in the list of targets.

Note: If you’re having trouble connecting a device to your localhost, consider setting up a public tunnel with ngrok43.

44

Weinre’s debugging interface provides a link to each debuggable target. (View large version4745)

At this point, you can leverage a lot of WebKit Developer Tools to debug the page. You can use handy tools such as the DOM Inspector:

Weinre is debugging iOS with the DOM Inspector46

Here, Weinre is debugging iOS with the DOM Inspector. (View large version4745)

Once you get past the initial installation, Weinre lets you debug any device on any network. However, it’s not as powerful as the native solutions for iOS and Android. For example, you can’t use the “Sources” panel to debug JavaScript or take advantage of the profiler.

Note: Ghostlab48 is another remote testing option that supports multiple platforms.

Conclusion Link

In this article, we’ve learned how to set up a robust testing suite using a combination of physical devices, emulators, simulators and remote testing tools. With these tools, you are now able to test a mobile website or app across a wide variety of devices and platforms.

We’ve also explored remote debugging tools, which provide useful information directly from a mobile device. Hopefully, you now realize the benefits of remote debugging for mobile. Without it, we’re really just taking stabs in the dark.

Further Reading Link

(da, al, ml, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2014/08/01-ios-simulator-opt.jpg
  2. 2 http://jonraasch.com/
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2014/08/01-ios-simulator-opt.jpg
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2014/08/02-ios-simulator-opt.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2014/08/02-ios-simulator-opt.jpg
  6. 6 http://download.cnet.com/iPadian/3000-2072_4-75607175.html
  7. 7 http://iphone5simulator.com/
  8. 8 http://developer.android.com/sdk/index.html
  9. 9 http://developer.android.com/sdk/installing/adding-packages.html
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2014/08/03-android-emu-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2014/08/03-android-emu-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2014/08/04-android-emu-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2014/08/04-android-emu-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2014/08/05-android-emu-opt.jpg
  15. 15 https://www.smashingmagazine.com
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2014/08/05-android-emu-opt.jpg
  17. 17 http://developer.android.com/tools/help/emulator.html
  18. 18 https://www.manymo.com/
  19. 19 http://msdn.microsoft.com/en-us/library/windows/apps/ff402563(v=vs.105).aspx
  20. 20 https://dev.opera.com/articles/installing-opera-mini-on-your-computer/
  21. 21 http://developer.samsung.com/remotetestlab/
  22. 22 http://www.keynote.com/solutions/testing/mobile-testing
  23. 23 http://opendevicelab.com/
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2014/08/06-ios-debugger-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2014/08/06-ios-debugger-opt.jpg
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2014/08/07-ios-debugger-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2014/08/07-ios-debugger-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2014/08/08-ios-debugger-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2014/08/08-ios-debugger-opt.jpg
  30. 30 https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2014/08/09-ios-debugger-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2014/08/09-ios-debugger-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2014/08/10-android-debugger-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2014/08/10-android-debugger-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2014/08/11-android-debugger-opt.jpg
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2014/08/11-android-debugger-opt.jpg
  37. 37 http://www.html5rocks.com/en/tutorials/developertools/part1/
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2014/08/12-android-debugger-opt.jpg
  39. 39 https://developer.chrome.com/devtools/docs/remote-debugging
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2014/08/12-android-debugger-opt.jpg
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2014/08/13-weinre-opt.jpg
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2014/08/13-weinre-opt.jpg
  43. 43 https://ngrok.com/
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2014/08/14-weinre-opt.jpg
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2014/08/14-weinre-opt.jpg
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2014/08/15-weinre-opt.jpg
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2014/08/14-weinre-opt.jpg
  48. 48 http://vanamco.com/ghostlab/
  49. 49 http://www.mobilexweb.com/emulators
  50. 50 http://www.html5rocks.com/en/tutorials/developertools/part1/
  51. 51 https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
  52. 52 http://moduscreate.com/enable-remote-web-inspector-in-ios-6/
  53. 53 https://developer.chrome.com/devtools/docs/remote-debugging
  54. 54 https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Weinre_As_Remote_Debugger
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Jon Raasch is a front-end web developer / UI designer with endless love for jQuery, CSS3 and performance tuning. Follow him on Twitter or read his blog.

  1. 1

    Great roundup of mobile debugging. With the Android AVDs, what is the reason for the “Use host GPU” setting? Does that help with performance?

    Also while the market share of Android 4.4 is steadily rising, it’s still fairly small in comparison to 4.0 – 4.3, are there any third party applications or methods for remote debugging on those Android platforms?

    3
    • 2

      Hi John, yeah the “Use Host GPU” setting improves performance (generally)…but make sure to keep in that in mind, and disable this setting if you’re testing the performance itself.

      As for remote debugging earlier versions of Android, you can still use the Weinre option described in this article. Weinre works across the board on any platform.

      0
  2. 4

    Joe Wojciechowski

    September 3, 2014 2:45 pm

    Ah, I miss the days of, “We need to test this, who has a laptop? Who has an Android device? Who has an iPhone?”

    4
  3. 5

    I prefer using Adobe Edge Inspect, bit easier to setup and manage than WEINRE – though I think I read that its based on the same stuff. Great suggestions, going to try a few more out.

    2
    • 6

      Another vote for Adobe Edge Inspect; It saved my bacon when attempting to fix a mobile issue without access to a Mac.

      -1
  4. 7

    Great read. I agree with a small point you made that bears repeating… We do a bunch of our first testing on emulators, but nothing compares to testing on real devices.

    I too use a service like Keynote as my last sanity check on all the devices we don’t have around the office. Super valuable. We ALWAYS catch something that we didn’t see on EMU.

    Keep up the good stuff.

    2
  5. 8

    Any thoughts on the mobile simulators in the Browseemall software ( http://www.browseemall.com/Buy/ )?

    -6
  6. 9

    Just wanted to point out that

    1. there are various command line script launchers to launch iOS simulator for you without having to find the app executable that is nested within XCode folders. You can find them searching online or on GitHub. I use one of them but forget which one.

    2. you can remote debug an iOS device on Windows and Linux without Weinre as well, using ios-webkit-debug proxy or using Telerik AppBuilder. More details can be found on my blog post:

    http://autumnator.wordpress.com/2014/06/13/debugging-mobile-and-tablet-websites-on-ios-on-windows-or-locally-on-device/

    1
  7. 10

    It might be a stupid question (and somewhat off-topic), but what does “(da, al, ml, il)” at the end of the post mean? There are similar variations at the end of all Smashing Mag posts. Just curious.

    2
  8. 12

    It is very useful for testing mobile. Now a day of mobile, debugging, Emulators, Simulators is quite a challenge.so its awesome article Jon

    0
  9. 13

    I find GenyMotion (http://www.genymotion.com/) so much easy to install and use, it is free for non-commercial use.

    9
    • 14

      Genymotion all the way! Only drawback is that you can’t simulate phone calls and sms, but thats only a temporary hurdle.

      1
  10. 15

    The Samsung’s Remote Test Lab link seems to be invalid..

    0
  11. 16

    Right click Xcode in the dock. The simulator is right there.

    -1
  12. 17

    I have just brought (arrived today) a cheapy Android tablet. I tried a few times to get various Android emulators running. The closest I got was with Gennymotion, but even with that you don’t have access to the Play store so you can’t download the browsers…. or am i missing something?

    I found Browserstack to be the worst thing for testing, you can’t test when it takes 10 seconds to see a rollover effect.

    I really like (and i cant believe i am saying this…) Microsoft’s setup where you can easily download and spin up a virtual machine for free. Though I have yet to get Windows Phone emulator to work. I think that needs a day or two :)

    And apart from the obvious browser still dragging their heals, things are way better than they used to me. Dark days indeed.

    2
  13. 18

    In-between using a browser or a dedicated emulator, there’s also Chrome’s (Canary) Device Mode & Mobile Emulation https://developer.chrome.com/devtools/docs/device-mode

    5
  14. 19

    Ghostlab FTW. Also that Samsung link is totally dead :(

    0
  15. 21

    If you want an “emulator”, then running Android in a virtual machine like VirtualBox can give you a good idea about how your project will run on real Android devices.

    http://www.android-x86.org/

    0
  16. 22

    I think I’d rather stick pins in my ass!! This makes me want to quit.

    1
  17. 23

    I use codekit for mobile development, not a debugger but pretty handy, codekit gives you a ‘bonjour’ or a ‘non-bonjour’ url you can use on any device + every change you make, refreshes all browsers on all devices…

    0
  18. 24

    Don’t forget to test & debug with Opera Mini, used by millions on huge diversity of devices ! It’s easy to emulate Opera Mini https://dev.opera.com/articles/installing-opera-mini-on-your-computer/

    0
  19. 25

    Thanks for explaining how to launch iPhone simulator without having to open xcode project. Does anyone know why iPhone Simulator.app doesn’t show up in Alfred search?

    0
  20. 26

    You can use Google Play with Genymotion, you just have to install a few things into the Genymotion virtual Android image. Genymotion does not have a license to distribute the bits needed for Google Play, but they are available online and easy to install. This StackOverflow post has links and instructions for how to do this.
    http://stackoverflow.com/questions/17831990/how-do-you-install-google-frameworks-play-accounts-etc-on-a-genymotion-virt

    Have you actually installed and tried the iPadian app that you recommended? I’m curious about that because every comment on the download link that you referenced warned people to not download it. When you see comments like “Does not install ipadian, but several other malware programs and corrupts your last restore point and hijacks your computer. Even using uninstall leaves artifact malware. Spent several hours trying to clean up the mess.”, you really want to avoid stuff like that.

    If you are testing mobile web apps, http://www.browserstack.com/ provides remote access to a wide set of browsers, including Android and iOS. If you don’t have access to an iOS device or Mac, this will get you the Apple iOS simulator. It’s not free, but we use it and it’s a good value for the money.

    1

↑ Back to top