It appears that the search window of the Dev Tools in Chrome 17 no longer matches CSS selectors. Boo. I know I can use the JS console but it really, really helps me to see the matches within the context of the DOM. If anyone knows how I can still achieve this or alternatively, how to revert to a previous (i.e. the one I had yesterday) version of chrome I would appreciate it.
-
1Wow, I was never aware of such a feature. Shame they took it out of Chrome... I wonder what reason they had for doing so.BoltClock– BoltClock2012-02-09 14:48:53 +00:00Commented Feb 9, 2012 at 14:48
-
It is documented right at the bottom of this Google Code page ...except it isn't true anymore as far as I can tell.Huliax– Huliax2012-02-09 16:22:44 +00:00Commented Feb 9, 2012 at 16:22
-
I was using this feature hundreds of times a day. A damn shamehuyz– huyz2012-02-21 08:00:46 +00:00Commented Feb 21, 2012 at 8:00
-
The documentation for the $ and $$ CSS selectors appears to have moved to here: developer.chrome.com/devtools/docs/console#selecting-elementsChris R– Chris R2016-01-13 11:24:45 +00:00Commented Jan 13, 2016 at 11:24
Add a comment
|
4 Answers
Another way is to use $$ in the console, for example:
$$("#contents ul.features")
1 Comment
MasterJoe
I have two input elements, one of which does not have a name attribute. When I search for inputs using $$, I only get the element which has name attribute. Is this the correct behavior or am I missing something ? If this is the correct behavior, then please explain why it returns one input instead of both. Thanks !
I haven't been able to find any workaround to get CSS selectors working in the search bar again. Rejoice, for they have returned!
In any case, you can still use document.querySelectorAll() with a selector in the JS console, then right-click on any of the matched elements and choose Reveal in Elements Panel and it'll show you where it is in the DOM, just as with previous versions.
4 Comments
Domenic
You can also use
$$ as a shortcut instead of typing out all of document.querySelectorAll.
Ariel Serafini
I have filed a bug report about this, please star it so we can get this feature working again: code.google.com/p/chromium/issues/detail?id=127440
Paul Irish
Domenic, or even:
inspect($$('div.foo')[0])
Huliax
$('div.foo') in the chrome dev tools console...shows them all
This was an unintended regression in Chrome that we didn't catch. Luckily Ariel (in the comments here) filed a ticket and it was fixed two days later.
If all goes well, it'll make its way to the stable channel in about 11 weeks. However the feature is now available in Chrome Canary, so I recommend using that.
I verify Css and XPath selectors using Natu WebSync extension for Chrome.
It can:
- split selector to parts and verify them separately
- show with color how many elements are found for each selector part. 0 - Red, 1 - Green, several - Yellow
- highlight elements on the page when I hover selector part
- navigate to selector element in Elements tab when I click selector part
It can be very useful for those who need to write and verify complex selectors.
https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac
