Как заставить CSS селекторы работать в Инструментах разработчика для Chrome 17?

Question

Похоже, что окно поиска Dev Tools в Chrome 17 больше не соответствует селекторам CSS.Бу.Я знаю, что могу использовать консоль JS, но это действительно очень помогает мне увидеть совпадения в контексте DOM.Если кто-нибудь знает, как я все еще могу достичь этого или альтернативно, как вернуться к предыдущей (т.е. той, что была у меня вчера) версии Chrome, я был бы признателен.

Answer 1

Другой способ - использовать $$ в консоли, например:

$$("#contents ul.features")

Answer 2

Я не смог найти обходного пути, чтобы заставить CSS-селекторы снова работать в строке поиска. Радуйтесь, потому что они вернулись!

В любом случае, вы все равно можете использовать document.querySelectorAll() с селектором в консоли JS, затем щелкните правой кнопкой мыши на любом из соответствующих элементов и выберите Показать на панели элементов , и он покажет вам где он находится в DOM, как и в предыдущих версиях.

Answer 3

Это была непреднамеренная регрессия в Chrome, которую мы не уловили. К счастью, Ариэль (в комментариях здесь) подал заявку , и она была исправлена ​​через два дня.

Если все пойдет хорошо, он доберется до стабильного канала примерно через 11 недель. Однако эта функция теперь доступна в Chrome Canary , поэтому я рекомендую ее использовать.

Answer 4

Я проверяю селекторы Css и XPath, используя Расширение Natu WebSync для Chrome .

Может:

• разделить селектор на части и проверить их отдельно
• показать цветом, сколько элементов найдено для каждой части селектора. 0 - красный, 1 - зеленый, несколько - желтый
• выделение элементов на странице при наведении курсора на элемент
• перейти к элементу селектора на вкладке Элементы, когда я щелкаю по элементу селектора

Это может быть очень полезно для тех, кому нужно написать и проверить сложные селекторы.

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