Menu
The “Computed” tab is generally located in the right panel of the DevTools interface, like it is shown here in Chrome. The content in the Computed tab is important because it shows us the values that the browser is actually using on the rendered website.
# Open the Issues tab Open DevTools. Click the Go to Issues button in the yellow warning bar. Alternatively, select Issues from the More tools menu. Once you're on the Issues tab, click the Reload page button if necessary.
... then click Chrome and select DeveloperToolsAvailability from the list on the right. Double click it and change it from 2 to either 1 or 0. Click OK and close regedit, then close Chrome and re-open it. Chrome dev tools should now be enabled.
If you can see your new CSS in the Styles pane, but your new CSS is crossed out, it means that there's some other CSS that is overriding your new CSS. In CSS terminology this concept is called Specificity. Chrome DevTools can help you find the old CSS that is causing your new CSS to not be applied.
NB: This answer has no solid evidence, it's based on my observations along the time.
The gray calculated properties are neither default, nor inherited. This only occurs on properties that were not defined for the element, but calculated from either its children or parent based on runtime layout rendering.
Take this simple page as an example, display is default and font-size is inherited:
<style>
div { font-size: 13px; }
</style>
<div>
<p>asdf</p>
</div>
In this particular example, height is calculated from <p>'s children - text node (font size plus line height), width is calculated from its parent - <div>'s width, which is also calculated from its parent <body>.
EDIT: Well I thought again, here's my opinion based answer. I should really go and take a look at Chromium source code later :D
By expanding those arrows, you could see which actual rule is applied to the element, among all those defined against it (either directly or inherited, either by developer or browser):
Here you can trace down to every definition even including browser built-in rules, and check with the CSS cascading (overriding) mechanism.
So, for those elements that have no CSS definition (no directly defined, no inherited, no browser built-in), you don't have any source to trace. And the property values are totally runtime calculated.
If you check Show all, more grayed properties are shown. These are not defined anywhere either. But unlike those in previous screenshots, these are not runtime calculated - they are CSS spec default value.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With