Google Chrome предоставляет встроенный инструмент отладки под названием « Chrome DevTools », который включает удобную функцию, которая может оценивать или проверять селекторы XPath / CSS без сторонних расширений.
Это можно сделать двумя способами:
Используйте функцию поиска на панели «Элементы» для оценки селекторов XPath / CSS и выделения совпадающих узлов в DOM.
Выполните токены $ x ("some_xpath") или $$ ("css-селекторы") на панели консоли, которые будут как оценивать, так и проверять.
С панели элементов
Нажмите F12, чтобы открыть Chrome DevTools.
Панель элементов должна открываться по умолчанию.
Нажмите Ctrl + F, чтобы включить поиск DOM на панели.
Введите оценщики XPath или CSS для оценки.
Если есть совпадающие элементы, они будут выделены в DOM.
Однако, если в DOM есть совпадающие строки, они также будут считаться действительными результатами. Например, заголовок селектора CSS должен соответствовать всему (встроенный CSS, скрипты и т. Д.), Который содержит заголовок слова, а не только элементам соответствия.
С пульта управления
Нажмите F12, чтобы открыть Chrome DevTools.
Переключение на панель консоли.
Введите XPath, например $x(".//header")
, для оценки и подтверждения.
Введите CSS-селекторы, например $$("header")
, для оценки и проверки.
Проверка результатов, полученных при выполнении консоли.
Если элементы совпадают, они будут возвращены в списке. В противном случае отображается пустой список [].
$x(".//article")
[<article class="unit-article layout-post">…</article>]
$x(".//not-a-tag")
[ ]
Если селектор XPath или CSS недопустим, исключение будет отображаться красным текстом. Например:
$x(".//header/")
SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.
$$("header[id=]")
SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.