Good debugging tools are a critical component to any successful development effort. If you've done any amount of mobile web/hybrid mobile development, you know that the debugging story there is an often-painful one. With Icenium, we're changing that. The simulator available to you when you use Icenium Graphite or the Icenium Extension for Visual Studio is a powerful tool, enabling you to simulate location changes, emulate device types & orientation, debug your app at runtime, inspect the DOM, profile your app and more. Let's take a look at the features.

Running the Simulator

To launch the simulator from within Visual Studio, you have two different options:

• On the Icenium menu at the top, choose "Run {your app name} in Cloud".
• Click the "Start" button to Run the app.

Once the simulator is open, you can change the device type using the menu at the top left.

Here's a series of screen shots demonstrating this:

Simulator Options

Top Menu

At the top of the simulator, you'll see these options (which are mostly self-explanatory):

Device Type and Version

Depending on which device type you have selected, you can change the version of the OS (which will adjust the look and feel of the simulator to match that OS).

Orientation

Use Flip, 90º CCW (Counter-clockwise) and 90º CW (Clockwise) to change the device orientation.

Refresh/Reload

Click Refresh to refresh the page currently loaded in the webview, or reload to re-launch the app session in the simulator.

Debug

If you've used the webkit tools in Safari or Chrome, then you'll feel right at home with these debugging tools. Clicking the "Debug" option opens a set of tools allowing you to inspect the DOM, step through your JavaScript, profile your app and more. We'll cover these in more detail in a moment.

Side Menu

At the far right of the simulator, you will see these two icons:

Geolocation

Clicking on the location icon will open the Geolocation pane, which allows you to simulate changes in the user's location:

The values in the fields you see all correspond to the HTML5 location spec (for example, altitude is in meters, speed is in meters-per-second). You can refer to this article for more information.

Network

Clicking on the "network" icon opens the Connection Type panel, which allows you to simulate changes in the user's network connection type:

Simply click on the connection type you want.

Simulator Debug Tabs

If you've used Chrome or Safari's developer tools, then the Icenium simulator's "Debug" options will look very familiar. It's very helpful to know that the simulator's shortcut keys match those of the WebKit developer tools (see this for more information). This means that commands like Ctrl/Cmd + O (to open files), Ctrl/Cmd + G (to go to a line in a file), etc. all work as expected.

Clicking on the "Debug" option will open the Debug Panel at the bottom - splitting the simulator's view horizontally. You can undock the Debug Panel from the simulator - which I often do, in order to split the screen vertically between the simulator and Debug Panel, like this:

Across the top of the Debug Panel, you'll see these tabs:

Let's break these down one by one.

Elements

Just like Chrome or Safari's Elements panel, this panel allows you to inspect the DOM of your application - including CSS. You can make changes to the markup and CSS and see them reflected immediately:

You'll notice in the above gif that I right-click the app and choose "Inspect Element" - this is an extrememly useful feature to take you directly to the markup element you right-clicked.

Resources

The resources pane let's you view all the assets loaded (associated with the page being viewed in the webview) as well as inspect Local Storage, Cookies and other offline data (IndexedDB/WebSQL):

Network

The Network pane works as you'd expect, allowing you to inspect communications in realtime:

Sources

JavaScript debugging tools have improved leaps and bounds in the last few years. The high quality tools we're used to for desktop browsers are now available to help you debug your hybrid mobile app. The Sources panel allows you to debug your JavaScript by setting breakpoints and stepping through code, setting watches, inspect the call stack, and more. In addition, you can make changes to the JavaScript in the Source panel, and hit Ctrl + S (or Cmd + S on Mac) and the changes will be persisted back to the source files (and you'll see them reflected in Visual Studio):

Timeline

The Icenium documentation puts it best:

The Loading, Scripting, and Rendering timelines show how and when HTML is parsed and how HTML calculates styles, and performs other operations with your app.

To capture data, click the "Record" button (dark circle at the bottom). Once you've captured events, you can expand/shrink the analyzed portion of the timeline, look at memory usage, filter events, and more:

Profiles

Need to see what function is taking the longest time to execute? Interested in seeing what CSS selectors are in use (and the match count/performance of each)? Profiling is the doorway to serious performance improvements. The Profiles panel allows you to profile CPU usage, CSS selectors and memory usage:

Audits

The Audits panel allows you to run automated tests against network utilization and certain "page performance" characteristics - returning suggestions on how you can improve the performance of your app:

Of course - not all of the suggestions will be directly applicable to hybrid mobile apps (like gzip compression), but you will still find helpful data here!

Console

The Console panel provides an interactive JavaScript console, allowing you to interact with your app:

Bonus Points

Speaking of the Console panel, Stefan Dobrev (one of our engineers) pointed out to me that you can use the navigator.notification.vibrate API in the simulator:

Pretty fun!

Limitations

You might have already guessed, but it's an important thing to keep in mind: the simulator does not support apps using Custom Cordova plugins, unless you have provided a stub/shim/abstraction in your app's JavaScript for the app to use when being run in an environment where the native side of the plugin doesn't exist. You can, however, test these "core" Cordova APIs in the simulator:

• Camera API
• Compass API
• Device API
• Geolocation API
• InAppBrowser API
• Connection API
• Notification API

In addition, you can't test changes in AndroidManifest.xml, Info.plist, or config.xml in the simulator.

Wrapping Up

By now you can see that the Icenium simulator is packed with serious capabilities. You can develop with peace of mind, knowing that you have the kind of visibility you need into how your app runs and performs. When the time comes to where you need to deploy your app to a device and debug remotely, I recommend checking out these posts:

• Icenium Docs - "Debugging on Device"
• Remote Debugging Icenium Apps With Weinre
• Remote Debugging Android Apps with jsHybugger (Coming Soon!)