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.
Table of Content
Benefits of using Computed Tab:
The various benefits of computed tabs are:
- Grouping of similar properties: The properties of the web page can be grouped into certain expandable categories, such as layout, text, appearance, etc. This helps developers inspect the specific types of properties that they want.
- Filtering of properties: You can filter the properties or their values from the list displayed by the computed tab for the selected elements. This helps the developers search for specific things that they want to inspect without scrolling through the whole list.
- Links to the style and sources tab: You can find arrows along with the values, which, on clicking, move you to the specific properties in the style tab or pane. Same way you get the file name where the property is defined, which on clicking takes you to the sources tab, focusing on the property in the file.
- Box Model Inspection: You get a box model representation with the respective values of the selected elements that you can use to inspect the box model by clicking the specific components of the model, which will be displayed live on the web page.
- Render Fonts: You also get the fonts used for the selected elements and information about them being local fonts or network resources. You also get the number of glyphs, i.e., the number of characters in the text in the selected element.
How to open Computed Tab in Chrome:
The computed tab is present in the elements tab, which is a tool in DevTools. To open it, follow these steps:
Step 1: Using Chrome, visit the web page where you want to use the tab. Right-click the page and click Inspect to open DevTools, or you can use the shortcut key “Ctrl+Shift+I“.
Step 2: In DevTools, click the Elements tab, and in the tab there will be a section with various panes or tabs such as styles, computed, layout, etc. Click on the computed tab.
Opening Computed Tab
Various options available Computed Tab:
The various option provided in the Computed Tab are:
Various options in Computed Tab
- 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.
Links to open in certain tabs
- 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.
Usage example of Computed Tab:
Let’s use the tab for getting list of properties of specific elements of GFG site.
Step 1: Using Chrome visit GFG site and open DevTools and located the Computed tab.
Step 2: Select the element which list of properties you want to check and view the properties and inspect the box model as required.
Using the Computed Tab in GFG site
The Computed Tab is very useful for developers to inspect the CSS properties of a specific selected element. Developers have various options to filter the properties, group the properties or inspect the box model.