Q

如何让CSS选择器在Developer Tools for Chrome 17中工作？

2012-02-09 85 views 30 likes

30

Chrome 17中的Dev Tools的搜索窗口看起来不再与CSS选择器匹配。嘘。我知道我可以使用JS控制台，但它真的帮助我在DOM的上下文中看到匹配。如果有人知道我还能如何实现这一目标，或者如何恢复到以前的版本（即我昨天使用的版本），我将不胜感激。如何让CSS选择器在Developer Tools for Chrome 17中工作？

2012-02-09 Huliax

+1

哇，我从来都不知道有这样一个功能。耻辱，他们把它从Chrome中拿出来......我想知道他们为什么这样做。 – BoltClock 2012-02-09 14:48:53

+0

它被记录在[此Google代码页面]的底部（http://code.google.com/chrome/devtools/docs/elements.html）...除非它是真实的，就我而言可以告诉。 – Huliax 2012-02-09 16:22:44

+0

我每天使用此功能数百次。一个该死的耻辱 – huyz 2012-02-21 08:00:46

A

回答

27

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

在任何情况下，你仍然可以使用document.querySelectorAll()用在JS控制台中选择，然后在任何一个匹配元素的右键单击并选择显示元素面板中，它会告诉你在哪儿。在DOM中，就像以前的版本一样。

2012-02-09 14:47:25 BoltClock

+0

这对我来说已经足够了。谢谢您的帮助。 – Huliax 2012-02-09 16:19:26

+16

您也可以使用'$$'作为快捷键而不是输入所有的'document.querySelectorAll'。 – Domenic 2012-05-02 04:59:51

+2

我已经提交了一个关于此问题的错误报告，请将其列出，以便我们可以再次使用此功能：http://code.google。com/p/chromium/issues/detail？id = 127440 – 2012-05-11 01:29:05

25

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

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

2012-05-17 17:58:29

+3

很高兴再次见到它！而且我会再次为你的截图捕捉你的答案而高兴。 – BoltClock 2012-05-17 18:00:58

+0

万岁！只是让生活变得更轻松。 – Huliax 2012-05-17 18:57:37

35

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

$$("#contents ul.features")

2014-03-05 11:04:53 Borek

+2

最好的回答，谢谢！ – sidney 2014-10-09 09:56:16

+0

我有两个输入元素，其中一个没有name属性。当我使用$$搜索输入时，我只能得到具有name属性的元素。这是正确的行为还是我错过了什么？如果这是正确的行为，那么请解释为什么它会返回一个输入而不是两个输入。谢谢！ – testerjoe2 2016-09-27 23:07:03

0

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

它可以：

分裂选择器部件和验证它们分别
显示与颜色许多元素是如何找到的每个选择部分。 0 - 红，1 - 绿色，几个 - 在页面上黄
亮点元素，当我将鼠标悬停选择部分
导航中的元素标签，选择元件，当我点击选择部分

它可以是非常有用的对于那些需要编写和验证复杂选择器的人来说。

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

2018-01-17 13:58:28 wsbaser

相关问题