Google Chrome Developer tools not showing inspected elements styles?

css google-chrome google-chrome-devtools web-inspector
Hailwood picture Hailwood · Jul 17, 2012 · Viewed 16.2k times · Source

I am using the google chrome developer tools for testing my website;

It is working fine for some elements, however for others it is showing the selector but showing it as having no styles; The element does have styles, and the styles are applied to the element. but the inspector shows no styles.

If I click the link to the css file line for that inspector I can see the styles there.

I saw a google group topic that stated that removing any empty url() declarations fixed the bug. however I have no empty url() declarations.

I also found this bug which is somewhat similar; but not exactly the same. one thing I did notice is that both the usecase this bug provided and my setup are using twitter-bootstrap. I am using the .less version of bootstrap which includes bootstrap into the single css file as a copy > paste method, so my css file has 3740 lines. could this be part of the issue?

The elements are not deep nested (body > div#container > inspected element).
There are not an excessive amount of styles applied to the elements (<= 10).

Click to enlargeDev Tools Example

Answer

Hailwood picture Hailwood · Jul 17, 2012

Ok, so I also found this bug aswell which looks like it has a closer match to the bug.
It states that

DevTools break when an unrecognised pseudo-class is present in CSS

which twitter-bootstrap does! so it looks like the dev tools are broken if you are using twitter bootstrap (or anything that tries to use vendor-specific pseudo classes). afaik the only way to solve this is to wait for this bug to be solved by the developers.

If someone can post a fix for this I will accept their answer!

Related questions

How to use chrome web inspector to view hover code

Using chromes web inspector to view code is very useful. But how do you view for example the hover code for a button? You will have to hover the mouse over the button and thus cannot use it (mouse) in …

Read More
See :hover state in Chrome Developer Tools

I want to see the :hover style for an anchor I'm hovering on in Chrome. In Firebug, there's a style dropdown that allows me to select different states for an element. I can't seem to find anything similar in Chrome. …

Read More
How to save CSS changes of Styles panel of Chrome Developer Tools?

How to save CSS changes of Styles panel of Google Chrome Developer Tools? At tool's website it's mentioned that we can see all change in resource panel But I'm working locally on a CSS file but changes are not showing …

Read More