Analyzing load, execution, and rendering times

You can use the Timelines panel to analyze the time it takes to load and render your webpage.

The Timeline panel

Click the Timeline icon in the toolbar to display the Timeline panel. Initially, the panel displays no information; you must click Record in the status bar to record the browser engine activity.

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

Screen showing the Timeline panel.

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 is minimized.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 The unactive record button to begin recording browser engine activity.
  3. To stop recording browser engine activity, click The active 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 timespan that appears in the timeline.

Screen showing the Timeline handles in the top pane of the Timeline panel.

  1. On the toolbar, 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

Web Inspector organizes events by four types: loading (blue), scripting (yellow), rendering (purple), and painting (green) events. By default, the Timeline panel displays all event types 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.

Analyze records

The Records pane displays a detailed timeline of events based on the view you have selected. Events are listed chronologically in the left panel and displayed graphically in the main panel.

Hover over the record you wish to inspect to display a tooltip that lists important information about the event such as duration or stack traces for rendering and scripting events.

Screen showing a tooltip that appears when the user hovers over a record.

Hover over a paint record to see the affected region of the screen by overlaying the area with a transparent blue rectangle.

Screen showing a tooltip that appears when the user hovers over a paint record. Screen showing the highlighted area of the paint record in an application.

Nest asynchronous events

Web Inspector automatically nests synchronous events under their initial event. You can expand and collapse the events by clicking the arrow beside the initial event. You can also nest asynchronous events using the Glue asynchronous events to causes button.

  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, click Glue asynchronous events to causes (Glue Button) to nest asynchronous events. Click the button again to turn nesting off.

Save and Load Timeline Data

You can revisit past recordings by saving and loading your sessions in the Timeline panel. Timeline data is stored in .json format.

  1. Click the Timeline icon on the toolbar to display the Timeline panel.
  2. Right-click anywhere in the panel. Select Save Timeline data to save your recording or select Load Timeline data to load a past recording.

Last modified: 2014-03-10

comments powered by Disqus