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

Ответы:

263

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

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

Мэтт Полито
источник
28
Это полезный ответ. Чтобы добавить к нему, функция $ x принимает второй необязательный аргумент context. $ x (xpath, context) Это позволяет вам, например, выбрать конкретное содержимое iframe и выполнить для него запрос xpath. Итак, для первого iframe: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; # к xpath-запросу этого iframe для ячеек таблицы: $ x ("// td", myframe);
Адольф Трюдо
12
чтобы найти элемент с помощью селектора CSS, следует использовать консольную функцию $$, например $$ ('body')
user907860 02
3
Другие команды можно найти здесь: developers.google.com/chrome-developer-tools/docs/…
Дмитрий Полушкин
Возвращаясь к этому вопросу спустя почти 2 года, да, этот вопрос лучше.
Bobo
Очень хорошо для отладки XPath! Кстати, $x()функция работает и в API командной строки Safari.
Otto G
15

Просто введите выражение 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
3

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

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

чам
источник