Analyzing loading, script execution, and rendering times

You can use the Timelines panel to analyze the time it takes to complete the different activities that the browser engine must perform to completely load and render your webpage.

The Timeline panel

You can click the Timeline icon in the toolbar to display the Timeline panel. Initially, the panel displays no information; you must click the Record button in the status bar to allow Web Inspector to record the browser engine activity.

As it records browser engine activity, Web Inspector adds data to the Timeline panel.

Screen showing the Timeline panel.

Note that all browser engine activity pauses when the device or simulator screen is locked or the BlackBerry Browser or BlackBerry WebWorks application that you are inspecting are minimized. In order for Web Inspector to record any activity, the BlackBerry Browser or BlackBerry WebWorks application must be the active application, and the device or simulator screen must not be locked.

The Timeline panel is divided into two panes:
  • In the top pane, the Timeline panel allows you select which timeline view you want to display. You can choose three views:
    • Events: Displays the time it takes for the browser engine to complete each of the events required to completely load the content.
    • Frames: Displays the browser engine activity for each screen refresh.
    • Memory: Displays memory consumption over time.
  • In the lower pane, the Timeline panel displays a waterfall timeline for the timespan that was selected in the top pane. The data in the timeline is determined by which mode you select in the top pane of the Timelines panel.

Record browser engine activity

  1. Click the Timeline icon on the toolbar to display the Timeline panel.
  2. In the status bar at the bottom of the Timeline panel, click Record Off Button to begin recording browser engine activity. While Web Inspector is recording activity, the record button turns red (Record On Button).
  3. To stop recording browser engine activity, click the record button.

Constrain the display to a specific time span

You can constrain the time span shown in the timeline. In the top pane of the Timeline panel, the portion of time displayed in timeline in the lower pane is represented with a white background. Two grey slider handles at the top left and right edges of this white background allow you to increase or decrease the selected timespan displayed in the timeline.

Screen showing Timeline handles.

  1. Click the Timeline icon on the toolbar to display the Timeline panel.
  2. If necessary, record the browser engine activity to generate timeline data.
  3. In the top pane of the Timeline panel, click and drag a grey slider handle to increase or decrease the time span.

Filter which events are displayed

By default, the Timeline panel displays all events in the table. The status bar at the bottom of the panel contains check boxes that allow you to show and hide events based on type.

  1. Click the Timeline icon on the toolbar to display the Timeline panel.
  2. If necessary, record the browser engine activity to generate timeline data.
  3. In the status bar at the bottom of the Timeline panel, deselect the event types you want to remove from the timeline.

Last modified: 2013-12-21