Як шукати елементи 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 JavaScript. Розширення не потрібні.

колишній: $x("//img")

— Метт Політо
джерело

Це корисна відповідь. Щоб додати його, функція $ x приймає другий необов'язковий аргумент, контекст. $ x (xpath, контекст) Це дозволяє вибрати, наприклад, певний вміст iframe, і запустити проти нього xpath-запит. Отже, для першого iframe: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; #to xpath запит, що iframe для комірок таблиці: $ x ("// td", мій кадр);

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

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

— user907860

Більше команд можна знайти тут: developers.google.com/chrome-developer-tools/docs/…

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

повертаючись до цього питання через майже 2 роки, так, це приємніше.

— Бобо

Дуже добре для налагодження XPaths! До речі, $x()функція працює і в API командного рядка Safari.

— Otto G

Просто введення виразу xpath у вікні пошуку повинно працювати. Це працює для мене в наконечнику.

Схоже, ця функція порушена в Chrome 11, однак я помилку про це: http://crbug.com/79716

— Юрій Семихацький
джерело

ти правий. вона працює, але функція підсвічування порушена. Я використовую chrome 10.0. * На Mac os X.

— Бобо,

краще відповідь Марка Політо нижче.

— FGM

Він працює з Chrome 32. Перейдіть на вкладку елемент devtool і натисніть CTRL + S і пошук XPATH

— eeezyy

@eeezyy ти маєш на увазі ctrl + f?

— Коробка

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

Однак останній селектор повертає лише перший відповідний елемент. Якщо ви хочете побачити всі відповідні елементи, перейдіть на$$('cssSelector')

— чам
джерело