Chrome Developer Tools: element style

Note: This article is an article on the translation of chrome developer tools series.

See https://developers.google.com/chrome-developer-tools/docs/elements-styles for more information

Chrome Developer Tools: Element styles

This tutorial covers editing CSS styles using various devtools aids.

This tutorial explains how to edit CSS styles using development tools.

Note:If you are a web developer and want to get the latest version of Developer Tools, you should use the Google Chrome release from the developer channel.

Note: If you are a web developer and want to obtain the latest development tools, obtain the Google Chrome release from the developer channel.

Contents

1. Computed style pane
2. Styles pane
   1. Viewing styles
   2. Editing styles
   3. Adding new rules and Properties
3. Metrics pane
4. Persisting changes

Computed style pane computing style pane

• Invoke context menu on this (inspect me) element or hitControl-shift-CTo enter the inspect element mode and click on it. Alternatively, if you have devtools open, clickMagnifierButton at the bottom ofElementsPanel to point-click the element in the page.

Right-click this (inspect me) or press control-shift-C to enter the inspect element mode and click. Optional. If you have enabled the development tool, click ElementsAt the bottom of the Panel MagnifierButton, and then click on the page element.

• You will see several panes on the right-hand side of the Panel. IfComputed StylePane is collapsed, expand it by clicking its header. The pane displays all the final values for CSS properties computed by the browser for the currently selected Dom node.

You will see several panes on the right hand side of the Panel. If The computed style pane is scaled down. Click its header to expand it. This pane displays all the final values of the selected Dom node.

• For every property specified by more than one rule, the pane displays a computed trace, which is a stack of selectors applicable to the node and specifying the property value. since rule selectors have different specificities, all but the top-most one will be "canceled out" in the trace, Which is denoted by a strike-through type.

Each attribute is specified by more than one rule. This pane shows the trace of computing. It is the stack applied to the node by the selector and the specified attribute value. Because the selector of the rule has different features, all top-level ones will be offset by each other, which will be represented by a strikethrough.

• Whenever possible, a computed trace element will contain in a link to the source code fragment that defines the respective rule.

As long as possible, the calculated trace element will contain links to the original code snippets that define their respective rules.

• The pane contains only properties from rules that are directly applicable to the selected element. In order to additionally display inherited properties, enableShow inheritedCheckbox. Such properties will be displayed in a dimmed font.

The pane contains only one attribute, which is directly applied to the selected element. To add the attributes of inherited, select Show inherited check box, these properties will be displayed in a pale fontStyles pane

• For the currently selected Dom node, this pane displays all the styles applicable to this node. styles with gray background are read-only, the rest are editable.

For the currently selected Dom node, these panes are displayed so the style applied on this node. The gray background style is read-only, and the rest is editable.

• Invoke the devtools inspector on this element as mentioned above.

Call devtools to view the element. Viewing styles

• The styles are displayed as closely to the original declaration as possible. some properties can have exclamation marks () next to their names. this means that the property name and/or value is not understood by the browser, so the property is ignored (as per the CSS Specification ).

The style should be declared as close as possible. Some attributes have an exclamation point before their names, which indicates that the name or value of this attribute cannot be understood by the browser, so this attribute is ignored.

• Note:A style declaration may contain several properties with the same name. Only the last one takes effect, canceling the preceding ones. Those will be struck out, like overridden properties.

Note: The style Declaration contains several attributes with the same name. Only the last one takes effect, and the previous one will be canceled. Those attributes that will be deleted, just like overwriting.

• If a property value (say,background-image) Contains a URL that has been loaded, you can click it to navigate to the corresponding resource in the resources panel.

For example background-image）Including a loaded URL, you can click it to access the corresponding resources in the resource panel.

• CSS color values are accompanied by a swatch filled with the respective color. You can click the swatch to cycle through all color formats available for the corresponding property, or useGearMenu Options to set the format for all color values, for which the format has not been set by clicking on the color swatch.As authoredOption formats color values in the way they are written in the CSS code.

After the CSS color value is followed by a color palette, fill in the corresponding color. You can click the color palette to select all available color formats, display the corresponding properties, or use the gear menu option to set the format of the color value. This format is not clicked on the color palette. The AS authored option displays the color values in CSS code format.

• Pseudo element styles, such::before,::after, And more-webkit-*Ones, are also exposed in the styles pane, along with the rules inherited from ancestor elements.

False element styles, such ::before, : After and more shapes such-WebKit-* styles are also displayed in the style pane, along with the rules from the ancestor element inherited.

Editing styles

• Double-clickworderProperty name, and type inboInstead. A validborderProperty name will be automatically suggested.

Double-click worderAttribute name, and the output of Bo, an available border attribute name will be automatically prompted.

• HitDownSeveral times to reachborder-colorSuggestion, and pressEnterOrTabTo accept it and jump to the value field (Alternatively, you can pressRightTo accept the suggestion and continue editing the field,) orESCTo cancel the change. As usual,Shift-TabTraverses input fields in the reverse order.

Click the color Panel after border-color several times to obtain the color, then press ENTER or tab to accept it, and jump to the value range (as a choice, you can right-click to accept the suggestion or edit the value .) Or Press ESC to cancel the change. As usual, Shift-tab traverses the input values in the reverse order.

• While editingborder-colorProperty value, deleteclueWord, and type inbl-In a moment, you will see a suggestion:black.

