Chrome Frame Viewer

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-threaded-compositing --force-compositing-mode --enable-impl-side-painting --enable-skia-benchmarking --allow-webui-compositing

When you have such a build:
  • Go to about:tracing and press record
  • Check the "cc" and "disabled-by-default-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.

Tracing 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".

Some notes

Frame viewer is brand new! It has a LOT of rough edges.
  • If your build is earlier than r203834, then you may see empty layers. If that happensreload the page after starting tracing to work-around that limitation.
  • Arrow keys move between frames, once you have selected them
  • Red rectangles on layers are the invalid regions. That does not necessarily mean that they repainted.

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