Google Chrome开发人员工具未显示受检元素样式？ [英] Google Chrome Developer tools not showing inspected elements styles?

问题描述

我使用google chrome开发者工具来测试我的网站;

对于某些元素来说它工作正常，但对于其他人来说，它显示的是选择器但显示它没有风格;该元素具有样式，并且样式应用于该元素。但检查员没有显示任何样式。

如果点击该检查器的css文件行的链接，我可以看到那里的样式。

我看到一个google群组主题，其中指出

解决方案

好的，我也发现此错误，看起来像它有一个更接近的bug。

它声明：

当存在无法识别的伪类时，DevTools会中断在CSS中

twitter-bootstrap的功能！所以如果您使用twitter bootstrap（或尝试使用特定于供应商的伪类），开发工具看起来就会被破坏。 afaik解决这个问题的唯一方法是等待这个bug被开发人员解决。

如果有人能为此发布修复，我会接受他们的回答！ / p>

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).

---

解决方案

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!

这篇关于Google Chrome开发人员工具未显示受检元素样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！