How to get CSS selectors to work in the Developer Tools for Chrome 17?

css google-chrome css-selectors google-chrome-devtools

46,302

Solution 1

~~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.

Solution 2

Another way is to use $$ in the console, for example:

$$("#contents ul.features")

Solution 3

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.

46,302

Author by

Huliax

Updated on January 18, 2020

Comments

Huliax over 4 years

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.
Domenic about 12 years

You can also use $$ as a shortcut instead of typing out all of document.querySelectorAll.
Admin about 12 years

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 almost 12 years

Domenic, or even: inspect($$('div.foo')[0])
BoltClock almost 12 years

Great to see it back! And I would upvote again for capturing your answer in your screenshot.
Huliax almost 12 years

$('div.foo') in the chrome dev tools console...shows them all
Huliax almost 12 years

Hurray! Just makes life a bit easier.
MasterJoe over 7 years

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 !