Html 如何查找当前页面使用了哪些 CSS 文件

How to find which CSS files are used for current page

提问by Sergey

I have a lot of CSS files on the page. But a lot of these files are not used by styles. Is it possible to determine which files are used by page and which not.

我在页面上有很多 CSS 文件。但是很多这些文件不被样式使用。是否可以确定页面使用哪些文件，哪些不使用。

回答by Rob

Use http://getfirebug.com/to debug the page.

使用http://getfirebug.com/调试页面。

When looking at the css it will reference which stylesheet is used.

在查看 css 时，它将引用使用的样式表。

For example:

例如：

You can see from the screenshot that when using Firebug it shows in the blue text that the page is using the style.cssstylesheet.

您可以从屏幕截图中看到，当使用 Firebug 时，它以蓝色文本显示页面正在使用style.css样式表。

Work down the tree in Firebug and simply hover over your elements and see which stylesheets are used.

在 Firebug 中沿着树向下工作，只需将鼠标悬停在您的元素上即可查看使用了哪些样式表。

回答by JNDPNT

You can debug with firebug ( http://getfirebug.com/). It will show what is used for what and allows you to find out.

您可以使用 firebug ( http://getfirebug.com/)进行调试。它将显示什么用于什么，并允许您找出。

回答by Johnny Oshika

New in Chrome 59 is the coverage tool that shows you CSS and JS code coverage. It'll show you what percentage of CSS files are used on a page. When you click on that file, it'll show you which styles are used and which ones aren't. More info here: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Chrome 59 中的新功能是覆盖率工具，可向您显示 CSS 和 JS 代码覆盖率。它将显示页面上使用的 CSS 文件的百分比。当您单击该文件时，它会显示使用了哪些样式，哪些未使用。更多信息：https: //developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

回答by Rupendra

You can do one thing :

你可以做一件事：

1. open the website in Firefox

2. Use firebug to point some control on which you want to see the applied classes.

3. In the html source code in firebug , you can find the applied css classes on a particular control.

4. Find those classes in your CSS files.

5. Repeat this process for all the controls of the webpage.

1. 在 Firefox 中打开网站

2. 使用 firebug 指向一些您想要查看应用类的控件。

3. 在 firebug 的 html 源代码中，您可以在特定控件上找到应用的 css 类。

4. 在您的 CSS 文件中找到这些类。

5. 对网页的所有控件重复此过程。

Now you can remove those CSS files that are not used on that web page.

现在您可以删除那些不在该网页上使用的 CSS 文件。

Thanks.

谢谢。

回答by Rohit

Use Web Developer Addon with firefox. http://chrispederick.com/work/web-developer/

将 Web Developer Addon 与 firefox 结合使用。 http://chrispederick.com/work/web-developer/

After installing this addon goto firefox tool->web developer -> css-> view css.

安装此插件后，转到 firefox tool->web developer-> css-> 查看 css。

回答by ravidev

There are many ways to find which CSS are being used by page. here are some of them:

有很多方法可以找到页面正在使用的 CSS。这里是其中的一些：

1) if you are using firefox then firebug is useful to use. http://getfirebug.com/just right click on page and use Inspect Element option

1) 如果您使用的是 firefox，那么使用 firebug 很有用。http://getfirebug.com/只需右键单击页面并使用 Inspect Element 选项

2) if you use IE,then Developer tools is available in IE

2) 如果你使用 IE，那么开发者工具在 IE 中可用

3) If you use google chrome,then u can directly use Inspect Element option by right clicking on page.

3）如果您使用谷歌浏览器，那么您可以通过右键单击页面直接使用检查元素选项。

回答by S. Mayol

The way to find or access to CSS files are used for current page, could vary base on the Browser and/or Operating system you are using.

当前页面使用的查找或访问 CSS 文件的方式可能因您使用的浏览器和/或操作系统而异。

Here I am going to share with you Opening the “Console” panel (Developer Tool)of Chrome, Firefox, Internet Explorer, Safari, Opera in both Windows and Mac OS.

在这里和大家分享在Windows和Mac OS下打开Chrome、Firefox、Internet Explorer、Safari、Opera的“控制台”面板（开发者工具）。

When you open the Console of the current browser, click on the element you want to inspect and on the right hand side you will have a tab name Stylesas shows below:

当您打开当前浏览器的控制台时，单击要检查的元素，在右侧您将看到一个选项卡名称样式，如下所示：

As you can see the image has the name of the CSS file (in this example named "desktop_ltr.css")

如您所见，图像具有 CSS 文件的名称（在此示例中名为"desktop_ltr.css"）