TOOLS - CSS: Professional Techniques for Modern Layout - page 25

Figure 1-26: Enabling the Develop menu.

27

h ough the layout of Web Inspector bears a strong resemblance to Firebug, there are some
notable dif erences. For instance, the panel on the right has computed styles as a grouping
(see Figure 1-27). As with Firebug, what you see in here is not exactly what was declared, with
shorthand properties being expanded out to individual properties as well as showing the
shorthands. Also, if you select the Show Inherited box, expect a very long list.

Just below that, each rule that applies to the inspected element is shown as its own separate
grouping. You can expand or contact each grouping. Below those is a Metrics subpanel that
shows the dimensions of the layout box for the element being inspected (see Figure 1-28).