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.
To launch the simulator from within Visual Studio, you have two different options:
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:
At the top of the simulator, you'll see these options (which are mostly self-explanatory):
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).
Use Flip, 90º CCW (Counter-clockwise) and 90º CW (Clockwise) to change the device orientation.
Click Refresh to refresh the page currently loaded in the webview, or reload to re-launch the app session in the simulator.
At the far right of the simulator, you will see these two icons:
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.
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.
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.
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.
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):
The Network pane works as you'd expect, allowing you to inspect communications in realtime:
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):
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:
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:
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!
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:
In addition, you can't test changes in AndroidManifest.xml, Info.plist, or config.xml in the simulator.
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:
Jim Cowart is an architect, developer, open source author, and overall web/hybrid mobile development geek. He is an active speaker and writer, with a passion for elevating developer knowledge of patterns and helpful frameworks.
Subscribe to be the first to get our expert-written articles and tutorials for developers!