New Perspectives On Web Design

By Addy Osmani CHAPTER 6

To learn more about the F12 developer tools, check out the official docu-
mentation^18 and their guide to the UI Responsiveness^19 tool.

fiRefoX

The Firefox nightlies have a feature called paint flashing which can also be
used to determine what regions of the page the browser is repainting. With
paint flashing turned on, each region is tinted with a random color making
it really easy to distinguish one region from another. Regions with really
heavy paint flashing are the ones that are going to cost you, so try to mini-
mize them as much as possible.

enable paint flashing

1. Be sure to have Firefox 11 or higher installed (Beta, Aurora, or Nightly).


2. Go to about:config.


3. Accept the warning that is displayed.


4. Right-click and select New → Boolean.


5. Type nglayout.debug.paint_flashing.


6. Set the option to True. That’s it!

18 http://smashed.by/f12
19 http://smashed.by/uiresp