Debugging Oracle JET Applications

Since Oracle JET web applications are client-side HTML5 applications written in JavaScript, you can use your favorite browser's debugging facilities. The process for debugging hybrid mobile applications differs, depending on whether you’re debugging your application in a web browser, emulator, or device.

Debugging Web Applications

Use your favorite browser's debugging facilities for debugging.

Before you debug your application, you should verify that your application is using the debug version of the Oracle JET libraries. If you used the tooling framework to build your application in development mode, then your application should be using the debug library. If, however, you are using one of the sample applications, it may be configured to use the minified version of the Oracle JET libraries.

To verify that you are using the debug version of the library, check your RequireJS bootstrap file (typically apphome/js/main.js) for the Oracle JET library path, highlighted in bold below.

requirejs.config(
{
  baseUrl: 'js',

  // Path mappings for the logical module names
  paths:
  //injector:mainReleasePaths
  {
    ... contents omitted

    'ojs': 'libs/oj/vx.x.x/min',
    'ojL10n': 'libs/oj/vx.x.x/ojL10n',
    'ojtranslations': 'libs/oj/vx.x.x/resources',
    'text': 'libs/require/text',
    'signals': 'libs/js-signals/signals'
  }
  ... contents omitted
);

In this example, the path is pointing to the minified version of the Oracle JET libraries. To change to the debug version, edit the bootstrap file and replace min with debug as shown.

'ojs': 'libs/oj/vx.x.x/debug',
Debugging facilities vary by browser. For example, with Google Chrome you can:
  • do normal debugging, including setting breakpoints and inspecting CSS using Chrome Inspector (<a target="_blank" href="chrome://inspect">chrome://inspect</a>) without having to install any 3rd party add-ons.

  • add the Knockoutjs Context Debugger extension to examine the Knockout context and data for a DOM node in a sidebar.

  • add the Window Resizer extension to resize the browser window to emulate common screen sizes or set your own. You can find the extensions and other developer tools at the Chrome Web Store.

If you’re using an Integrated Development Environment (IDE) for development, you can use debugging tools such as the one provided by the NetBeans IDE to set break points and watches. For details, see Debugging and Testing JavaScript in an HTML5 Application.

Debugging Hybrid Mobile Applications

The process for debugging hybrid mobile applications differs, depending on whether you’re debugging your application in a web browser, emulator, or device.

There are several ways to debug a hybrid mobile application, depending on the environment where you are running the application:

  • Debugging in a local web browser

    Since Cordova applications are HTML5 applications written in JavaScript, you can use the same debugging facilities that you would use for web applications as described in Debugging Web Applications. With this approach, however, you might find it difficult to debug code that depends on device services and Cordova plugins.

    To run an Oracle JET hybrid mobile application in your desktop Safari or Chrome browser, build it first and then serve it with the --browser option.

    grunt build:dev --platform={ios|android|windows}
    grunt serve:dev --platform={ios|android|windows} --browser
    
  • Debugging in the emulator

    You can run the app in the emulator which eliminates the need for an actual device. However, emulators can run slowly and include limited support for emulating native device services.

    To run an Oracle JET hybrid mobile application in the default emulator, build it first and then serve it.

    grunt build:dev --platform={ios|android|windows}
    grunt serve:dev --platform={ios|android|windows} --emulator
    

    You can also specify a named emulator or simulator on Android or iOS devices:

    grunt serve:dev --platform=android --destination=emulator-name
    

    To determine the emulator or simulator name:

    • For Android emulators, run android avd at a command prompt.

    • For iOS simulators, at a command prompt in the application’s hybrid directory, enter the following: ios-sim showdevicetypes.

  • Debugging on the device

    Running the application on a real device provides the most accurate experience, but the development cycle can take longer since you must package the application, deploy it to the device, and use a desktop browser or other development tool to connect to it running on the device.

    To run an Oracle JET hybrid mobile application on the device, build it first and then serve it.

    grunt build:dev --platform={ios|android|windows}
    grunt serve:dev --platform={ios|android|windows} --destination=device
    

You can find additional information about debugging Cordova applications using Chrome Inspector, Safari Web Inspector, or other tools at: Cordova Next Steps.