When editing border-colorAttribute Value, delete the clue word, and enter BL. You will immediately see the prompt "Black.

• PressUpOrDownTo cycle through all suggestions startingbl. Choose any color value you like, and pressEnterOrTabTo accept the suggestion and commit the new property value. The property gets committed, and the exclamation mark disappears, as the property has become valid.

Press up or down to repeat all the suggestions starting with BL. Select any color value you like, press ENTER or tab to accept the suggestion, and submit a new property value. After the attribute value is submitted, the exclamation point disappears and the attribute value becomes available.

• Besides iterating through available value keywords, you can also increment/decrement numeric property values (likeopacity: 0.8Ormargin: 2px 4px) WithUp/DownAndPageup/PagedownKeys. The unit Delta can be controlled in the following ways:
• 0.1 unit:Alt-up/Down(Or plainUp/DownIf the current value is in the range[-1; 1])
• 1 unit:Up/Down(For values greater1Or less-1)
• 10 unit:Shift-up/DownOrPageup/Pagedown
• 100 unit:Shift-Pageup/Pagedown

In addition to traversing available value keywords, you can also use Up/ DownAnd Pageup/Pagedown key to increase/decrease numeric attribute values (like opacity: 0.8Or margin: 2px 4px). The changed unit is controlled by the following rules:

• 0.1 unit:Alt-up/Down(Or plainUp/DownIf the current value is in the range[-1; 1])
• 1 unit:Up/Down(For values greater1Or less-1)
• 10 unit:Shift-up/DownOrPageup/Pagedown
• 100 unit:Shift-Pageup/Pagedown

• Hover the mouse cursor over the rule body. You will see a checkbox to the right of each property in the rule.

Hover your cursor over the rule. You will see a multiple selection box on the attribute values of each rule.

• Uncheck a boxDisableTheborder-colorProperty (I. e. Temporarily remove it from the style). The property gets struck out, and the change is instantly reflected in the inspected page.

Deselect box to disable border-colorAttribute.

• Double-clickborder-colorProperty Value and change itLime, Accept. Notice the property automatically get enabled with the updated value.

Double-click border-colorAnd change it to lime to accept it. Note that the attribute can be used automatically and the value is updated. Adding new rules and properties add new rules and Properties

• You can add a new style rule to be considered in addition to those found in the stylesheets loaded by the page. ClickGearButton and selectNew Style ruleOption. A new rule with an automatically suggested selector appears. PressEnterTo accept the selector and start typing in the first property of the rule.

  Note:If you edit the selector so that it will not match the selected element, the rule will turn dimmed and obviously, will not be applied to the element. You shoshould rarely need to do this.

In addition to those style sheets loaded by pages, you can add new style rules. Click GearClick it to select a new style rule. A new rule with the recommended selector appears. Press enter to receive the selector and start entering the first attribute of the rule.

• You can also add a new property to any editable style:
• Double-clicking the blank space of the first or last rule lines (those with curly braces ).
• HittingTabWhile editing the last style property value (or the corresponding rule selector if no properties have been added yet .)

You can add attributes to an editable style by double-clicking the blank space of the first or last rule line (with curly braces) when editing the final style property value (or if no attribute value is added, the corresponding rule selector), click the tabmetrics pane measurement pane

• The metrics pane resides just below the styles pane and allows you to examine and edit the current element's box model parameters found in the computed style.

The measurement pane is located at the bottom of the style pane. You can check and edit the box model parameters of the current element in the calculated style.

• The concentric rectangles contain the values forPadding,Border, AndMarginProperties (top, right, bottom, and left values for each of them .)

Concentric rectangles include Padding, Border, And Value of the attributes (top, right, bottom, and left) of margin

• For non-statically positioned elements,PositionRectangle will be additionally displayed in the pane, containing the values ofTop,Right,Bottom, AndLeftProperties.

For non-static position elements, add a display position rectangle in the pane, including Top, right, bottom, and left attribute values

• Forposition: fixedAndposition: absoluteElements, the central field contains the actualOffsetwidth × offsetheightPixel dimensions of the selected element.

Pair position: fixedAnd Position: absolute element. The value field in the middle includes the actual value of the selected element.  Offsetwidth × offsetheight pixel measurement value.

• All values can be modified by double-clicking them, like property values in the styles pane (the changes are not, however, guaranteed to take effect, as this is subject to the concrete element positioning specifics .)

The values of all attributes can be modified by double-clicking these values, as in the sytle pane. (These changes are not guaranteed to take effect because they are subject to specific element location details .) Persisting changes

• Upon an external style sheet rule modification, the respective resource text is updated in the resources panel, and the revision history is stored for such style sheet resources until the devtools window is closed.

When the external style table rule is modified, the corresponding resource text is updated on the resource panel. The revision history of the style sheet is stored in the Development Tools window.

• ActivateResourcesPanel, findTutorial.cssIn the Resource Tree. Note that the tree node is expandable. Click the arrow next to the node title, and you will see all the resource modifications that you have made above.

Activate the resource panel and find it in the Resource Tree Tutorial.css. Note that the tree can be expanded. Click the arrow next to the node title to see all the modifications you have made.

• Select any revision to see its differences from the original stylesheet resource, highlighted line-wise.

Select any revision, and the lines that are different from the original style sheet will be highlighted.

• You can drag and drop a stylesheet revision node into most text editors to export the revision content.

You can drag the style sheet revision node to most text editors to export the revision content.