Various options available Computed Tab

The various option provided in the Computed Tab are:

• Box Model: You get a box model representation of the selected elements. In the model you will find values of various section in the model these sections are position, margin, border, padding and content. You can also click the specific section of the model to highlight it in the web page.
• Filter: You can also search property or values of the properties from the various list of properties displayed in the computed tab.
• Show all: If checked then all possible properties whose values are not modified for the selected elements also gets listed along with the normal list of properties. These unchanged properties are greyed out to look distinct.
• Group: If checked then all the properties can be grouped under certain expandable category that are Layout, Text, Appearance, Animation, Table and Other.

When you expand the property you get the various values that have be set for the property in different classes in different files or same files. The displayed value is the overridden value among all specified values. You also get the name of the file where that CSS property is specified.

• Arrow icon: Along with property values you also get a arrow when you hover over the property. This arrow icon when clicked takes you to the style tab highlighting the property in that tab under the respective class name.
• File name: You also get the name of the file when you expand the property. This name acts as a link which takes you to the respective file in sources tab and highlights the respective property in the file.

The computed tab is present in the Elements Tool in the DevTools of Chrome and is used to provide a list of all CSS properties of the selected element. You can also filter the properties and get the file name, which you can click to open that file in the Sources Tool. The tool also provides the box model of the selected elements, which can be used to inspect box properties such as padding, margin, border, etc.