Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 977
Huliax Avatar asked Feb 09 '12 14:02

Huliax


People also ask

Where is the CSS selector in Chrome Developer Tools?

Press F12 to open up Chrome DevTools. Elements panel should be opened by default. Press Ctrl + F to enable DOM searching in the panel. Type in XPath or CSS selectors to evaluate.


2 Answers

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

$$("#contents ul.features") 
like image 168
Borek Bernard Avatar answered Sep 23 '22 03:09

Borek Bernard


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.

like image 42
BoltClock Avatar answered Sep 22 '22 03:09

BoltClock