7.6 Runtime Developer Toolbar

Use the Runtime Developer toolbar to quickly edit the current application or currently running page, or view session state.

When you run an application from App Builder and view a page, the Runtime Developer toolbar displays at the bottom of any editable page.


The Runtime Developer toolbar only displays if the Availability, Status attribute on the Application Definition page is set to Available with Developer Toolbar. See Editing the Application Definition.

The Runtime Developer toolbar contains of the following controls:

  • Home (Home icon) - Links to the Workspace home page. See Understanding the Workspace Home Page.

  • App XX (where XX is the app ID) - Links to the Application home page. See Understanding the Application Home Page.

  • Page XX (where XX is the page number) - Displays the currently running page ID. Click the page ID to view the page in Page Designer and then edit the page.

  • Session - Displays two menus:

    • View Session State - Displays session state information for the current page. See Viewing Session State.

    • Session Overrides - Displays the Session Overrides dialog which lists session values that can be overidden in the current application. See Managing Session State Overrides.

  • Debug - Controls the display of debug information. Available options include:

    • Enable Debug - Specifies the level of detail included when you click View Debug .

      • No Debug - Enables and disables Debug mode

      • Info (default) - The debug log contains the default or normal amount of information. This corresponds with a log level of 4 and a Debug URL argument of YES.

      • App Trace - The debug log contains messages up to level 6. This corresponds with a Debug URL argument of LEVEL6.

      • Full Trace - The log will contain the maximum amount of information. This corresponds with a Debug URL argument of LEVEL9. Full Trace can slow request processing but provides the most amount of detail.

      See Utilizing Debug Mode.

    • View Debug - Displays debug information for the current page.

  • Quick Edit - Enables developers to enter either Quick Edit mode or access Live Template Options.

    • Quick Edit Mode - Click Quick Edit and then select the desired component to instantly access the component in Page Designer. Press ESCAPE or click outside a component to exit quick edit mode.

    • Edit Live Template Options - Click Quick Edit and then move the mouse over the component for which you want to modify template options and click the Wrench icon in the upper right corner. See Using Quick Edit to Modify Live Template Options.

  • Info (Info Icon) displays two menus:

    • Show Layout Columns - Toggles between Show Layout Columns and Hide Layout Columns. This option only applies if a layout is used and that layout supports showing layout columns and the page has more than one column.

    • Show Page Timing - Displays the Page Performance Timing dialog. Click Copy to copy the data in table form and then paste it into another application. Click Clear to remove the current timing events.

  • Customize - The Customize menu includes two options:
    • Theme Roller - Access a live CSS editor that enables you to quickly change the theme style, colors, rounded corners and other application attributes. This option only displays for themes supporting Theme Roller. See Using Theme Roller.

    • Edit Logo - Change the logo users see at runtime. See Managing Application Logos.

    • Edit App Icon - Update or upload a new application icon. See Managing Application Icons.

  • Developer Toolbar Options (Developer Toolbar Options) - Displays on the far right and resembles a mechanical gear. Click Developer Toolbar Options to control how the Runtime Developer Toolbar displays.

About Developer Toolbar Options

Clicking Developer Toolbar Options (Developer Toolbar Options) displays a submenu containing the following controls:

  • Auto Hide - Hides the toolbar, making more of the page visible.
  • Show Icons Only - Removes the labels from the buttons to make the toolbar smaller.
  • Display Position - Controls the placement of the Developer toolbar. Options include: Top, Left, Bottom, or Right.

About Runtime Toolbar and the Environment Banner

If a workspace or instance-level environment banner is enabled, the text and color will be applied to Runtime Developer toolbar.

An environment banner displays a colored banner with text at either the left or top of page. You can define an environment banner for a given workspace or an entire development instance. Workspace-level environment banners override those defined at the instance-level.

About JavaScript Error Detection

If a page has one or more JavaScript errors, a red error button displays on the left side of the Runtime Developer toolbar. If you have enabled Auto Hide, the Runtime Developer toolbar displays indicating the error.

Click the red error button to view an alert dialog which explains you should view the Browser console. The red error button persists until error has been resolved, the Browser console is cleared, and you refresh the page.