Computed Side Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Updated description to 1.10)
m (Changed image for options menu arrow)
 
(6 intermediate revisions not shown)
Line 1: Line 1:
[[Image:Computed_Side_Panel.png|thumb|400px|Computed Side Panel]]
[[Image:Computed_Side_Panel.png|thumb|400px|Computed Side Panel]]
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.
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.
-
 
-
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.
 
== Options Menu ==
== Options Menu ==
-
This menu is reachable via the little arrow in the panel tab ( [[Image:optionsMenuArrow.png]] ) or by right-clicking on on the panel tab (since [[Firebug Release Notes#Firebug 1.9|Firebug 1.9]]).
+
This menu is reachable via the little arrow in the panel tab ( [[File:ComputedSidePanelOptionsMenuArrow.png]] ) or by right-clicking on on the panel tab (since [[Firebug Release Notes#Firebug 1.9|Firebug 1.9]]).
{| class="wikitable" style="width:100%; vertical-align:top;"
{| class="wikitable" style="width:100%; vertical-align:top;"
Line 16: Line 14:
| Show Mozilla Specific Styles || <code>extensions.firebug.showMozillaSpecificStyles</code> || Toggles display of Mozilla specific styles (styles prefixed by <code>-moz-</code>)
| Show Mozilla Specific Styles || <code>extensions.firebug.showMozillaSpecificStyles</code> || Toggles display of Mozilla specific styles (styles prefixed by <code>-moz-</code>)
|-
|-
-
| Colors As Hex || extensions.firebug.colorDisplay || Display color values in hexadecimal format
+
| Colors As Hex || <code>extensions.firebug.colorDisplay</code> || Display color values in hexadecimal format
|-
|-
-
| Colors As RGB || extensions.firebug.colorDisplay || Display color values in RGB(A) format
+
| Colors As RGB || <code>extensions.firebug.colorDisplay</code> || Display color values in RGB(A) format
|-
|-
-
| Colors As HSL || extensions.firebug.colorDisplay || Display color values in HSL(A) format
+
| Colors As HSL || <code>extensions.firebug.colorDisplay</code> || Display color values in HSL(A) format
|}
|}
For more info about tweaks available in Firebug please see the [[Firebug Preferences|full list of preferences]].
For more info about tweaks available in Firebug please see the [[Firebug Preferences|full list of preferences]].
 +
 +
== 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 expansion and scroll state is persisted when reloading the page or inspecting another element.
 +
 +
=== 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.
== Context Menu ==
== Context Menu ==
Line 35: Line 42:
| Inspect in DOM panel || styles || Allows to inspect the style definition inside the [[DOM Panel]]
| 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]]
+
| Copy Location || style source link || Copies the URL of the stylesheet to the clipboard
|-
|-
| Open in New Tab || style source link || Opens the stylesheet inside a new browser tab
| Open in New Tab || style source link || Opens the stylesheet inside a new browser tab

Latest revision as of 00:17, 24 December 2012

Computed Side Panel

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

[edit] Options Menu

This menu is reachable via the little arrow in the panel tab ( ComputedSidePanelOptionsMenuArrow.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.

[edit] Panel

[edit] 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 expansion and scroll state is persisted when reloading the page or inspecting another element.

[edit] 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.

[edit] 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
Copy Location style source link Copies the URL of the stylesheet to the clipboard
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

[edit] See also

HTML Panel

Retrieved from "http://getfirebug.com/wiki/index.php/Computed_Side_Panel"
Personal tools