How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

孤街醉人 提交于 2019-12-03 20:42:59

问题


Background story: I have a page with multiple CSS that override each other. There are so many crossed out CSS style, so I don't want to see them.

I know Firebug on Firefox provide this feature (Only Show Applied CSS), which can show what CSS style in what CSS file is being applied (neat !).

How do we have this feature on Chrome ? I tried install Firebug Lite for Chrome but no luck.

PS: Chrome have Computed Style tab, but it does not show what style come from what CSS file.


回答1:


In the Chrome dev tools, in the right hand column (where CSS is shown in the Elements panel), the first section is called "Computed Style". If you deselect "show inherited", you get a neat list of the styles that actually apply to the element. Does that help?



来源:https://stackoverflow.com/questions/16770176/how-to-filter-and-show-only-applied-css-in-chrome-developer-tools-like-firebug

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!