在Google Chrome开发者工具中查看通过检查器添加的CSS

Question

首先，我知道这个问题已经存在了，但这不是我要的。我想知道是否有开发者工具中的视图可以让你查看“通过检查器”添加的所有样式。例如, 我可以选择span.count元素并查看这是我添加的内容。

但是我已经通过检查器添加了很多东西。现在我必须单击每个元素，以查看它是否是我为其添加样式的元素之一。

有人已经在SO上发布过这个问题的帖子或知道答案吗？谢谢。

- cdmo

---

也许对一些读者有用的提示：这里提到的解决方案仅适用于已添加的样式，而不适用于已添加/更改属性的现有选择器。 - Koert van Kleef

请查看 https://dev59.com/4W865IYBdhLWcg3wM7q0 - Pacerier

Answer 1

自从Chrome 22版本起，您可以在“Sources”面板中打开“inspector-stylesheet”源代码。其中包含了您手动添加的所有规则。

- Alexander Pavlov

---

是的，它也适用于Chrome 21：http://screencast.com/t/iglPzUkrsycR我刚刚在Chrome 20上进行了更新，所以我不能确定它是否在那个版本中。我知道在元素面板中没有这个文本链接： http://screencast.com/t/jVy3YqUQ谢谢！感谢Google Chrome添加此功能！ - cdmo

不客气 :) 请随意在http://new.crbug.com提交DevTools功能请求（请以字符串“DevTools：”开头的摘要进行更好的分类）。 - Alexander Pavlov

这似乎在Chrome 23中已经消失了。有人可以证实或否认吗？ - Luke H

仍然存在于Chrome 24中...如果页面中有多个框架，您应该在与包含您的焦点元素的框架相对应的文件夹中查找资源。 - Alexander Pavlov

在 Chrome 25 中似乎确实缺少这个功能，无法在“资源”、“源代码”或“本地修改”菜单项中看到。在 Chrome 的漏洞跟踪器中找到了这个问题（https://code.google.com/p/chromium/issues/detail?id=160974&q=inspector%20stylesheet&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified），将从那里跟进。 - Luke H

Chrome 40已经具备此功能，您可能正在寻找Elements> Styles（右上角）中的“+”按钮。 - northamerican

Answer 2

如果有人看到这个问题并且仍然在使用更新版本的Chrome时遇到麻烦，这是我使用的方法：在元素面板中添加一个样式，在CSS规则中的元素面板上，点击检查器样式表链接。这将在资源面板中打开检查器样式表。您可以将其保持打开状态，并根据需要添加内容。

- Dan Hedgecock

---

我经常这样做，希望能够直接进入资源并启动一个新的检查器样式表，而不需要转到元素选项卡。如果有人知道如何做，请分享！ - stacey.mosier