Debugging tools of the web UI framework

The web UI framework has a variety of debugging tools, some of which include the Console, Start Trace button, and View Screen Model button.

  • Console
    This appears at the bottom of the screen after you log in to the application. It includes the following features:
    • Debug Console tab

      This shows the actions that you ran while tracing actions using the Start Trace button.

      It also includes a panel for your test scripts. You can trap errors using these scripts.

    • DOM Inspector

      This shows the paths for files used on the screen (JavaScript, css, and other files).

  • Start Trace button

    When you click this button, all of the actions that you take are recorded until you click the Stop Trace button. The button toggles between the Start Trace and Stop Trace labels. Your actions are recorded on the Debug Console tab of the Console.

    To display this button, click Ctrl + F2.

  • View Screen Model button
    Clicking this button displays the Screen Model dialog box, which shows the following information:
    • Ext JS-based screen information.
    • The namespaces that are bound to this screen.
    • The data for these namespaces.
You can view this information in one of the following ways:
  • Text View

    Shows the data in the JSON format.

  • Tree View

    Shows property information about the object in a directory view.

To display this button, click Ctrl + F2.

For an example of this button, do the following:
  1. Click Admin Page > Manage Airport
  2. Click the Search button.

    Search results appear.

  3. Click Ctrl + F2.
  4. Click the View Screen Model button.

    The Screen Model dialog box appears.

  5. In the Screens panel, click down the tree through sc.[application].airport and Source Namespace and select the getAirportList namespace.
  6. In the Model panel, click on the Text View and the Tree View to see different views of the data for the getAirportList namespace.