Google Chrome Developer tools not showing inspected elements styles?

16,555

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!

Share:
16,555
Hailwood
Author by

Hailwood

I could tell you all about me... but I'd prefer to let my work do the talking for me!

Updated on June 08, 2022

Comments

  • Hailwood
    Hailwood almost 2 years

    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