The DevTools docs have moved! For the latest tutorials, docs and updates head over to the new home of Chrome DevTools.

Rendering Settings

To access the Rendering Settings click on the drawer icon. You can press Esc as a shortcut to open the drawer.

Show paint rectangles

When Show paint rectangles is enabled you be able to see the regions where Chrome paints. This can help to diagnose and ultimately avoid unnecessary paints on a page. You can also use this to study painting behaviors just by hovering over links, popups, or content which dynamically updates.

Furthermore, showing paint rectangles shows repainted areas for each frame, making it easy to visualize what slows pages down. Ideally you want to keep the number of areas being repainted as low as possible.

Show composited layer borders

Show composited layer borders highlights where layers are on-screen. Use this to accelerate render times in Chrome. It can help to reduce the time it takes to render elements which may be animating or have CSS transforms/transitions applied to them that change the shape or positioning of the element.

Note: The blue grid represents tiles, which you can think of as sub-units of a layer that Chrome uses to upload parts of a large layer at a time to the GPU. They aren't really too important in most cases.

Enabling Show paint rectangles and Show layer borders together can also be useful for finding any unnecessary paints which occur and cause a relayout on the Timeline panel.

Note: Show paint rectangles and composited layer borders settings will only apply when DevTools is open.

Show FPS meter

Overlays an FPS meter at the top right of the browser window which updates in real-time.

When running Chrome on Android you may also show a GPU memory meter as part of the overlay. Enabling the FPS meter is specially helpful when developing pages that have animations.

Enable continuous page repainting

>Enable continuous page repainting helps you identify elements on the page which are costly. The page will continuously repaint, showing a counter of how much painting work is happening. Then, you can hide elements and mutate styles, watching the counter, in order to figure out what is slow.

Show potential scroll bottlenecks

Show potential scroll bottlenecks shows areas of the page that slow down scrolling. Touch and mousewheel event listeners can delay scrolling. Some areas need to repaint their content when scrolled. Additional details on causes in this ticket and more explanation is in this Github issue thread