Jak wyszukiwać elementy DOM za pomocą selektorów XPath lub CSS w narzędziach programistycznych Chrome?

116

Dokument http://code.google.com/chrome/devtools/docs/elements.html mówi, że obsługuje selektory XPath lub CSS, ale kiedy próbowałem, wydawało mi się, że nie działają.

Czy ktoś wie, jak go używać?

dom google-chrome google-chrome-devtools

— Bobo
źródło

Odpowiedzi:

263

Możesz użyć $xw konsoli javascript Chrome. Nie potrzeba żadnych rozszerzeń.

dawny: $x("//img")

— Matt Polito
źródło

To jest pomocna odpowiedź. Aby to dodać, funkcja $ x przyjmuje drugi opcjonalny argument, kontekst. $ x (xpath, context) To pozwala na przykład wybrać konkretną zawartość elementu iframe i uruchomić względem niej zapytanie xpath. Tak więc dla pierwszej ramki iframe: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; #do xpath zapytaj, że iframe dla komórek tabeli: $ x ("// td", myframe);

— Adolph Trudeau

aby znaleźć element z selektorem CSS, należy użyć funkcji konsoli $$, np. $$ ('body')

— user907860

Więcej poleceń można znaleźć tutaj: developers.google.com/chrome-developer-tools/docs/…

— Dmitry Polushkin

wracając do tego pytania po prawie 2 latach, ta jest ładniejsza.

— Bobo

Bardzo dobre do debugowania XPaths! Nawiasem mówiąc, $x()funkcja działa również w interfejsie API wiersza poleceń Safari.

— Otto G

Wystarczy wpisać wyrażenie xpath w polu wyszukiwania. U mnie działa w kompilacji na wierzchołku drzewa.

Wygląda na to, że ta funkcja jest zepsuta w Chrome 11, zgłosiłem błąd w tym: http://crbug.com/79716

— Yury Semikhatsky
źródło

masz rację. działa, ale funkcja podświetlania jest zepsuta. Używam Chrome 10.0. * Na Mac OS X.

— Bobo

lepsza odpowiedź Marka Polito poniżej.

— FGM

Działa z Chrome 32. Przejdź do zakładki Element w devtool i wciśnij CTRL + S i wyszukaj xpath

— eeezyy

@eeezyy masz na myśli ctrl + f?

— Box,

Do wyszukiwania xpath użyj $x('xpathSelector'). W przypadku selektora CSS użyj $('cssSelector').

Jednak ten ostatni selektor zwraca tylko pierwszy pasujący element. Jeśli chcesz zobaczyć wszystkie pasujące elementy, wybierz$$('cssSelector')

— cham
źródło