A Concise Guide to Remote Debugging on iOS, Android, and Windows Phone
A Concise Guide to Remote Debugging on iOS, Android, and Windows Phone
When I first started developing for mobile, my primary debugging tool was inserting alert() calls like it was 1999. It was nostalgic for about 30 seconds. My DevTools skills, honed during days of watching Paul Irish videosand years of memorizing keyboard shortcuts, were useless for mobile.
But things have come a long way since then. With the advent of remote debugging, I can now use the same developer tools I know and love from the desktop on mobile devices—even on Web views embedded within native apps.
Since there are already guides on remote debugging scattered around the Internet, my goal here is to consolidate that knowledge, and to present it in the context of hybrid application development (Web apps packaged in a native container).
In this article you’ll learn the best remote debugging approach for each of the three major mobile platforms: iOS, Android, and Windows Phone. You’ll see how to take a native-packaged Web app, and perform common debugging tasks such as inspecting elements and console logging.
For these examples I’m using a hybrid app I developed using Telerik AppBuilder: GifThself. GifThyself lets you build animated gifs with your device’s camera and share them. You can get the source to follow along at https://github.com/tjvantoll/GifThyself.
CONTENTS
IOS
Apple added the ability to remote debug iOS applications in iOS6. To use it there are a few prerequisites. First, go to the Settings app on your iOS device. There, navigate to Safari –> Advanced, and toggle on the Web Inspector switch.
In desktop Safari, go to the Safari –> Preferences… menu, select the Advanced tab, and ensure the Show Develop menu in menu bar check box is checked.
Because it requires Safari, remote iOS debugging is not available on Windows. For Windows users, your best option is weinre, which we’ll discuss momentarily.
Next, connect your iOS device to your development machine via USB and open the app you wish to debug. But be aware of one important restriction: iOS remote debugging is only available for apps built with a Development provisioning profile—not Ad Hoc, and not Distribution. If you use Telerik AppBuilder, you can import a Development profile and select it when performing a build, as the following screenshot shows:
When you open an iOS app that was built using a development provisioning profile, it is immediately available as an inspectable application in Safari’s Develop menu.
At this point, you have the same Safari Web Inspector you use to debug Web applications on the desktop. You can select elements, tinker with CSS, debug JavaScript, profile your app, and more. In the following image, I inspect a paragraph in the Web Inspector, and see the paragraph highlighted on my device automatically:
ANDROID
Although Chrome for Android has had remote debugging for some time, remote debugging wasn’t available for PhoneGap/Cordova developers until quite recently, when Android 4.4 switched their WebView to use Chromium.
Like iOS, there are few prerequisites to use it. First, go to Settings –> About phone on your Android 4.4+ phone (Or Settings –> About tablet on your Android tablet). Next, as ridiculous as this sounds, tap the Build number seven times. You’ll get a tooltip message that congratulates you on becoming a developer. No, I’m not kidding.
Once you are a developer, head back to the main Settings page. There is a new Developer options menu option. Click it, and then check the USB debugging check box.
Only apps that have a debuggable flag are candidates for remote debugging. If you’re using a Cordova version 3.3 or higher, you must add android:debuggable="true" to the element in your AndroidManifest.xml file. If you’re using Cordova 3.2 or under, you must enable WebView debugging with some custom code.
If you are using Telerik AppBuilder, make sure that LiveSync is on when you perform your build. When it is, AppBuilder injects the necessary code to make remote debugging possible automatically.
Now connect your Android device via USB, and open the app you wish to debug. On your desktop, open Chrome and navigate to about:inspect. Check Discover USB Devices and you’ll see your application appear.
Click the Inspect link to open the Chrome DevTools for your app. From here you can use the DevTools functionality you know and love.
Need to debug older Android devices (< 4.4)? Check out jsHybugger; it provides most of the Chrome DevTools functionality for these older devices.
WINDOWS PHONE
Unfortunately, there is no official way to use remote debugging on Windows Phone apps; you cannot connect Internet Explorer to Mobile Internet Explorer for instance. Therefore you must resort to a 3rd party solution, the most elegant of which is weinre.
WEINRE
weinre is short for WEb INspector REmote. It’s built on the WebKit Web Inspector, and is specifically designed to work remotely; therefore it’s great for Windows Phone, as well as any platform where native remote debugging is not available (BlackBerry, iOS on a Windows development machine, and so forth).
weinre runs on top of Node.js. Assuming you already have Node.js installed, to get started, just install it from npm.
>npm install-g weinre
weinre works by creating a debug server that acts as an intermediary between the debug target (i.e. your app) and the debug client (i.e. your development machine). To start a debug server, run weinrewith the --boundHost option set to your development machine’s IP address. My machine’s IP address is 10.0.0.13, so I run the following:
>weinre--boundHost10.0.0.132014-04-04T16:44:28.723Z weinre:starting server at http://10.0.0.13:8080
Use ipconfig getifaddr en0 to get your IP address on Macs, and ipconfig to get it on Windows.
The output of running weinre tells you the URL to access the development server from. In my case, this was http://10.0.0.13:8080. Visit this page in your browser of choice, and scroll to the Target Script section. The debug targets need to use the tag listed to communicate with the debug server. Copy the tag.
Paste the into your app’s HTML. You can change the hash portion of the URL to give the target a meaningful name. Here I use “windows”:
Next, launch the app on your device. Then, back on your development machine, navigate to http://[ip-address]:8080/client/#[target-name]— in my case http://10.0.0.13:8080/client/#windows. You should see the app with the tag inserted listed as a target.
Click the target, then use the menu at the top to view the functionality that weinre offers. The contents of the various tabs should look familiar. For instance, here I select a paragraph on the Elements tab, and see it reflected live on my Windows Phone device:
Although weinre is flexible, in that it runs across multiple platforms, it is also limited; you cannot debug JavaScript or profile your application for instance. Nevertheless, weinre provides a convenient way of performing common debugging tasks such as viewing JavaScript errors, tinkering with CSS, and running commands from the JavaScript console. It certainly beats alert() calls.
ADDITIONAL RESOURCES
A guide to remote debugging from the team at PhoneGap
Detailed documentation on on-device debugging for iOS and Android from the Telerik AppBuilder.
Remote Debugging Chrome on Android
Documentation for remote debugging on Chrome
Home page and documentation for weinre
Remote Debugging [AppBuilder] Apps With Weinre
A more detailed look into weinre from Jim Cowart
Remote Debugging Android Devices With jsHybugger
A guide to all things jsHybugger from Jim Cowart
PREV
Seven JavaScript Quirks I Wish I'd Known About
NEXT
Using Xamarin with Telerik Backend Services and Analytics
COMMENTS
TELERIK DEVELOPER DIGEST
Software development articles from the Telerik Developer Network and around the web.
Click here to sample the latest issue.
FEATURED OPINIONS
January 22, 2018
5 Things That Actually Scare Developers (and One That Does Not)
October 30, 2017
TELERIK ANNOUNCEMENTS
Saying Goodbye to the Telerik Developer Network
Progress Telerik UI for UWP Joins the .NET Foundation
FOLLOW US
BROWSE BY TOPIC
.NETCloudDesktopIoT & BotsMachine LearningMobileProgress LabsTestingWeb
BROWSE BY CONTENT TYPE
OpinionPodcastSlack ChatsTutorialsVideo
CONTACT
USA: +1 888 365 2779
UK: +44 13 4436 0444
India: +91 124 4300987
Bulgaria: +359 2 8099850
Australia: +61 3 9805 8670
Terms of Use|Site Feedback|Privacy Policy
Copyright © , Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.
网友评论