The frame viewer is a feature in Chrome's about:tracing for studying difficult rendering performance problems.
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".
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 happens, reload 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.