查找页面上所有使用的 CSS 选择器

Question

开头 - 如果标题不准确，我很抱歉。我只是不知道如何正确调用它。

有没有办法在项目中找到与某个文件相关的所有路径，在我的情况下是bootstrap.min.css（它可能是未缩小的版本）？我的意思是，就像在这个屏幕上一样：

所以我想在 DevTools（或者可能在 WebStorm，如果这样做更简单的话）中找到与项目中所有元素相关的所有 Bootstrap 路径。在上面的屏幕上，我选择了带有一些 Bootstrap 类的 <nav> 元素，我可以在右侧看到它们。我强调（红色矩形）引导 CSS 源文件路径 - 已经被 DevTools 过滤（橙色矩形）。我当然可以手动单击每个链接到确切的行，但是有很多 HTML 元素，其中一些有多个类，页面也很少。所以点击所有这些链接需要很长时间。

是否有一种快速的方法来过滤/查找所有此类路径（标记为红色），Bootstrap CSS 选择器使用这些路径来匹配项目中的所有 HTML 元素？

Answer 1

1. 打开开发者工具
2. 溢出菜单 > 更多工具 > 覆盖范围
3. 点击抽屉面板工具栏中的记录
4. 停止录制并查看结果

查看结果时，您将被带到“来源”面板中的相应文件。然后，这将突出显示装订线中的每一行红色或绿色，以指示它是否被使用。这适用于 CSS 和 JavaScript。