Testing Mobile: Emulators, Simulators And Remote Debugging

Testing Mobile: Emulators, Simulators And Remote Debugging

• By Jon Raasch


• September 3rd, 2014


• TechniquesTesting


• 2 Comments

In a early days of mobile, debugging was utterly a challenge. Sure, we could get ahold of a device and perform a discerning visible assessment, though what would we do after finding a bug?

With a graphic miss of debugging tools, developers incited to a accumulation of hacks. In general, these hacks were an try to reconstruct a given emanate in a desktop browser and afterwards debug with Chrome Developer Tools or a identical desktop toolkit. For instance, a developer competence cringe a distance of a desktop browser’s window to exam a manageable website or change a user representative to travesty a sold mobile device.

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

Fast brazen to today, when we have a strong apartment of debugging collection that yield suggestive debugging information directly from a earthy device. Best of all, we can use a same desktop debugging collection that we know and love, all on an tangible mobile device.

In this article, we’ll try a accumulation of emulators and simulators that we can use for discerning and easy testing. Then, we’ll demeanour during remote debugging tools, that capacitate we to bond a desktop mechanism to a mobile device and precedence a abounding debugging interface.

Emulators And Simulators

Testing on genuine earthy inclination always pays off. But that doesn’t meant we shouldn’t also exam on emulators and simulators. These practical environments not usually enhance your contrast coverage to some-more devices, though also are a discerning and easy approach to exam tiny changes on a fly.

iOS Simulator

To exam iOS devices, such as a iPhone and iPad, we have a series of options, many particularly Apple’s central iOS Simulator. Included as partial of Xcode, this simulator enables we to exam opposite opposite program and hardware combinations, though usually from a Mac.

¹

Viewing a website in iOS Simulator (Image: Jon Raasch²) (View vast version³)

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

⁴

Finding iOS Simulator in Xcode (View vast version⁵)

Although iOS Simulator is formidable to find, regulating it is opportunely easy. Simply open adult Safari in a simulator and exam your website. You can switch between opposite iPhone and iPad devices, change a iOS version, stagger a viewport and more.

Note: If you’re not operative on a Mac, you’ll have to find another option. You could demeanour to iPadian⁶, a Windows-based iPad simulator. Beyond that, a handful of other simulators exist, including certain web-based offerings⁷. But, to be honest, nothing of these are unequivocally promising.

Android Emulator

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

First, download a bundle⁸ that includes Android Development Tools (ADT) for Eclipse and a Android program growth pack (SDK). Next, follow Google’s instructions⁹ to implement a SDK packages, making certain to implement a default selections as good as a “Intel x86 Emulator Accelerator (HAXM installer)”. You’ll also need to lane down HAXM — hunt your Mac for IntelHaxm.dmg or your PC for IntelHaxm.exe, and run a record to implement it.

¹⁰

Installing a Android SDK packages: HAXM improves a opening of a emulator. (View vast version¹¹)

Next, emanate an Android practical device (AVD) for whichever device you’re testing. If we go into a AVD manager, you’ll see a list of preset inclination in “Device Definitions.” These cover a accumulation of Google products and some general devices. To get started, name one of these presets and click “Create AVD.”

¹²

The “Device Definitions” add-on provides preset AVDs. Use one of them or emanate your own. (View vast version¹³)

Set whatever we like for a CPU, and set “No skin“ and “Use horde GPU.” Now we can run a practical device and use Android’s browser to exam your website.

¹⁴

Viewing a website in a Android emulator (Image: Smashing Magazine¹⁵) (View vast version¹⁶)

Finally, you’ll substantially wish to learn some keyboard commands¹⁷ to improved correlate with a emulator.

Note: Manymo¹⁸ is an alternative, in-browser Android emulator. You can even hide it in a web page, that is flattering damn cool.

Other Simulators and Emulators

• BlackBerry Simulators¹⁹


• Windows Phone Emulator for Windows 8²⁰

Remote Testing

Emulators and simulators are useful, though they’re not 100% accurate. Always exam on as many genuine inclination as possible.

That doesn’t meant we need to buy a hundred phones and tablets. You can take advantage of remote contrast resources, that yield a web-based interface to correlate with genuine earthy devices. You’ll be means to correlate with a phone remotely and perspective any changes in a screencast that is sent behind to your machine.

If we wish to exam a Samsung device, such as a Galaxy S5, we can do so for giveaway regulating Samsung’s Remote Test Lab²¹, that enables we to exam on a far-reaching preference of Samsung devices.

