如何让 CSS 选择器在 Chrome 17 的开发者工具中工作？

Posted 2023-03-06

【中文标题】如何让 CSS 选择器在 Chrome 17 的开发者工具中工作？

【英文标题】：How to get CSS selectors to work in the Developer Tools for Chrome 17?

【发布时间】：2012-03-02 00:54:33

【问题描述】：

Chrome 17 中开发工具的搜索窗口似乎不再匹配 CSS 选择器。嘘。我知道我可以使用 JS 控制台，但它确实可以帮助我在 DOM 的上下文中查看匹配项。如果有人知道我如何仍然可以实现这一目标，或者如何恢复到以前的（即我昨天拥有的）版本的 chrome，我将不胜感激。

【问题讨论】：

哇，我从来不知道有这样的功能。可惜他们把它从 Chrome 中拿出来了……我想知道他们这样做的原因是什么。

它记录在this Google Code page 的底部……但据我所知，它不再是真的了。

我每天使用这个功能数百次。真可惜

$ 和 $$ CSS 选择器的文档似乎已移至此处：developer.chrome.com/devtools/docs/console#selecting-elements

【参考方案1】：

另一种方法是在控制台中使用$$，例如：

$$("#contents ul.features")

【讨论】：

我有两个输入元素，其中一个没有名称属性。当我使用 $$ 搜索输入时，我只得到具有 name 属性的元素。这是正确的行为还是我错过了什么？如果这是正确的行为，请解释为什么它返回一个输入而不是两个输入。谢谢！

【参考方案2】：

我找不到任何解决方法让 CSS 选择器再次在搜索栏中工作。 Rejoice, for they have returned!

无论如何，您仍然可以在 JS 控制台中使用 document.querySelectorAll() 和选择器，然后右键单击任何匹配的元素并选择 在元素面板中显示，它会显示你在 DOM 中的位置，就像以前的版本一样。

【讨论】：

您也可以使用$$ 作为快捷方式，而不是输入所有document.querySelectorAll。

我已经提交了一个关于这个的错误报告，请给它加星，这样我们才能让这个功能再次工作：code.google.com/p/chromium/issues/detail?id=127440

Domenic，甚至：inspect($$('div.foo')[0])

$('div.foo') 在 chrome 开发工具控制台中...全部显示

【参考方案3】：

这是我们没有发现的 Chrome 中的意外回归。幸运的是，Ariel（在这里的 cmets 中）filed a ticket，两天后就修复了。

如果一切顺利，它将在大约 11 周内进入稳定频道。但是Chrome Canary 现已提供该功能，因此我建议使用该功能。

【讨论】：

很高兴看到它回来！我会再次投票赞成在您的屏幕截图中捕获您的答案。

万岁！只是让生活更轻松。

【参考方案4】：

我使用 Natu WebSync extension for Chrome 验证 Css 和 XPath 选择器。

它可以：

将选择器拆分为多个部分并分别验证它们 用颜色显示为每个选择器部分找到了多少元素。 0 - 红色，1 - 绿色，几个 - 黄色 当我悬停选择器部分时突出显示页面上的元素 当我单击选择器部分时，导航到元素选项卡中的选择器元素

对于需要编写和验证复杂选择器的人来说非常有用。

https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac