Как искать элементы DOM с помощью селекторов XPath или CSS в инструментах разработчика Chrome?

116

В документе http://code.google.com/chrome/devtools/docs/elements.html говорится, что он поддерживает селекторы XPath или CSS, но когда я попробовал, у меня не получилось.

Кто-нибудь знает, как им пользоваться?

dom google-chrome google-chrome-devtools

— Бобо
источник

Ответы:

263

Вы можете использовать $xв консоли javascript Chrome. Никаких расширений не требуется.

например: $x("//img")

— Мэтт Полито
источник

Это полезный ответ. Чтобы добавить к нему, функция $ x принимает второй необязательный аргумент context. $ x (xpath, context) Это позволяет вам, например, выбрать конкретное содержимое iframe и выполнить для него запрос xpath. Итак, для первого iframe: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; # к xpath-запросу этого iframe для ячеек таблицы: $ x ("// td", myframe);

— Адольф Трюдо

чтобы найти элемент с помощью селектора CSS, следует использовать консольную функцию $$, например $$ ('body')

— user907860 02

Другие команды можно найти здесь: developers.google.com/chrome-developer-tools/docs/…

— Дмитрий Полушкин

Возвращаясь к этому вопросу спустя почти 2 года, да, этот вопрос лучше.

— Bobo

Очень хорошо для отладки XPath! Кстати, $x()функция работает и в API командной строки Safari.

— Otto G

Просто введите выражение xpath в поле поиска. У меня это работает в сборке на верхушке дерева.

В Chrome 11 эта функция, похоже, не работает, я сообщил об этом: http://crbug.com/79716

— Юрий Семихатский
источник

Ты прав. он работает, но функция выделения не работает. Я использую Chrome 10.0. * На Mac OS X.

— Бобо,

лучший ответ Марка Полито ниже.

— FGM

Он работает с Chrome 32. Перейдите на вкладку Element в devtool, нажмите CTRL + S и найдите xpath

— eeezyy

@eeezyy ты имеешь ввиду ctrl + f?

— Box

Для поиска xpath используйте $x('xpathSelector'). Для селектора css используйте $('cssSelector').

Однако этот последний селектор возвращает только первый соответствующий элемент. Если вы хотите увидеть все совпадающие элементы, выберите$$('cssSelector')

— чам
источник