Additionally, we can use a resources in Keynote Mobile Testing²². They’re not cheap, though a series of inclination offering is flattering astonishing, and we can exam a handful of inclination for free.

Note: If you’re looking to get your hands on genuine devices, Open Device Lab²³ can indicate we to a lab in your area, where we can exam on a operation of inclination for free.

Remote Debugging

Remote debugging addresses a accumulation of a hurdles presented by mobile debugging. Namely, how do we get suggestive debugging information from a tiny and comparatively underpowered device?

Remote debugging collection yield an interface to bond to a mobile device from a desktop computer. Doing this, we can debug for a mobile device regulating a growth collection on a some-more powerful, easier-to-use desktop machine.

iOS

With a recover of iOS 6.0, Apple introduced a apparatus that enables we to use desktop Safari’s Web Inspector to debug iOS devices.

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

²⁴

First, capacitate Web Inspector in “Settings” → “Safari” → “Advanced.” (View vast version²⁵)

Next, physically bond your phone or inscription to your appurtenance regulating a USB cable. Then, open Safari (version 6.0 or higher), and in “Preferences” → “Advanced,” name “Show Develop menu in menu bar.”

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

²⁶

Once your iOS device is connected, you’ll see it in a “Develop” menu. (View vast version²⁷)

Select one of these pages, and you’ll have a far-reaching operation of developer collection during your fingertips. For example, try out a DOM Inspector, that enables we to daub DOM elements on your mobile device and see debugging information on a desktop.

²⁸

Web Inspector in desktop Safari is inspecting this iPhone. (View vast version²⁹)

The DOM Inspector is unequivocally usually a beginning. iOS’ remote developer collection yield a ton of features, such as:

• timelines to lane network requests, blueprint and digest tasks and JavaScript;


• a debugger to set breakpoints and to form a JavaScript;


• a JavaScript console.

To learn some-more about what we can do, review by a papers in a “Safari Web Inspector Guide³⁰.”

³¹

You don’t need a earthy iOS device to use remote debugging. You can also debug instances of iOS Simulator. (View vast version³²)

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

Android

Similar to iOS, Android has a remote debugging solution. The collection in it capacitate we to debug an Android device from a desktop appurtenance regulating 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, daub a “Build Number” 7 (7) times. (No, I’m not joking. You’ll see a summary about being a developer during a end.) Now, go behind to a categorical settings and into “Developer Options.” Here, capacitate “USB debugging,” and you’re all set.

³³

Left: Tap a “Build Number” 7 times to capacitate developer mode. Right: Enable “USB debugging.”(View vast version³⁴)

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

³⁵

Once we capacitate “Discover USB devices,” you’ll see a list of inclination connected remotely to Chrome, along with a list of debuggable web pages or apps for any device. (View vast version³⁶)

You should also see any open tabs in your mobile browser. Select whichever add-on we wish to debug, and you’ll be means to precedence a ton of useful tools, such as:

• a DOM Inspector,


• a network row for outmost resources,


• a sources row to watch JavaScript and to set breakpoints,


• a JavaScript console.

To learn some-more about what’s possible, review HTML5 Rocks’ educational “Introduction to Chrome Developer Tools, Part One⁵⁰³⁷.”

³⁸

Here, a DOM Inspector in a desktop browser is remotely inspecting a page on a Android device. (Image: Google³⁹) (View vast version⁴⁰)

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

Weinre

You now know how to remotely debug a accumulation of devices. But if we wish to debug iOS on Windows or on Linux or debug other devices, such as Windows Phone or BlackBerry, afterwards try Weinre, that works on any device.

Setting adult Weinre is a bit some-more difficult since we have to implement it on both a server and a page. To get started, implement Node, and afterwards implement a Weinre procedure with a following command:

npm implement –g weinre

Next, run a debugging server regulating your growth machine’s IP:

weinre --boundHost 10.0.0.1

Note: Make certain to insert your possess IP in a authority above. You can find your IP on a Mac regulating a authority ipconfig getifaddr en0 and on Windows regulating ipconfig.

Next, go to a growth server that is outputted by Weinre in a console (in my case, it’s localhost:8080). Here, demeanour during a “Target Script” section, and squeeze a script tag. You’ll need to embody that on whichever pages we wish to debug.

⁴¹

The Weinre growth server gives we a client-side book to embed, along with a couple to a debugging interface. (View vast version⁴²)

