My favorites ▼ | English ▼ | Sign in

Google Web Toolkit

GWT 2.4

Getting Started with Speed Tracer

Speed Tracer is a Google Chrome extension that helps you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Using Speed Tracer you are able to get a better picture of where time is being spent in your application.

Downloading Chrome and Installing Speed Tracer
Quick Tour of Speed Tracer
Tracking Server-side Metrics on App Engine

Downloading Chrome and Installing Speed Tracer

Speed Tracer requires the Dev Channel version of Google Chrome.

  1. Download and install the Google Chrome Developer Channel version of Google Chrome. This version is instrumented to work with Speed Tracer.

  2. Start Google Chrome with a flag that enables Speed Tracer to work, as described next. The process is different for Windows and Macintosh.

    - Windows

    Start Google Chrome with the following flag, either from the command line or by modifying your desktop shortcut for Google Chrome:

    --enable-extension-timeline-api

    To modify your desktop shortcut for Google Chrome, right-click on the Google Chrome shortcut icon and choose Properties:

    Then, paste the --enable-extension-timeline-api flag into the Target field at the very end of the string (with a space separating it from chrome.exe).

    Click OK to save the setting and dismiss the dialog. To start Google Chrome, double-click on the shortcut icon you just modified.

    - Mac OS X

    On Mac OS X, you need a bootstrap application to set the appropriate flag in Google Chrome. First download the Speed Tracer bootstrap application, then Quit Google Chrome and restart it by running the "ChromeWithSpeedTracer" application that you just downloaded. Please ensure that you are running the Dev Channel version of Google Chrome from step 1.

    Alternatively, you can start Chrome from the command line (or an alias) with this flag: 

    $ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-extension-timeline-api &

  3. Install Speed Tracer - Now Google Chrome is ready for you to add Speed Tracer extension. Click on this install button:

    By installing this extension, you agree to the Google Chrome Extension Gallery Terms of Service.

    Note - If you run into trouble, first check the FAQ, then try the Speed Tracer Google Group.

Quick Tour of Speed Tracer

Here's a quick tour of the user interface.

  1. With Chrome started as in the previous section, browse to a page you wish to profile.

  2. Click the stopwatch icon to the right of the browser's web address field to open the Speed Tracer Monitor window and begin recording events. You should see data being populated in the Monitor window. To focus on the subset of data you want to analyze, click and drag the handles on the thin Overview graph, or click and drag a selection box over the main graph at the top. Only events in the zoomed region (highlighted below) appear in the list below the timeline.

  3. If you want to analyze page loading, press the Refresh button on the browser window of the page being monitored.

  4. You can pause the recording of events by pressing the Record Button in the Monitor window. To zero out the timeline and start fresh, you can press the Reset button .

  5. Click on a row in the table below the graphs to get details on a particular event.

  6. Click the Network (resources) graph to see details on network events.

  7. Click on a row in the event table to get details for each event.

Read on for more details of the Speed Tracer interface.

Speed Tracer Monitor

This section describes the components of the Speed Tracer Monitor window.

Toolbar

Record
Records the incoming data stream, updating the monitor. Click to toggle between record and stop.
Reset
Resets the data store in the Monitor window, removing the previously recorded data.
Save
Writes the profiling data out to a text file. See Data Dump Format for information on the format of this file.
Time display
Shows the total amount of data captured, plus the current range of data being displayed in the timeline graphs.
Zoom (in/out/all)
Adjusts the amount of data shown on the timeline graphs. The first two buttons let you zoom in and zoom out. The third button zooms out all the way. Zoom can also be adjusted by clicking and dragging on the graphs.
Page transition option menu
Contains one menu item for each page transition. Use this menu to navigate between previous pages in the browsing session.
Hint Report
Displays a report showing all hints reported since the last page transition.
Help
Brings up a page of useful information about how to use Speed Tracer.

