Chrome Frame Viewer Overview and Getting Started

The frame viewer is a feature in Chrome's about:tracing for studying difficult rendering performance problems.


Getting started

Frame viewer is best used in Chrome Canary, but requires that you launch with special flags. On OSX, the appropriate incantation is:

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-impl-side-painting --enable-skia-benchmarking

When you have such a build:
  • Go to about:tracing and press record
  • Check the cc and cc.debug checkboxes. For simplicity, you may want to uncheck the other checkboxes.
  • Press Record
  • Go to some other tab, refresh, then do the janky action.
  • Go back to tracing and press stop.
  • Scroll through the tracks (using W, A, S, and D) looking for the "cc::LayerTreehostImpl" track. Click a dot on that track and you will get a viewer for that frame.

Reporting Rendering Performance Bugs

The best performance bug reports come with two traces: one taken with frame viewer on, and one taken with frame viewer off. We use both because frame viewer, while fast, is still intrusive to total performance. To do this:

  • Start up chrome with the frame viewer command line, above.

  • Record a trace of your slow action, with cc.debug unchecked. This is your true performance trace. We will use that to understand whether the performance issue is functional [requiring the frame viewer data] or raw performance related [requiring just the performance data]

  • Without rebooting chrome or changing its command line, record a second trace, now with cc.debug checked. This is the frame viewer trace and lets us understand functional issues in the page that may lead to performance problems.


Frame Viewer on Android

Since Chrome for Android does not implement the about:tracing UI, there is a command line script in the Chrome repository that provides the same functionality. For example, this command captures a 5 second trace with frame viewer data from the stable version of Chrome on an Android device:

build/android/adb_profile_chrome --browser=stable --trace-frame-viewer -t 5

The script downloads the resulting trace file to the current directory. You can view it by opening Chrome on your desktop, going to about:tracing and clicking on "Load". The chrome you load it into must be a similar version of chrome (within ~2 major versions) of your Android build for it to load properly.

Some notes

  • Arrow keys move between frames, once you have selected them

Demo Video


JSConf.Eu demo



More info

For details on how it works, see the design doc. For more information, you can join/read the trace-viewer mailing list, or review the code, which is located inside https://code.google.com/p/trace-viewer/.

Comments