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.
First, install and open Xcode. Then, in Xcode, right-click and select “Show Package Contents.” Go to “Contents” → “Applications” → “iPhone Simulator.”
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.
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.”
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.
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.
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.
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.”
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.
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 DOM Inspector is really just the beginning. iOS’ remote developer tools provide a ton of features, such as:
Note: Much like iOS Simulator, you can only do remote debugging for iOS on Mac OS X.
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.
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.
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,
Note: You can also remotely debug with the Android emulator.
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
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.
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.
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:
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
- “Mobile Emulators and Simulators: The Ultimate Guide49,” Maximiliano Firtman
- “Introduction to Chrome Developer Tools, Part One5037,” Seth Ladd, HTML5 Rocks
- “About Safari Web Inspector51,” Safari Developer Library, Apple
- “Enable Remote Debugging With Safari Web Inspector in iOS 652,” Dave Ackerman, Modus Create
- “Remote Debugging on Android With Chrome53,” Chrome Developer Tools
- “Weinre as Remote Debugger54,” Mozilla Developer Network
(da, al, ml, il)
- 1 https://www.smashingmagazine.com/wp-content/uploads/2014/08/01-ios-simulator-opt.jpg
- 2 http://jonraasch.com/
- 3 https://www.smashingmagazine.com/wp-content/uploads/2014/08/01-ios-simulator-opt.jpg
- 4 https://www.smashingmagazine.com/wp-content/uploads/2014/08/02-ios-simulator-opt.jpg
- 5 https://www.smashingmagazine.com/wp-content/uploads/2014/08/02-ios-simulator-opt.jpg
- 6 http://download.cnet.com/iPadian/3000-2072_4-75607175.html
- 7 http://iphone5simulator.com/
- 8 http://developer.android.com/sdk/index.html
- 9 http://developer.android.com/sdk/installing/adding-packages.html
- 10 https://www.smashingmagazine.com/wp-content/uploads/2014/08/03-android-emu-opt.jpg
- 11 https://www.smashingmagazine.com/wp-content/uploads/2014/08/03-android-emu-opt.jpg
- 12 https://www.smashingmagazine.com/wp-content/uploads/2014/08/04-android-emu-opt.jpg
- 13 https://www.smashingmagazine.com/wp-content/uploads/2014/08/04-android-emu-opt.jpg
- 14 https://www.smashingmagazine.com/wp-content/uploads/2014/08/05-android-emu-opt.jpg
- 15 https://www.smashingmagazine.com
- 16 https://www.smashingmagazine.com/wp-content/uploads/2014/08/05-android-emu-opt.jpg
- 17 http://developer.android.com/tools/help/emulator.html
- 18 https://www.manymo.com/
- 19 http://msdn.microsoft.com/en-us/library/windows/apps/ff402563(v=vs.105).aspx
- 20 https://dev.opera.com/articles/installing-opera-mini-on-your-computer/
- 21 http://developer.samsung.com/remotetestlab/
- 22 http://www.keynote.com/solutions/testing/mobile-testing
- 23 http://opendevicelab.com/
- 24 https://www.smashingmagazine.com/wp-content/uploads/2014/08/06-ios-debugger-opt.jpg
- 25 https://www.smashingmagazine.com/wp-content/uploads/2014/08/06-ios-debugger-opt.jpg
- 26 https://www.smashingmagazine.com/wp-content/uploads/2014/08/07-ios-debugger-opt.jpg
- 27 https://www.smashingmagazine.com/wp-content/uploads/2014/08/07-ios-debugger-opt.jpg
- 28 https://www.smashingmagazine.com/wp-content/uploads/2014/08/08-ios-debugger-opt.jpg
- 29 https://www.smashingmagazine.com/wp-content/uploads/2014/08/08-ios-debugger-opt.jpg
- 30 https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
- 31 https://www.smashingmagazine.com/wp-content/uploads/2014/08/09-ios-debugger-opt.jpg
- 32 https://www.smashingmagazine.com/wp-content/uploads/2014/08/09-ios-debugger-opt.jpg
- 33 https://www.smashingmagazine.com/wp-content/uploads/2014/08/10-android-debugger-opt.jpg
- 34 https://www.smashingmagazine.com/wp-content/uploads/2014/08/10-android-debugger-opt.jpg
- 35 https://www.smashingmagazine.com/wp-content/uploads/2014/08/11-android-debugger-opt.jpg
- 36 https://www.smashingmagazine.com/wp-content/uploads/2014/08/11-android-debugger-opt.jpg
- 37 http://www.html5rocks.com/en/tutorials/developertools/part1/
- 38 https://www.smashingmagazine.com/wp-content/uploads/2014/08/12-android-debugger-opt.jpg
- 39 https://developer.chrome.com/devtools/docs/remote-debugging
- 40 https://www.smashingmagazine.com/wp-content/uploads/2014/08/12-android-debugger-opt.jpg
- 41 https://www.smashingmagazine.com/wp-content/uploads/2014/08/13-weinre-opt.jpg
- 42 https://www.smashingmagazine.com/wp-content/uploads/2014/08/13-weinre-opt.jpg
- 43 https://ngrok.com/
- 44 https://www.smashingmagazine.com/wp-content/uploads/2014/08/14-weinre-opt.jpg
- 45 https://www.smashingmagazine.com/wp-content/uploads/2014/08/14-weinre-opt.jpg
- 46 https://www.smashingmagazine.com/wp-content/uploads/2014/08/15-weinre-opt.jpg
- 47 https://www.smashingmagazine.com/wp-content/uploads/2014/08/14-weinre-opt.jpg
- 48 http://vanamco.com/ghostlab/
- 49 http://www.mobilexweb.com/emulators
- 50 http://www.html5rocks.com/en/tutorials/developertools/part1/
- 51 https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
- 52 http://moduscreate.com/enable-remote-web-inspector-in-ios-6/
- 53 https://developer.chrome.com/devtools/docs/remote-debugging
- 54 https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Weinre_As_Remote_Debugger
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.