I've been involved with the Oracle Mobile Application Framework (a.k.a.
ADF Mobile) lately and one of the things developers typically ask me
during my talks is how to debug mobile applications created with the
To give you a little bit of context, the Oracle Mobile Application
Framework does generate a hybrid app (native container +
Mobile Application Framework has some other capabilities like running
Java code on the device but that's a topic for another post.
So, there is more than one way for debugging Oracle-generated (read
hybrid) applications depending on the platform your are own and the
target device you are working on. I'll try to isolate specific use cases
on different posts so you don't get distracted with irrelevant stuff.
The first one on the list is debugging Oracle Mobile Applications on iOS and Mac OS X.
The ingredients are:
- Oracle JDeveloper 22.214.171.124.0
- XCode 5.1 (for the Simulator)
- Apple Safari
The setup is pretty straightforward and here is what you have to do:
On the iOS Simulator (works on iOS +6.x), go to Settings > Safari
> Advanced > and make sure Web Inspector is turned ON.
Open up the Safari web browser and enable the Develop features. To do
that, go to Preferences > Advanced and check the Show Develop menu in
the menu bar.
If you don't have an app deployed to the simulator yet, this is a good
time to do so. Open up JDeveloper and deploy a simple application to the
simulator (you can use the same approach with a real device but I'd
rather start debugging on the simulator).
Once you have the app installed/deployed and running on your iOS simulator go to Safari and select the Develop menu.
You should see something similar to the picture below where you select
the iPhone Simulator and then the name of your application (in my case -
MyWeatherChannel). The below HTML pages are part of your application
and highlighting one of them in the Safari menu will also highlight them
on the iOS simulator.
Selecting that highlighted page will bring Safari's Web Inspector up.
Click on the first icon on the left (Resources) and that should show you
the DOM for the page you selected.
At this point, you have many options but you may want to try enabling
the Styles (click on the Styles button on the top menu) and make changes
to the existing components on the page. That would give a good idea on
what to look for when doing further debugging.
You can also manipulate the DOM to change the name or size of the labels and see how they are going to look like.
What is also very interesting are the Timelines (click on the Timelines
button on the top menu) where you can see how long it takes to make a
network request, to load different components of your application and
The last thing I'd like to show you here is the option to enable the
Console (click on the Console button on the top menu) and you can many
other things like triggering commands or watching the console output.
You can also reload the application by pressing Cmd + R.
You can also change the current values (by also manipulating the DOM) in the app like the example below where the command: document.getElementById("ot3").innerHTML=72; changes the value of one the fields in the app.
Published at DZone with permission of
, DZone MVB
Opinions expressed by DZone contributors are their own.