Finally, click on a couple during a tip of this page for a user interface for debugging clients (in my case, it’s http://localhost:8080/client/#anonymous). Now, once we open a page in your device, we should see it in a list of targets.

Note: If you’re carrying difficulty joining a device to your localhost, cruise environment adult a open hovel with ngrok⁴³.

⁴⁴

Weinre’s debugging interface provides a couple to any debuggable target. (View vast version⁴⁷⁴⁵)

At this point, we can precedence a lot of WebKit Developer Tools to debug a page. You can use accessible collection such as a DOM Inspector:

⁴⁶

Here, Weinre is debugging iOS with a DOM Inspector. (View vast version⁴⁷⁴⁵)

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

Note: Ghostlab⁴⁸ is another remote contrast choice that supports mixed platforms.

Conclusion

In this article, we’ve schooled how to set adult a strong contrast apartment regulating a multiple of earthy devices, emulators, simulators and remote contrast tools. With these tools, we are now means to exam a mobile website or app opposite a far-reaching accumulation of inclination and platforms.

We’ve also explored remote debugging tools, that yield useful information directly from a mobile device. Hopefully, we now comprehend a advantages of remote debugging for mobile. Without it, we’re unequivocally usually holding stabs in a dark.

Further Reading

• “Mobile Emulators and Simulators: The Ultimate Guide⁴⁹,” Maximiliano Firtman


• “Introduction to Chrome Developer Tools, Part One⁵⁰³⁷,” Seth Ladd, HTML5 Rocks


• “About Safari Web Inspector⁵¹,” Safari Developer Library, Apple


• “Enable Remote Debugging With Safari Web Inspector in iOS 6⁵²,” Dave Ackerman, Modus Create


• “Remote Debugging on Android With Chrome⁵³,” Chrome Developer Tools


• “Weinre as Remote Debugger⁵⁴,” Mozilla Developer Network

(da, al, ml, il)

Footnotes

1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/08/01-ios-simulator-opt.jpg


2. 2 http://jonraasch.com/


3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/08/01-ios-simulator-opt.jpg


4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/08/02-ios-simulator-opt.jpg


5. 5 http://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 http://www.smashingmagazine.com/wp-content/uploads/2014/08/03-android-emu-opt.jpg


11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/08/03-android-emu-opt.jpg


12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/08/04-android-emu-opt.jpg


13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/08/04-android-emu-opt.jpg


14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/08/05-android-emu-opt.jpg


15. 15 http://www.smashingmagazine.com


16. 16 http://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://us.blackberry.com/sites/developers/resources/simulators.html


20. 20 http://msdn.microsoft.com/en-us/library/windows/apps/ff402563(v=vs.105).aspx


21. 21 http://developer.samsung.com/remotetestlab/rtlDeviceList.action


22. 22 http://www.keynote.com/solutions/testing/mobile-testing


23. 23 http://opendevicelab.com/


24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/08/06-ios-debugger-opt.jpg


25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/08/06-ios-debugger-opt.jpg


26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/08/07-ios-debugger-opt.jpg


27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/08/07-ios-debugger-opt.jpg


28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/08/08-ios-debugger-opt.jpg


29. 29 http://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 http://www.smashingmagazine.com/wp-content/uploads/2014/08/09-ios-debugger-opt.jpg


32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/08/09-ios-debugger-opt.jpg


33. 33 http://www.smashingmagazine.com/wp-content/uploads/2014/08/10-android-debugger-opt.jpg


34. 34 http://www.smashingmagazine.com/wp-content/uploads/2014/08/10-android-debugger-opt.jpg


35. 35 http://www.smashingmagazine.com/wp-content/uploads/2014/08/11-android-debugger-opt.jpg


36. 36 http://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 http://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 http://www.smashingmagazine.com/wp-content/uploads/2014/08/12-android-debugger-opt.jpg


41. 41 http://www.smashingmagazine.com/wp-content/uploads/2014/08/13-weinre-opt.jpg


42. 42 http://www.smashingmagazine.com/wp-content/uploads/2014/08/13-weinre-opt.jpg


43. 43 https://ngrok.com/


44. 44 http://www.smashingmagazine.com/wp-content/uploads/2014/08/14-weinre-opt.jpg


45. 45 http://www.smashingmagazine.com/wp-content/uploads/2014/08/14-weinre-opt.jpg


46. 46 http://www.smashingmagazine.com/wp-content/uploads/2014/08/15-weinre-opt.jpg


47. 47 http://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

↑ Back to topShare on Twitter

Testing Mobile: Emulators, Simulators And Remote Debugging