An Overview of Mobile Debugging Techniques – Part One
The Mobile Zone is presented by New Relic and Verivo. New Relic is a performance monitoring tool and has a Data Nerd T-Shirt with your name on it if you sign up. Verivo is an enterprise mobile app platform designed to radically simplify the complexities of building, securing and controlling custom enterprise apps.
An Overview of Mobile Debugging Techniques – PartTwo
Safari Remote Debugging
The first option we'll look at is specific to iOS devices, but can still be useful for debugging in general. In iOS6, Apple introduced a new feature called Safari Remote Debugging. This allows you to use the Safari web browser to debug web applications being run on iOS devices (both iPhones and iPads). This also includes PhoneGap applications. Unfortunately, this option is only available to folks running Mac OS X.To use this feature, your iOS device must be physically connected to your laptop. Next, you need to enable it (one time) on the device itself. Open the Settings app, go to Safari, and then click the Advanced Menu. Here is a screenshot from an iOS7 device:
Simply
enable Web Inspector and this device will be ready for remote
debugging. Before continuing on, open up Safari on your device and visit
any web page.Next, open up Safari. If you don't see the Develop menu, go into your Safari preferences, select the Advanced tab, and turn it on there.
In
the Develop menu you will see a new menu option that matches the name
of your iOS device. (Note that if you have multiple devices connected
you will see all of them, including the iOS Simulator if you have that
running.)
If
you mouse over the device name, you'll see the name of the web page
visible in Safari, or a list of URLs if you have multiple tabs opened.
Select the URL and Safari will open up a set of dev tools:
You now have the ability to interact with your mobile Safari directly from the desktop. If you're primarily a Chrome user, the menu options here may not be terribly obvious. (The next version of Safari will be updating the developer tools UI so what you have now may be a bit different.)
Going from left to right, the menu icons are:
Resources: This provides roughly the same view as the Elements panel in Chrome's Dev Tools.
Storage: This is similar to the Resources panel in Chrome's Dev Tools. Note that unlike Chrome's Dev Tools, the Web Inspector only seems to support cookies and Web SQL databases. Local Storage is missing from the UI. (Although you could use the console to inspect these values.)
Instrument: This includes network requests as well as timing data for layout and JavaScript events. This corresponds roughly to the Network, Timeline, and Profiles panel in Chrome.
Search: Allows you to search across all the data in the current request - this includes HTML, JavaScript, and CSS source.
Issue: Reports on issues found in the current request. You can find similar information in Chrome's Console, but this focused view is pretty handy.
Debug: Safari's JavaScript debugger.
Breakpoint: Where you set and view breakpoints.
- Finally, the Console.
Let's take a closer look at the tabs that I think are going to be the most valuable to you in terms of debugging. To be clear, you should be aware of the capabilities in all the different tabs, but for this article we will focus on some of the more important ones.
The Console
The Console tab is hopefully familiar to you already. On the desktop this is where you can find errors and run arbitrary code. This is even more useful for mobile websites. In the screenshot below you can see the console reporting a simple JavaScript error.
As I mentioned above, you can also run code from here as well. This could be useful for manually firing functions or even just checking variables.
Here's a simple example. I've used the console to check the value of navigator.userAgent and run an alert. Notice that it fires on the device (the simulator in this case) itself.
Resources
The
Resources tab gives you access to the DOM. As you select code in the
panel, you will see it highlighted in real time on the device.
Even more interesting is that you can edit the HTML live on the device. Double clicking on the text of the h1 tag lets us edit and modify it.
Selecting the icons on the upper right hand side give you access to the tag node and style properties. Under the style property menu you can actually modify the design. This is especially helpful on mobile devices. In the example below I've just added a color, but you could play with margins, padding, and size values to try to improve the design of your web site.
Instrument
In
the Instrument panel, the network requests are probably the first
useful tool you will need. In complex Ajax-based applications, being
able to trace and monitor network requests is incredibly helpful.The first thing you should be aware of though is that network requests that fail. 404s for example, will not show up here. Instead they will show up in the console only. Chrome on the Desktop will show the failed network requests in both the Networks tab and the console.
Let's look at a simple example. I've run a simple Ajax request. Notice how it shows up in the Network panel along with other requests (CSS, JavaScript, etc).
Notice the arrow on the selected row? Clicking it will load the raw result of the request:
Be sure to check the rest of the Instrument panel as the rendering section and JavaScript events could also be incredibly helpful.
The Debugger
The
final feature we'll look at is the debugger. This involves a few
different aspects of the web inspector. First, in the Resource panel I
can select a JavaScript file from my application:
I can then simply click a line to add a breakpoint. I've done so on line 7 below:
Now when I execute this on the device, it will actually pause execution and let you step through the function one step at a time.
Chrome Remote Debugging
For the next portion of this article, we'll focus on Chrome Remote Debugging. As you can probably guess, this is focused on Android devices and the Chrome browser. It is important that you remember that there is a difference between the stock Android browser and Chrome for Android. The debugging supported by Chrome on the desktop is for Chrome on the device. That's probably obvious but don't forget. As of a report from approximately 6 months ago, the stock Android browser was in use around 10 times more than Chrome for Android! Despite that, you can still make use of Chrome Remote debugging.To begin, you install the ADB extension for Chrome (https://chrome.google.com/webstore/detail/dpngiggdglpdnjdoaefidgiigpemgage). This extension adds a new icon to the upper right hand corner of your Chrome browser:
In
this case, I've got an Android device connected already. (Note - unlike
the iOS remote debugger, you can't use this feature with the Android
emulator.) Clicking on it exposes these options:
Startand Stop ADB refer to the debugging service and as long as it is already started you can just leave it be. View Inspection Targets gives you a list of all connected devices.
Next, on your Android device, open up Chrome, go to Settings, then Advanced, Developer tools, and enable USB Web debugging.
Once you've done that, return to your desktop, select View Inspection Targets, and note how the Desktop Chrome can tell what site you have open on the device. In fact, if you have multiple sites open in different tabs, you can see a list of them on your desktop:
You can see a few options for each tab. Reload and Close do exactly what you would imagine. The interesting option here is Inspect. Clicking Inspect opens a new window with the familiar Chrome Dev Tools UI:
(Blockquote - What is the SchemaDump tab you ask? That's actually an extension I wrote myself. Chrome lets you write extensions that do many things, including extend the built in developer tools. The same extensions that work for my desktop will work for Android as well!)
We won't go over the tabs as the assumption is that most folks are pretty familiar with Chrome already. If not, you can check out this freeDevTools course on CodeSchool. As you can imagine, the console is connected to the device. Running a command on the desktop will execute on the mobile device.
Also, much like the Safari debugger, you can select DOM items in the Elements panel and see them update live on the device. You can also modify these elements to test out CSS modifications and other changes. (Pardon the lame camera picture but there was no way to select both the device DOM being highlighted and the desktop!)
As
you can imagine, Chrome's developer tools are very powerful and
familiar to most developers. Having these available to you for testing
mobile devices will be incredibly useful!What's Next?
In this article we focused on the "big boys", iOS and Chrome remote debugging. Certainly there are other mobile platforms out there and other tools available to you. In the next article, we'll discuss two more tools, Adobe's Edge Inspect and Weinre.An Overview of Mobile Debugging Techniques – PartTwo
This article was commissioned by Intel and the Tizen Mobile Web Development team.
Source:
http://css.dzone.com/articles/overview-mobile-debugging
