Computed Side Panel
From FirebugWiki
Sebastianz (Talk | contribs) (Put style tracing into its own section) |
Sebastianz (Talk | contribs) (Added info about infotips and put them into a 'Panel' section together with style tracing) |
||
| Line 40: | Line 40: | ||
|} | |} | ||
| - | == Style Tracing == | + | == Panel == |
| + | === Style Tracing === | ||
The computed styles can be expanded in the case there are user-defined stylesheets changing them. The order of the styles describes the style trace, i.e. shows in which order the styles were applied. Each style has a link to its source. Overwritten styles are displayed lined through and inherited styles are displayed in gray. | The computed styles can be expanded in the case there are user-defined stylesheets changing them. The order of the styles describes the style trace, i.e. shows in which order the styles were applied. Each style has a link to its source. Overwritten styles are displayed lined through and inherited styles are displayed in gray. | ||
| + | |||
| + | === Infotips === | ||
| + | When hovering images, colors, gradients or fonts inside the style values a little popup preview will be shown for them, which helps finding the right color or gradient, investigating, if an image could be loaded or checking if a chosen font is the right one. | ||
== See also == | == See also == | ||
[[HTML Panel]] | [[HTML Panel]] | ||
Revision as of 10:15, 12 July 2012
The Computed Side Panel shows all CSS style values calculated by the user agent while interpreting the given CSS information for the selected node inside the HTML Panel. So it shows the actual displayed styles.
Contents |
Options Menu
This menu is reachable via the little arrow in the panel tab ( File:OptionsMenuArrow.png ) or by right-clicking on on the panel tab (since Firebug 1.9).
| Option | Preference | Description |
|---|---|---|
| Show User Agent CSS | extensions.firebug.showUserAgentCSS | Toggles display of CSS styles specified by the user agent and are not changed by any user-defined stylesheet |
| Sort alphabetically | extensions.firebug.computedStylesDisplay | Toggles between grouped and alphabetical display |
| Show Mozilla Specific Styles | extensions.firebug.showMozillaSpecificStyles | Toggles display of Mozilla specific styles (styles prefixed by -moz-)
|
| Colors As Hex | extensions.firebug.colorDisplay | Display color values in hexadecimal format |
| Colors As RGB | extensions.firebug.colorDisplay | Display color values in RGB(A) format |
| Colors As HSL | extensions.firebug.colorDisplay | Display color values in HSL(A) format |
For more info about tweaks available in Firebug please see the full list of preferences.
Context Menu
| Option | Context | Description |
|---|---|---|
| Expand All Styles | everywhere | Expands all user-defined styles to allow style tracing |
| Collapse All Styles | everywhere | Collapses all user-defined styles |
| Inspect in DOM panel | styles | Allows to inspect the style definition inside the DOM Panel |
| Inspect in CSS panel | style source link | Allows to inspect the stylesheet inside the CSS Panel |
| Open in New Tab | style source link | Opens the stylesheet inside a new browser tab |
| Inspect in CSS panel | style source link | Allows to inspect the stylesheet inside the CSS Panel |
Panel
Style Tracing
The computed styles can be expanded in the case there are user-defined stylesheets changing them. The order of the styles describes the style trace, i.e. shows in which order the styles were applied. Each style has a link to its source. Overwritten styles are displayed lined through and inherited styles are displayed in gray.
Infotips
When hovering images, colors, gradients or fonts inside the style values a little popup preview will be shown for them, which helps finding the right color or gradient, investigating, if an image could be loaded or checking if a chosen font is the right one.