Timeline Graphs

  • General Navigation:

    Click on a graph to switch focus between Sluggishness and Network views in the detail table. Click and drag on the graph to zoom in on a portion of the timeline. Watch the following video to see how to zoom in and out on the data using the graphs.

  • Sluggishness Graph

    Displays an indication of how responsive the user interface is at the specified time. Tall peaks in the graph indicate the browser is blocked for a significant amount of time.

  • Network Visualization Graph

    Displays an indication of how much network activity occured at the specified time. The graph displays the number of network connections concurrently in progress over time.

  • Hint Indicators
    These vertical green, orange and red lines on the graph hint where Speed Tracer has flagged a potential performance problem.
    Green
    info (lowest priority hint)
    Orange
    warning
    Red
    critical (highest priority hint)
  • Current Event Callout
    When mclass="indent"oving the mouse over the Sluggishness detail view, it gives an indication of the position and duration of the event under the mouse.

Overview Graph

Displays both the Sluggishness and Network graphs for the entire range of data captured since the last page transition.

General Navigation:
Click and drag one of the handles to expand or narrow the range of data currently being viewed. Click and drag the area between the handles to move the focus of the timeline graphs.

Sluggishness Detail View

A list of events is shown that corresponds to the region that is selected in the timeline. Move or resize the timeline selection to modify which events are displayed.

  • General Navigation
    Use the scrollbar to view all events in the selected region of the overview graph. Click on a row in the table to view details of the event.

  • Hint column
    The first column can hold a colored icon that indicates a problem was flagged for the event. The color indicates the most severe problem encountered, and the number indicates the number of problems of the highest severity.

  • Started column
    The time the event started relative to the start of the recording session in seconds.

  • Duration column
    The length of the event in milliseconds.

  • Type column
    Indicates the type of event that first triggered. The different types of events and their meaning are described in the Data Dump Format description. Note that child events might actually consume more time than the parent event indicated in this column.

  • Filter Icon
    Clicking on the Filter icon will show the Filter panel.

  • Filter Panel
    You can set filter criteria to determine which events are suppressed in the Sluggishness Detail view. By default, events 3 milliseconds or less are suppressed, unless that event contains a log message or a hint.

  • Breakdown by Time
    Indicates the top three types of events that consume the most wall clock time during the execution of this event. This is not always the same as the parent event type.

  • Sluggishness Event Detail (when expanded)
    Click on a row in the table to display the event detail. This reveals four new sections: Breakdown by Time (in the blue area), hints, Event Trace, and Details table.

    • General Navigation:
      Selecting an item in the Event Trace tree will update the Details table on the right.

    • Breakdown by Time Chart
      Displays a full breakdown of how time was spent processing the top level event. The chart aggregates all events by type and displays a pie slice in proportion to the amount of time spent processing each type of event.

    • Hint tree
      Displays all hint records encountered when analyzing this event.

    • Event Trace tree
      Displays a hierarchical view of all events that fired during the duration of the top level event. To the left, a waterfall view of the amount of time each child event contributed is displayed. Selecting an event in the tree will display details of the child event in the Details table.

    • Details table
      Provides further details for an event selected in the Event Trace.

Network Detail View

  • General Navigation
    Selecting an row in the Detail View will expand the row to view the details of that event.

  • Resource Type icon (first column)
    Displays an icon that gives an indication of what type of resource (image, stylesheet, script, document, ...) the network event represents.
  • Network Resource Name column (second column)
    Gives the short name and an abbreviated URL of the resource. Hovering over the URL or expanding the row will show the full URL.
  • Network "Pillbox" (third column)
    A graphic indication of when the resource was requested, when the transfer response began and when the request finished.

  • Network Resource Details
    Clicking on a horizontal bar reveals these network resource details, including a summary, request headers and response headers.

Hint Report

Displays all hints for the current page. Clicking on one of "All", "Rule", or "Severity changes the format of the report. Clicking on one of the column headers in the report changes the sort order. See Speed Tracer Hints.

Tracking server-side metrics on App Engine

Speed Tracer enables server-side tracing in Java App Engine, for measuring the performance of your application on the server. For more information, see Server-side Tracing.