Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our 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.

Further Reading on SmashingMag: Link

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 Simulator4
Viewing a website in iOS Simulator (Image: Jon Raasch5) (View large version6)

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 Xcode7
Finding iOS Simulator in Xcode (View large version8)

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 iPadian9, a Windows-based iPad simulator. Beyond that, a handful of other simulators exist, including certain web-based offerings10. 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 bundle11 that includes Android Development Tools (ADT) for Eclipse and the Android software development kit (SDK). Next, follow Google’s instructions12 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.13
Installing the Android SDK packages: HAXM improves the performance of the emulator. (View large version14)

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.15
The “Device Definitions” tab provides preset AVDs. Use one of them or create your own. (View large version16)

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.17
Viewing a website in the Android emulator (Image: Smashing Magazine18) (View large version19)

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

Note: Manymo21 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 Lab24, which enables you to test on a wide selection of Samsung devices.

Additionally, you can use the resources in Keynote Mobile Testing25. 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 Lab26 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.27
First, enable Web Inspector in “Settings” → “Safari” → “Advanced.” (View large version28)

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.29
Once your iOS device is connected, you’ll see it in the “Develop” menu. (View large version30)

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.31
Web Inspector in desktop Safari is inspecting this iPhone. (View large version32)

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 Guide33.”

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

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.36
Left: Tap the “Build Number” seven times to enable developer mode. Right: Enable “USB debugging.”(View large version37)

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.38
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 version39)

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 One5340.”

Remote debugging Android. Here the DOM Inspector in the desktop browser is inspecting the page on the mobile device.41
Here, the DOM Inspector in the desktop browser is remotely inspecting a page on the Android device. (Image: Google42) (View large version43)

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

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.44
The Weinre development server gives you the client-side script to embed, along with a link to the debugging interface. (View large version45)

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 ngrok46.

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

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 Inspector49
Here, Weinre is debugging iOS with the DOM Inspector. (View large version5048)

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: Ghostlab51 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
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57

↑ Back to top Tweet itShare on Facebook

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?

    • 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.

  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?”

  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.

    • 6

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

  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.

  5. 8

    Any thoughts on the mobile simulators in the Browseemall software ( )?

  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:

  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.

  8. 12

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

  9. 13

    I find GenyMotion ( so much easy to install and use, it is free for non-commercial use.

    • 14

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

  10. 15

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

  11. 16

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

  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.

  13. 18

    In-between using a browser or a dedicated emulator, there’s also Chrome’s (Canary) Device Mode & Mobile Emulation

  14. 19

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

  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.

  16. 22

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

  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…

  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

  19. 25

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

  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.

    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, 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.

  21. 27

    Hi Jon Raasch,

    Good article!!, but emulator seems very slow to me and it stops unexpectedly, any solutions for this.?

  22. 28

    Quite surprised you didn’t mention Genemation as an android emulator alternative. If people are still using an AVD then I’d suggest trying Genemotion to claw back a few hours of your life.

  23. 29

    Raymond Schwartz

    September 12, 2014 2:02 am

    Thanks for the roundup! A great compliment to these tools is Mozilla’s just announced add-on that “…Enables Web Development Across Browsers and Devices”
    using the familiar and comprehensive Firefox Developer Tools to test on other major browser engines including Chrome on Android and Safari on iOS.

  24. 30

    Thanks for this great article!

    I have a question for the author(s)/audience (plus some shameless self advertising*) ;)

    How’s your experience on iterating/debugging directly on legacy mobile devices which do not yet support remote debugging (e.g “old” Android devices)?
    What tools and workflows do you use (except those already mentioned like “Weinre”, …)?

    In my personal experience Weinre and also remote debugging tools like Chrome Dev Tools help a lot to directly debug a known glitch but don’t do that much in terms of constant iteration. Especially when using preprocessors like the closure-compiler, LESS, compass, …

    I have once created a small .js lib (“hotswap.js”, MIT licensed of course, which enabled me to update .css and .js files on the fly to help keep the iteration cycles short (reduce page reloads and app state recoveries) but I´m pretty sure there has got to be something better out there.

    *@mods: please remove the link to the lib if you think it’s inappropriate. I just thought it might help some people and give more context on the question I’m asking.

  25. 31

    hi all

    how about emulating different geo locations with the IOs simulator? does anyone know how this works? how do apple devices recognize your geo location? by the user profile?


  26. 32


    Can u explain what is the difference between device emulator and browser and operating system emulators, also give examples if possible.

  27. 33

    Devang Solanki

    March 23, 2015 3:23 pm

    It’s really very helpful / informative and gathered much more detail information.

  28. 34

    Ghostlab does all this without the setup pain and they have shipped the latest release with Chrome Dev tools backed in. Looks like it is possible to remote debug Javascript also

  29. 35

    I’m working on another remote JavaScript CSS and HTML debugging console. It might come handy if you need quick debugging capabilities without installing anything. Its web based and works on any devices. It also debuts web views. It’s still work in progress but it’s functional and I would be glade to share it:

  30. 36

    For mobile browser testing I can recommend – mobile browser emulation for Android, iOS and custom devices with the ability to edit pixel ratio, viewport dimensions and user agent string.
    It also includes other cool features like Visual Studio integration, test automation, standalone browsers and a responsive design testing, which you can all test locally in your own local environment.

  31. 37

    What is in your experience an easy to install, solid, not excessively laggy emulator to test applets for apple smartphones? thank you for any pointers.


↑ Back to top